:root {
      /* 하얀빛이 많이 감도는 밀키 스카이 & 코튼 클라우드 팔레트 */
      --brand: #7dd3fc;          /* 맑고 부드러운 에어리 스카이블루 */
      --brand-dark: #38bdf8;     /* 텍스트 대비 및 포인트용 톤 */
      --primary: #a5f3fc;        /* 물빛이 감도는 뽀얀 파스텔 하늘색 */
      --primary-dark: #67e8f9;   /* 버튼 호버용 은은한 스카이 */
      --primary-light: #f8fafc;   /* 거의 화이트에 가까운 맑은 배경/하이라이트 */
      --secondary: #e0f2fe;      /* 솜사탕처럼 연하고 뽀얀 하늘색 */
      --accent-yellow: #fefce8;  /* 파스텔톤과 어우러지는 아주 은은한 바닐라 크림 */
      --text: #334155;           /* 대비가 너무 강하지 않은 부드러운 소프트 슬레이트 */
      --text-muted: #94a3b8;     /* 은은한 보조 텍스트 */
      --bg: #ffffff;             /* 깨끗한 순백색 기본 배경 */
      --bg-alt: #f8fafc;         /* 구름 결처럼 맑고 연한 미색 배경 */
      --border: #f1f5f9;         /* 튀지 않고 자연스러운 경계선 */
      --card-bg: #ffffff;        /* 깔끔한 화이트 카드 배경 */
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", Roboto, sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.7;
      word-break: keep-all;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* 상단 고정 헤더 */
    header {
      position: sticky;
      top: 0;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      z-index: 1000;
    }

    .nav-inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .brand-logo {
      font-weight: 800;
      font-size: 1.2rem;
      letter-spacing: -0.5px;
      color: var(--brand);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    nav {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      white-space: nowrap;
    }

    nav a {
      font-size: 0.9rem;
      font-weight: 600;
      color: #475569;
      transition: color 0.2s;
    }

    nav a:hover {
      color: var(--brand);
    }

/* 메인 비주얼 (HERO) - 하얀빛이 많이 도는 에어리 스카이 */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  color: #1e293b; /* 밝은 배경에 맞춘 또렷한 다크 텍스트 */
  background-color: #f0f9ff;
  /* 우윳빛 화이트에서 부드러운 스카이블루로 은은하게 이어지는 오버레이 */
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 249, 255, 0.88) 55%, rgba(186, 230, 253, 0.75) 100%),
    url('../images/먼작귀 굿즈.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  /* 몽글몽글한 구름빛 빛망울 연출 */
  background: radial-gradient(circle at 83% 28%, #ffffff 0%, transparent 35%), radial-gradient(circle at 75% 80%, #bae6fd 0%, transparent 30%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  padding: 85px 24px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.hero-copy {
  max-width: 760px;
}

.hero .eyebrow {
  display: inline-block;
  color: #0284c7; /* 맑고 선명한 스카이블루 포인트 */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  color: #0f172a;
}

.hero .lead {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 14px;
  color: #334155;
}

.hero p:not(.lead) {
  max-width: 690px;
  color: #64748b;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
}

/* 기본 강조 버튼: 파스텔 스카이 블루 배경 + 깔끔한 화이트 텍스트 */
.hero .btn.primary {
  background: #38bdf8;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}

.hero .btn.primary:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  transform: translateY(-2px);
}

/* 아웃라인 버튼: 맑은 화이트/연하늘 테두리 */
.hero .btn.outline {
  background: rgba(255, 255, 255, 0.7);
  color: #0284c7;
  border-color: #bae6fd;
  backdrop-filter: blur(4px);
}

.hero .btn.outline:hover {
  background: #ffffff;
  border-color: #38bdf8;
}

/* 공통 섹션 레이아웃 */
.section {
  padding: 85px 24px;
}

.section-alt {
  background-color: var(--bg-alt);
}

.container {
  max-width: 1040px;
  margin: 0 auto;
}

.section-head {
  margin-bottom: 40px;
}

.section-head .eyebrow {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0284c7;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.section-head .section-index {
  margin-right: 4px;
  opacity: 0.8;
}

.section-head h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.section-head p {
  font-size: 0.95rem;
  color: var(--text-muted);
}

    /* 01. 굿즈 열풍 소개 */
    .intro-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 36px;
      align-items: center;
    }

    .intro-box {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.04);
    }

    .intro-box h4 {
      font-size: 1.15rem;
      color: var(--brand);
      margin-bottom: 12px;
    }

    .worldview-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
    }

    .worldview-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.92rem;
      color: #334155;
    }

    .worldview-list span {
      color: var(--brand);
      font-weight: bold;
    }

    /* [섹션 03] 베스트셀러 굿즈 상세 프로필 */
    .product-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 40px;
      align-items: center;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.04);
    }

    .product-layout .media {
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }

    .product-layout .media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-layout .placeholder {
      padding: 30px 20px;
      color: var(--text-muted);
    }

    .product-layout .placeholder strong {
      display: block;
      font-size: 1.1rem;
      color: var(--brand);
      margin-bottom: 8px;
    }

    .product-layout .placeholder span {
      font-size: 0.85rem;
      line-height: 1.5;
      display: block;
    }

    .product-detail .detail-header {
      margin-bottom: 16px;
    }

    .product-detail .mbti-badge {
      display: inline-block;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--brand);
      background: var(--primary-light);
      padding: 4px 12px;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .product-detail h3 {
      font-size: 1.6rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .product-detail .tagline {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--primary-dark);
      line-height: 1.5;
    }

    .product-detail .summary {
      font-size: 0.93rem;
      color: #334155;
      line-height: 1.7;
      margin: 16px 0 24px;
    }

    .specs-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 20px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .spec-item dt {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .spec-item dd {
      margin: 0;
      font-size: 0.92rem;
      font-weight: 600;
      color: #1e293b;
    }

    .detail-note {
      font-size: 0.88rem;
      color: #334155;
      background: var(--primary-light);
      border-left: 3px solid var(--brand);
      padding: 12px 16px;
      border-radius: 0 8px 8px 0;
      line-height: 1.6;
    }

    .detail-note strong {
      color: #0f172a;
    }

    /* 04. 굿즈 카테고리 도감 (3열 카드 그리드) */
    .char-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .char-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.03);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .char-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 22px rgba(59, 130, 246, 0.16);
    }

    .char-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .char-num {
      font-size: 0.75rem;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 1px;
    }

    .char-mbti {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--brand);
      background: var(--primary-light);
      padding: 4px 10px;
      border-radius: 12px;
    }

    .char-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .char-jp {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .char-card p.desc {
      font-size: 0.9rem;
      color: #334155;
      line-height: 1.6;
      flex-grow: 1;
      margin-bottom: 16px;
    }

    .char-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tag {
      font-size: 0.75rem;
      background: var(--bg-alt);
      color: #475569;
      border: 1px solid var(--border);
      padding: 4px 8px;
      border-radius: 6px;
    }

    /* 05. 구매처 비교표 */
    .table-container {
      overflow-x: auto;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.03);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 0.92rem;
    }

    th, td {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
    }

    th {
      background-color: var(--bg-alt);
      color: #1e3a8a;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.5px;
    }

    tr:last-child td {
      border-bottom: none;
    }

    /* 06. FAQ 아코디언 */
    .faq-wrapper {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color 0.2s;
    }

    .faq-q {
      padding: 20px 24px;
      font-size: 1rem;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }

    .faq-icon {
      font-size: 1.2rem;
      color: var(--brand);
      transition: transform 0.2s ease;
    }

    .faq-a {
      padding: 0 24px 20px;
      font-size: 0.92rem;
      color: #475569;
      display: none;
      line-height: 1.65;
      border-top: 1px dashed var(--border);
      padding-top: 16px;
    }

    .faq-item.active .faq-a {
      display: block;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }

    /* 푸터 */
    footer {
      background: #ffffff;
      border-top: 1px solid var(--border);
      padding: 44px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.85rem;
    }

    /* 반응형 레이아웃 */
    @media (max-width: 960px) {
      .product-layout { grid-template-columns: 1fr; padding: 28px; }
      .char-grid { grid-template-columns: repeat(2, 1fr); }
      .intro-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 680px) {
      .char-grid { grid-template-columns: 1fr; }
      .specs-list { grid-template-columns: 1fr; }
    }
  
    /* 굿즈 페이지의 밀키 스카이 팔레트에 맞춘 공통 메뉴 */
    .goods-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e0f0f8}
    .goods-header .nav-inner{max-width:1320px;min-height:78px;padding:14px 24px;gap:20px;position:relative}
    .goods-header .brand-logo{color:#3483a4;flex-shrink:0;font-size:18px;white-space:nowrap}
    .goods-site-nav{display:flex;align-items:center;gap:5px;overflow:visible;white-space:nowrap}
    .goods-site-nav a{display:block;padding:9px 11px;border:1px solid transparent;border-radius:22px;color:#526779;font-size:13px;font-weight:700;line-height:1.5;transition:background .18s,color .18s,border-color .18s}
    .goods-site-nav a:hover,.goods-site-nav a:focus-visible{background:#edf9ff;border-color:#c9e9f7;color:#237b9e}
    .goods-menu-toggle{display:none;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:8px 13px;border:1px solid #cfe9f4;border-radius:13px;background:#f2fbff;color:#347d9a;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
    .goods-menu-toggle>span:first-child{font-size:22px;line-height:1}
    .goods-header a:focus-visible,.goods-menu-toggle:focus-visible{outline:3px solid #9fd9ef;outline-offset:3px}
    @media(max-width:1199px){
      .goods-header .nav-inner{min-height:72px;padding:12px 20px;flex-wrap:wrap;gap:10px}
      .goods-menu-toggle{display:inline-flex}
      .goods-site-nav{display:none;flex:0 0 100%;width:100%;padding:8px 0 4px;white-space:normal;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:calc(100dvh - 100px);overflow-y:auto;overflow-x:hidden}
      .goods-site-nav.is-open{display:grid}
      .goods-site-nav a{min-width:0;display:flex;align-items:center;justify-content:center;min-height:46px;background:#f6fbfe;border:1px solid #e2f0f7;border-radius:13px;padding:11px 7px;font-size:14px;word-break:keep-all;text-align:center}
      .goods-site-nav a:last-child{grid-column:1/-1}
    }
    @media(max-width:360px){.goods-header .brand-logo{font-size:16px}.goods-header .nav-inner{padding:11px 14px}.goods-menu-toggle{padding:8px 10px}}
    @media(prefers-reduced-motion:reduce){.goods-site-nav a{transition:none}}

  
/* 굿즈 페이지 헤더 글자 확대 */
.goods-header .nav-inner{max-width:1400px;min-height:84px;gap:18px}
.goods-header .brand-logo{font-size:22px;line-height:1.5}
.goods-header .goods-site-nav{gap:4px}
.goods-header .goods-site-nav a{font-size:16px;line-height:1.5;padding:10px 9px;font-weight:750}
@media(max-width:1199px){
 .goods-header .nav-inner{min-height:80px;gap:12px}
 .goods-header .goods-site-nav{gap:8px}
 .goods-header .goods-site-nav a{font-size:16px;min-height:49px;padding:11px 8px}
 .goods-header .goods-menu-toggle{font-size:14px;min-height:45px}
}
@media(max-width:380px){.goods-header .brand-logo{font-size:19px}.goods-header .nav-inner{padding-left:14px;padding-right:14px}.goods-header .goods-site-nav a{font-size:15px}}


/* 모바일 헤더는 확대 전 크기로 유지 */
@media(max-width:1199px){
 .goods-header .nav-inner{min-height:72px;gap:10px}
 .goods-header .brand-logo{font-size:18px}
 .goods-header .goods-site-nav a{font-size:14px;min-height:46px;padding:11px 7px;font-weight:700}
 .goods-header .goods-menu-toggle{font-size:13px;min-height:43px}
}
@media(max-width:360px){.goods-header .brand-logo{font-size:16px}}


.inline-style-1 { font-size: 1.05rem; font-weight: 600; color: #0f172a; margin-bottom: 12px; }
.inline-style-2 { color: #334155; margin-bottom: 16px; }
.inline-style-3 { color: #334155; }
.inline-style-4 { margin:0 }
.inline-style-5 { text-align: center; }
.inline-style-6 { font-weight: 700; color: #1e3a8a; margin-bottom: 6px; }
.inline-style-7 { font-size: 0.8rem; color: #94a3b8; margin-top: 6px; }