@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



/* =====================================================================
 * EC-001「ゲージノート」ポップUI（T-191）
 * 作成: WEBアプリ開発部 ノア ／ 適用: 2026-08-25 参謀
 * 決裁: 2026-08-24 社長「黄色で良い。この案でSWELLに実装して」
 * 元: web-app/公開用_gaugenote/design/gaugenote_pop_mockup.html
 * ⚠️ SWELL固有のクラス名は未検証。合わなくても表示は壊れず、効かないだけ。
 * ===================================================================== */

:root {
  --pop-yellow: #FFE14D;
  --pop-pink:   #FF6FA5;
  --pop-blue:   #6EC3F0;
  --pop-ink:    #111111;
  --pop-paper:  #FFFFFF;
  --pop-line:   4px;
  --pop-shadow: 5px 5px 0 var(--pop-ink);
}

.post_content h2 {
  display: inline-block;
  background: var(--pop-pink);
  color: var(--pop-paper);
  border: var(--pop-line) solid var(--pop-ink);
  border-radius: 12px;
  padding: 6px 18px;
  box-shadow: var(--pop-shadow);
  font-weight: 900;
  line-height: 1.5;
  background-image: none;
}
.post_content h2::before,
.post_content h2::after { content: none !important; }

.post_content h3 {
  border-bottom: var(--pop-line) solid var(--pop-ink);
  padding-bottom: 4px;
  font-weight: 900;
  background-image: none;
}
.post_content h3::before,
.post_content h3::after { content: none !important; }

/* 記事本文は白地・黒文字のまま（決裁の条件） */
.post_content { background: var(--pop-paper); color: var(--pop-ink); }

.p-postList__item,
.p-blogCard,
.gn-pop-card {
  border: var(--pop-line) solid var(--pop-ink) !important;
  border-radius: 18px;
  box-shadow: var(--pop-shadow);
  background: var(--pop-paper);
  overflow: hidden;
}

.p-postList__cat,
.c-categoryLabel,
.gn-pop-tag {
  background: var(--pop-ink) !important;
  color: var(--pop-paper) !important;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 10px;
}

.post_content .wp-block-button__link,
.c-btn,
.gn-pop-btn {
  background: var(--pop-yellow) !important;
  color: var(--pop-ink) !important;
  border: var(--pop-line) solid var(--pop-ink) !important;
  border-radius: 999px;
  box-shadow: var(--pop-shadow);
  font-weight: 900;
  text-shadow: none;
}
.post_content .wp-block-button__link:hover,
.c-btn:hover,
.gn-pop-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--pop-ink); }
.post_content .wp-block-button__link:focus-visible,
.c-btn:focus-visible,
.gn-pop-btn:focus-visible { outline: 3px solid var(--pop-pink); outline-offset: 3px; }

.p-mainVisual,
.gn-pop-hero {
  position: relative;
  background: var(--pop-yellow);
  border-bottom: 5px solid var(--pop-ink);
}
.p-mainVisual::before,
.gn-pop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--pop-blue) 22%, transparent 23%);
  background-size: 26px 26px;
  opacity: .42;
  pointer-events: none;
}
.p-mainVisual > *,
.gn-pop-hero > * { position: relative; z-index: 1; }

.gn-pop-facts {
  background: var(--pop-ink);
  color: var(--pop-paper);
  padding: 22px 24px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.9;
}
.gn-pop-facts b { color: var(--pop-yellow); font-weight: 900; }
.gn-pop-facts a { color: var(--pop-blue); }

.gn-pop-bubble {
  display: inline-block;
  background: var(--pop-paper);
  border: var(--pop-line) solid var(--pop-ink);
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--pop-ink);
}

@media (max-width: 599px) {
  :root { --pop-line: 3px; --pop-shadow: 3px 3px 0 var(--pop-ink); }
  .post_content h2 { font-size: 20px; padding: 5px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .post_content .wp-block-button__link:hover,
  .c-btn:hover,
  .gn-pop-btn:hover { transform: none; box-shadow: var(--pop-shadow); }
}