/* =========================================================
   PHILOS PQ10 매직크림 · 얼굴마사지 콘텐츠 사이트
   라운드 없는 하드엣지 + 절제된 라인 + 넉넉한 여백의 에디토리얼 럭셔리 무드.
   40-60대 여성 타겟: 큰 글씨, 선명한 컬러(라즈베리 로즈), 깔끔한 Pretendard 통일.
   자매 사이트(얼굴붓기관리 등)와는 색·레이아웃·타이포로 구분 — 상담/문의 폼 없음,
   모든 CTA는 자사몰(philosplaza.co.kr) 상품 페이지로 직결.
   ========================================================= */

:root {
  /* brand tokens (structure.json client.colors 값과 동일) */
  --color-primary: #262220;       /* 진한 웜차콜 텍스트 — 최대 대비 */
  --color-primary-soft: #55493F;  /* 서브 텍스트 */
  --color-accent: #D6335B;        /* 선명한 라즈베리 로즈 */
  --color-accent-dark: #B02248;   /* hover / pressed */
  --color-accent-light: #FBE4EA;  /* 옅은 로즈 틴트 배경 */
  --color-bg: #FFFFFF;            /* 클린 화이트 */
  --color-bg-alt: #FDEEE3;        /* 패널 대체 배경(피치톤) */
  --color-border: #E9D5C2;
  --color-white: #FFFFFF;

  --font-heading: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-display: 'Manrope', 'Pretendard', sans-serif; /* 숫자·영문 배지 전용 — 큰 넘버/티커에 사용 */

  /* 라운드 없음 — 모서리는 전부 직각. 위계는 얇은 헤어라인과 여백, 타이포로 만든다 */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;

  --section-padding: clamp(72px, 10vw, 140px);
  --section-gap: clamp(72px, 9vw, 132px);
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);

  /* 상시 노출되는 무거운 그림자 대신, 호버 시에만 아주 은은하게 뜨는 정도로 절제 */
  --shadow-hover: 0 14px 28px -18px rgba(38, 34, 32, 0.28);

  --tracking-label: 0.16em;

  --header-h: 84px;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* width:100vw 풀블리드 섹션(.appeal-band, .ticker-band, .closing-cta 등)이
   세로 스크롤바 폭만큼 실제 뷰포트보다 살짝 넓어져 가로 스크롤바가
   깜빡이며 나타났다 사라지는 전형적인 버그 방지 — 페이지 레벨 가로 스크롤은
   어차피 필요 없으므로 여기서 안전하게 잘라낸다. icon-row/latest-feed 같은
   컴포넌트 자체의 overflow-x:auto 가로 스크롤에는 영향 없음. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-primary-soft);
  font-family: var(--font-body);
  font-size: 18.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body, p, li, a, span, summary, blockquote, td, th, label {
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

/* 하나의 필터 레시피로 사진 톤을 통일 — 따뜻한 보정 */
.rank-thumb,
.area-card img,
.pq10-editorial img,
.latest-item img,
.content-page img,
.hero-media img {
  filter: saturate(0.96) contrast(1.02) brightness(1.02) sepia(0.02);
}

a { color: var(--color-accent-dark); text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.26;
  word-break: keep-all;
  text-wrap: balance;
  margin: 0 0 0.55em;
  font-weight: 800;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 900; margin-bottom: 0.6em; }
h2 { font-size: clamp(25px, 3vw, 34px); margin-top: 0; }
h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 0; }

/* h2/h3가 아이콘 로우·문단·step-flow 같은 형제 바로 뒤에 올 때 위쪽 여백이
   0으로 붙어버리던 버그 — 앞에 뭔가 있으면 항상 여백을 준다. 단, eyebrow
   라벨 바로 다음(헤더 클러스터로 묶이는 경우)만 여백 없이 붙인다. */
* + h2, * + h3 { margin-top: 1.4em; }
:is(.eyebrow, .section-eyebrow) + :is(h2, h3) { margin-top: 0; }

/* 문단 끝에 한 단어만 외로이 남는 '고아 줄' 방지 — 의미단위에 가깝게 줄바꿈되도록 */
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 1.3em; }

/* 에디토리얼 킥커 — 배경 없는 얇은 트래킹 텍스트 + 밑줄 하나로만 강조 */
.eyebrow,
.section-eyebrow,
.essay-kicker,
.area-eyebrow,
.step-num {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 700;
}

/* ---------- layout shell ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  padding: 0 clamp(20px, 5vw, 48px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-nav {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 44px);
}
.site-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.site-name img { display: block; width: auto; height: 22px; }
.site-tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-primary-soft); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--color-accent-dark); border-color: var(--color-accent); }
}
.nav-cta {
  display: inline-block;
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  border: 1px solid var(--color-primary);
  transition: background-color 0.2s var(--ease-fluid), color 0.2s var(--ease-fluid);
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { background: var(--color-accent); border-color: var(--color-accent); }
}
/* 모바일 메뉴 토글 — 데스크톱에서는 숨김, 760px 이하에서만 노출 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--color-primary); }
.mob-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 199;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 8px clamp(20px, 5vw, 48px) 20px;
}
.mob-nav[hidden] { display: none; }
.mob-nav a {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.mob-nav a:last-child { border-bottom: 0; }
.mob-nav .mob-nav-cta { color: var(--color-accent-dark); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

main { display: block; }

.site-footer {
  padding: 56px clamp(20px, 5vw, 48px) 64px;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  margin-top: 40px;
}
.footer-grid {
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 32px;
  display: grid;
  grid-template-columns: 0.8fr 2fr 0.8fr;
  gap: 28px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.footer-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}
.footer-col .footer-line {
  margin: 0 0 5px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-primary-soft);
}
.footer-cs-phone {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-primary);
}
.site-footer .quick-links {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-soft);
}
.footer-brand {
  max-width: 1120px;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand img { opacity: 0.7; }
.footer-copyright {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-primary-soft);
  opacity: 0.7;
}
.site-footer .quick-links a { color: var(--color-primary-soft); }
@media (hover: hover) and (pointer: fine) {
  .site-footer .quick-links a:hover { color: var(--color-accent-dark); }
}

/* ---------- content-page article (detail pages) ---------- */
.content-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 32px) var(--section-padding);
}
.content-page h1 { margin-bottom: 0.55em; }
.content-page img {
  width: 100%;
  height: auto;
  margin: 2.2em 0;
}

@media (min-width: 900px) {
  .content-page {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .content-page > h1 { grid-area: 1 / 1 / 2 / 2; }
  .content-page > .detail-hero { grid-area: 1 / 2 / 4 / 3; margin: 0; align-self: stretch; }
  .content-page > .content-intro { grid-area: 2 / 1 / 3 / 2; }
  .content-page > .hero-cta { grid-area: 3 / 1 / 4 / 2; align-self: start; text-align: left; margin-top: 4px; }
  .content-page > *:not(.detail-hero):not(.content-intro):not(.hero-cta):not(h1) {
    grid-column: 1 / -1;
  }
}

/* 사진에 얇은 매트(여백+헤어라인)를 둘러 액자처럼 보이게 한다 — 모서리는 직각 그대로 */
.detail-hero {
  margin: 0 0 clamp(24px, 4vw, 32px);
  padding: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.content-page .detail-hero img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
  display: block;
  transition: transform 0.6s var(--ease-fluid);
}
@media (hover: hover) and (pointer: fine) {
  .detail-hero:hover img { transform: scale(1.03); }
}
@media (max-width: 899px) {
  .content-page .detail-hero img { aspect-ratio: 16 / 10; min-height: 0; }
}

.hero-cta { text-align: center; margin: 0 0 clamp(24px, 4vw, 32px); }

/* 럭셔리 리테일 버튼 — 필(pill) 대신 직각, 트래킹 넣은 대문자, 화살표는 배지 없이 텍스트로 */
.content-page a[target="_blank"],
.home-cta a,
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: 1px solid var(--color-accent);
  text-decoration: none;
  transition: background-color 0.25s var(--ease-fluid), border-color 0.25s var(--ease-fluid), transform 0.25s var(--ease-fluid);
}
.content-page a[target="_blank"]::after,
.home-cta a::after,
.cta-button::after {
  content: '→';
  font-size: 16px;
  line-height: 1;
  transition: transform 0.3s var(--ease-fluid);
}
@media (hover: hover) and (pointer: fine) {
  .content-page a[target="_blank"]:hover,
  .home-cta a:hover,
  .cta-button:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    text-decoration: none;
  }
  .content-page a[target="_blank"]:hover::after,
  .home-cta a:hover::after,
  .cta-button:hover::after { transform: translateX(5px); }
}
.content-page a[target="_blank"]:active,
.home-cta a:active,
.cta-button:active { transform: scale(0.98); }

.detail-cta {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 2.4em 0 0.4em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.detail-cta img {
  width: 36%;
  min-width: 140px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  display: block;
  margin: 0;
}
.detail-cta-copy {
  flex: 1;
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.detail-cta-copy .eyebrow {
  display: inline-block;
  font-size: 13px;
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.detail-cta-copy h3 { font-size: clamp(20px, 2.4vw, 25px); margin: 0 0 0.5em; }
.detail-cta-copy p { margin: 0 0 20px; }
@media (max-width: 560px) {
  .detail-cta { flex-direction: column; }
  .detail-cta img { width: 100%; aspect-ratio: 16 / 9; }
}

/* -- 콘텐츠 밴드: 얇은 상단 룰과 여백만으로 섹션을 구분 -- */
.section-band {
  margin-top: clamp(40px, 6vw, 60px);
  padding: clamp(40px, 6vw, 64px) 0 0;
  border-top: 1px solid var(--color-border);
}
.section-band-alt { background: none; }
.section-band-inner { max-width: none; margin: 0; padding: 0; }
.section-band-inner > h2:first-child { margin-top: 0; }

.mid-parallax {
  position: relative;
  margin-top: clamp(40px, 6vw, 60px);
  min-height: clamp(240px, 34vh, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-primary);
}
.mid-parallax::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--mid-img);
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) contrast(1.02) brightness(0.85) grayscale(0.15);
}
.mid-parallax::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(38, 34, 32, 0.62);
}
.mid-parallax-copy { position: relative; z-index: 1; text-align: center; max-width: 560px; padding: 32px clamp(20px, 5vw, 32px); }
.mid-parallax-copy h3 { color: var(--color-white); font-size: clamp(19px, 3vw, 27px); margin: 0 0 10px; }
.mid-parallax-copy p { color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; }
.mid-parallax-copy .cta-button { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.6); }
@media (hover: hover) and (pointer: fine) {
  .mid-parallax-copy .cta-button:hover { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); }
}

/* ---------- sitemap page ---------- */
.sitemap-section { margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--color-border); }
.sitemap-section h2 { margin-bottom: 1em; }
.sitemap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sitemap-list li { border-bottom: 1px solid var(--color-border); }
.sitemap-list li:first-child { border-top: 1px solid var(--color-border); }
.sitemap-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-primary);
  transition: color 0.2s ease, padding-left 0.2s var(--ease-fluid);
}
.sitemap-list a::after { content: '→'; color: var(--color-accent); flex: none; transition: transform 0.2s var(--ease-fluid); }
@media (hover: hover) and (pointer: fine) {
  .sitemap-list a:hover { color: var(--color-accent-dark); padding-left: 10px; text-decoration: none; }
  .sitemap-list a:hover::after { transform: translateX(4px); }
}

/* ---------- FAQ accordion — 라인으로 구분되는 리스트, 카드 아님 ---------- */
details {
  border-top: 1px solid var(--color-border);
  padding: 0;
  margin: 0;
  counter-increment: faq;
}
details:last-of-type { border-bottom: 1px solid var(--color-border); }
details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  padding: 26px 36px 26px 0;
  position: relative;
  color: var(--color-primary);
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-accent);
}
details summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform 0.3s var(--ease-fluid);
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details > *:not(summary) {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  max-width: 820px;
  color: var(--color-primary-soft);
  font-size: 16px;
  line-height: 1.85;
  margin: 0;
  padding-left: 32px;
  transition: grid-template-rows 0.4s var(--ease-fluid), opacity 0.3s ease, margin 0.4s var(--ease-fluid);
}
details[open] > *:not(summary) { grid-template-rows: 1fr; opacity: 1; margin: 0 0 28px; }
.faq-section { counter-reset: faq; }

/* ---------- home page ---------- */
.home-page { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px) var(--section-padding); }
/* closing-cta가 마지막 섹션일 때는 그 풀블리드 핑크 블록이 곧바로 footer로
   이어져야 하므로, 그 뒤에 붙는 .home-page 자체의 하단 패딩은 없앤다 */
.home-page:has(.closing-cta) { padding-bottom: 0; }
.home-page h1 { margin-bottom: 0.55em; }

.card-section { position: relative; margin-top: var(--section-gap); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--color-border); }
.card-section h2 { margin-bottom: 0.7em; }

.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.section-desc { max-width: 680px; font-size: 17.5px; }
.section-folio { display: none; }

/* -- 히어로: 좌 텍스트 / 우 포토, 라운드 없는 직각 프레임 -- */
.hero-section {
  margin: 32px 0 0;
  min-height: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  background: linear-gradient(155deg, var(--color-accent-light) 0%, var(--color-bg) 62%);
  padding: clamp(48px, 6vw, 72px) clamp(28px, 5vw, 56px);
  border: 1px solid var(--color-border);
}
.hero-section::before { content: none; }
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 0;
  color: var(--color-primary);
  text-shadow: none;
}
.hero-copy .eyebrow {
  display: inline-block;
  font-size: 13.5px;
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 7px;
  margin-bottom: 26px;
  animation: hero-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.hero-copy h1 {
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.16;
  margin-bottom: 0.5em;
  color: var(--color-primary);
  text-shadow: none;
  animation: hero-fade-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-sub { animation: none; }
}
.hero-copy .hero-sub {
  font-size: 19px;
  max-width: 440px;
  margin-bottom: 32px;
  color: var(--color-primary-soft);
  animation: hero-fade-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
.hero-copy .hero-sub span { display: block; }
.hero-copy .cta-button { display: inline-flex; margin-bottom: 34px; }

.hero-media {
  position: relative;
  z-index: 1;
  padding: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 5;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; margin: 0; }

.tag-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color 0.2s var(--ease-fluid), color 0.2s var(--ease-fluid), border-color 0.2s var(--ease-fluid);
}
@media (hover: hover) and (pointer: fine) {
  .tag-pill:hover { background: var(--color-primary); color: var(--color-white); text-decoration: none; }
}
@media (max-width: 860px) {
  .hero-section { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16/10; order: -1; }
}

/* -- 왜 얼굴마사지인가 value band -- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }
.value-item {
  background: var(--color-bg);
  padding: 34px 30px;
}
.value-item .value-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.value-item h3 { margin-bottom: 8px; font-size: 19px; }
.value-item p { margin: 0; font-size: 16px; }

/* -- 어디서부터 볼까요 (start-list): "오늘 가장 많이 보는 글" 랭킹 카드 대신,
   실제 방문 통계를 흉내내지 않는 정직한 진입점 안내 리스트 —
   bestskincare.philosworld.com의 START HERE 섹션 패턴을 우리 색으로 적용 -- */
/* 십자 그리드 — 2x2, 헤어라인 하나로 셀 사이에 '+' 모양 구분선이 생기는
   기법(부위별/기초 섹션과 동일한 gap:1px + border-color 배경 방식). 모바일은
   1열로 접혀 지금까지와 같은 세로 스택이 된다. */
.start-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
@media (max-width: 640px) {
  .start-list { grid-template-columns: 1fr; }
}
.start-item { background: var(--color-bg); }
.start-item a {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 28px);
  height: 100%;
  padding: clamp(30px, 4vw, 40px) clamp(24px, 3vw, 34px);
  transition: background-color 0.25s var(--ease-fluid), color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .start-item a:hover { background: var(--color-bg-alt); text-decoration: none; color: var(--color-accent-dark); }
  .start-item a:hover .start-arrow { transform: translate(3px, -3px); }
}
.start-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--color-accent); flex: 0 0 40px; }
.start-body { flex: 1; }
.start-body .micro-label { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--color-accent-dark); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 700; }
.start-body h3 { margin: 0 0 6px; }
.start-body p { color: var(--color-primary-soft); margin: 0; font-size: 15.5px; }
.start-arrow { font-family: var(--font-heading); font-size: 20px; flex-shrink: 0; color: var(--color-primary); transition: transform 0.25s var(--ease-fluid); }

/* -- 매직크림 어필 밴드 (신규, 상단부): 풀블리드 브랜드 스테이트먼트.
   아래쪽 PQ10 에디토리얼(성분/스펙 상세)과 겹치지 않도록, 여기서는
   짧고 인상적인 한 문장 + 최소 정보만 -- */
/* 배경 사진 + 패럴렉스(fixed-attachment) — .mid-parallax와 동일한 기법을
   상단부 어필 밴드에도 적용. 이미지는 --appeal-img 커스텀 프로퍼티로 주입. */
/* 풀블리드 — 넓은 PC 화면에서 가운데 좁은 띠로만 보이지 않도록 뷰포트
   끝까지 펼친다. 안쪽 텍스트는 각자 max-width로 읽기 좋은 폭을 유지한다. */
.appeal-band {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--section-gap);
  padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 32px);
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}
.appeal-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--appeal-img);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: saturate(0.9) contrast(1.02) brightness(0.75);
}
.appeal-band::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(38, 34, 32, 0.58);
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .appeal-band::before { background-attachment: scroll; }
}
.appeal-band > * { position: relative; z-index: 1; }
.appeal-band .section-eyebrow { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.45); }
.appeal-band .appeal-statement {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.3;
  color: var(--color-white);
  max-width: 760px;
  margin: 0 auto 20px;
}
.appeal-band .appeal-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  margin: 0 auto 36px;
}
.appeal-band .cta-button { background: var(--color-accent); border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .appeal-band .cta-button:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-primary); }
}

/* -- 기초 (type-grid) -- */
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
@media (max-width: 700px) { .type-grid { grid-template-columns: 1fr; } }
.type-card {
  background: var(--color-bg);
  padding: 36px 34px;
}
.type-card h3 { margin-bottom: 6px; }
.type-card .type-hint { font-size: 15.5px; color: var(--color-primary-soft); opacity: 0.85; margin-bottom: 22px; }
.type-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.type-list li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 2px;
  border-top: 1px solid var(--color-border);
  font-size: 16.5px; font-weight: 700;
  color: var(--color-primary);
  transition: padding-left 0.2s var(--ease-fluid);
}
@media (hover: hover) and (pointer: fine) {
  .type-list li a:hover { padding-left: 8px; text-decoration: none; color: var(--color-accent-dark); }
}
.type-list-body { display: flex; flex-direction: column; gap: 3px; }
.type-list-more { font-size: 12.5px; font-weight: 600; color: var(--color-accent-dark); opacity: 0.85; }
.type-list-more::after { content: ' →'; }

/* -- 부위별 마사지 (area-grid): 1개 큰 카드 + 2개 작은 카드 비대칭 -- */
.area-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--color-border); border: 1px solid var(--color-border); }
.area-grid .area-card:first-child { grid-row: 1 / 3; }
@media (max-width: 800px) { .area-grid { grid-template-columns: 1fr; grid-template-rows: none; } .area-grid .area-card:first-child { grid-row: auto; } }
.area-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
}
/* 1.3fr:1fr 컬럼 비율에서 오른쪽 두 칸(4:3 각각)의 합계 높이와 정확히
   맞아떨어지도록 계산한 비율 — grid stretch(aspect-ratio:auto)에 맡기면
   브라우저마다 높이가 어긋나 우측 하단에 빈 여백이 생겨 고정값으로 바꿨다. */
.area-grid .area-card:first-child { aspect-ratio: 13 / 15; }
@media (max-width: 800px) { .area-card, .area-grid .area-card:first-child { aspect-ratio: 16/10; } }
.area-card img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 0.6s var(--ease-fluid); }
@media (hover: hover) and (pointer: fine) {
  .area-card:hover img { transform: scale(1.05); }
}
.area-card .area-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 24px 22px;
  background: linear-gradient(to top, rgba(38,34,32,0.72), rgba(38,34,32,0));
  color: var(--color-white);
}
.area-card .area-caption .area-eyebrow { font-size: 12.5px; opacity: 0.9; display: block; margin-bottom: 6px; }
.area-card .area-caption .area-title { font-family: var(--font-heading); font-weight: 800; font-size: 25px; color: var(--color-white); }

/* -- 마사지 스타일 icon-row -- */
.icon-row { display: flex; gap: 1px; overflow-x: auto; background: var(--color-border); border: 1px solid var(--color-border); counter-reset: habit; }
.icon-item {
  flex: 1 1 140px;
  text-align: center;
  padding: 28px 14px 24px;
  background: var(--color-bg);
  color: var(--color-primary-soft);
}
.icon-item .icon-glyph {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent-dark);
}
.icon-item .icon-glyph::before { counter-increment: habit; content: counter(habit, decimal-leading-zero); }
.icon-item .icon-label { font-family: var(--font-heading); font-size: 15.5px; font-weight: 700; color: var(--color-primary); }
a.icon-item { transition: background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  a.icon-item:hover { background: var(--color-bg-alt); text-decoration: none; }
}

/* -- 홈케어/제품특징 step-flow: 세로 타임라인, 원형 대신 사각 넘버 배지 -- */
.step-flow { display: flex; flex-direction: column; gap: 0; position: relative; }
.step-flow::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--color-border);
}
.step-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: transparent;
  padding: 18px 0;
  color: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
}
.step-item:last-child { border-bottom: none; }
.step-item .step-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  white-space: nowrap;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.02em;
  border: 4px solid var(--color-bg);
}
.section-band-alt .step-item .step-num { border-color: var(--color-bg-alt); }
.step-item .step-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: var(--color-primary); margin: 8px 0 6px; }
.step-item .step-desc { font-size: 16px; margin: 0; }
a.step-item { transition: background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  a.step-item:hover { background: var(--color-bg-alt); text-decoration: none; }
}
@media (min-width: 640px) {
  .step-item { padding: 22px 4px; }
  .step-item .step-title { margin-top: 2px; }
}
.term-note {
  border: 1px solid var(--color-border);
  padding: 28px 30px;
  margin-top: 32px;
}
.term-note dt { font-family: var(--font-heading); font-weight: 800; color: var(--color-primary); margin-top: 16px; }
.term-note dt:first-child { margin-top: 0; }
.term-note dd { margin: 4px 0 0; font-size: 15.5px; }

/* -- 핵심 요약 tldr-box --
   모바일(<900px)에서는 content-page가 그리드가 아니라 단순 세로 스택이라
   본문 리드 문단을 사진/tldr-box보다 먼저 만나게 된다. 리드 문단이 h1 바로
   다음 첫 콘텐츠라 줄글 벽처럼 느껴져 이탈로 이어질 수 있어, 모바일에서는
   스캔하기 쉬운 tldr-box를 리드 문단보다 먼저 보여준다. */
.content-intro { display: flex; flex-direction: column; }
.content-intro > .intro-lede { order: 0; }
.content-intro > .tldr-box { order: 1; }
@media (max-width: 899px) {
  .content-intro > .tldr-box { order: -1; margin-bottom: 1.8em; }
}
.tldr-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: 28px 30px;
  margin: 0 0 2.2em;
  background: var(--color-white);
}
.tldr-box .tldr-title { display: block; font-size: 13px; color: var(--color-accent-dark); margin-bottom: 14px; }
.tldr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tldr-list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.7; color: var(--color-primary); margin: 0; font-weight: 500; }
.tldr-list li::before { content: '—'; color: var(--color-accent-dark); font-weight: 800; flex: none; }

/* -- body-points: 본문 중간의 긴 줄글 단락을 대체하는 불릿 목록.
   박스 배경 없이 본문 흐름 속에 바로 놓여, 짧은 도입 문장 뒤에 핵심을
   스캔하기 쉽게 나열한다 — 모바일에서 문단이 '벽'처럼 느껴지는 것을 방지 -- */
/* 에디토리얼 넘버 리스트 — type-grid/value-grid/area-grid와 같은 "테두리 격자(표)"
   반복을 피하려고 완전히 다른 언어를 쓴다: 박스/테두리 셀 없이, 옅은 대형 고스트
   숫자 + 헤어라인 가로 구분선만으로 리듬을 만드는 잡지 인덱스 스타일. */
.body-points {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  border-top: 1px solid var(--color-border);
  counter-reset: bodypoint;
}
.body-points li {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 28px);
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  counter-increment: bodypoint;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-primary-soft);
}
.body-points li::before {
  content: counter(bodypoint, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.32;
}
.body-points li strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* -- pull-quote: 본문 중 핵심 한 문장을 큰 활자로 뽑아내는 에디토리얼 인용구.
   그리드도 리스트도 아닌 세 번째 시각 언어 — 텍스트 밀도가 높은 구간 중간에
   숨 쉴 자리를 만들고 핵심 메시지를 시각적으로 강조한다. -- */
.pull-quote {
  margin: 1.8em 0;
  padding: 0.05em 0 0.05em 26px;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.5;
  color: var(--color-primary);
}

/* -- 관련 글 related-links -- */
.related-links { margin: 2.6em 0 0.4em; padding-top: 2.2em; border-top: 1px solid var(--color-border); }
.related-links .related-links-title { display: block; font-size: 13px; color: var(--color-accent-dark); margin-bottom: 16px; }
.related-links-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.related-links-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid var(--color-border);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-white);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.related-links-row a::after { content: '→'; color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .related-links-row a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
}

/* -- PQ10 에디토리얼 -- */
.pq10-editorial {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 800px) { .pq10-editorial { grid-template-columns: 1fr; } }
.pq10-editorial img { margin: 0; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pq10-editorial .pq10-copy p { font-size: 16.5px; }
.pq10-editorial .pq10-copy .cta-button { margin-top: 8px; }

.card-section.pq10-dark {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  border-top: none;
  background: var(--color-primary);
}
.card-section.pq10-dark .pq10-editorial {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 48px);
}
.card-section.pq10-dark .section-eyebrow { color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255,255,255,0.4); }
.card-section.pq10-dark h2 { color: var(--color-white); }
.card-section.pq10-dark .pq10-copy p { color: rgba(255, 255, 255, 0.82); }
.card-section.pq10-dark .cta-button { background: var(--color-accent); border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .card-section.pq10-dark .cta-button:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-primary); }
}

/* -- 가로 스크롤 티커 밴드 -- */
.ticker-band {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: clamp(28px, 4vw, 40px);
  overflow: hidden;
  background: var(--color-primary);
  padding: 15px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border-right: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* -- 클로징 CTA -- */
.closing-cta {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--section-gap);
  padding: clamp(96px, 13vw, 160px) 0;
  min-height: clamp(360px, 48vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-accent);
}
/* closing-cta는 <main> 안, footer는 밖이라 인접 형제 선택자로는 못 닿는다 —
   :has()로 "이 페이지에 closing-cta가 있으면"을 판별해 그 footer만 여백 없이 붙인다 */
body:has(.closing-cta) .site-footer { margin-top: 0; border-top: none; }
.closing-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--closing-img);
  background-size: cover;
  background-position: center 22%;
  filter: saturate(0.95) contrast(1.02) brightness(0.98);
}
.closing-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(214, 51, 91, 0.55) 0%, rgba(176, 34, 72, 0.6) 100%);
}
.closing-cta-copy { position: relative; z-index: 1; max-width: 640px; text-align: center; padding: 0 clamp(20px, 5vw, 48px); }
.closing-cta-copy .eyebrow {
  display: inline-block;
  font-size: 13.5px;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 7px;
  margin-bottom: 20px;
}
.closing-cta-copy h2 { color: var(--color-white); font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 0.5em; }
.closing-cta-copy p { color: rgba(255, 255, 255, 0.82); max-width: 460px; margin: 0 auto 28px; }
.closing-cta-copy .cta-button { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
@media (hover: hover) and (pointer: fine) {
  .closing-cta-copy .cta-button:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-primary); }
}

/* -- 최신 콘텐츠 (가로 스크롤) -- */
.latest-feed { display: flex; gap: 1px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; background: var(--color-border); border: 1px solid var(--color-border); }
.latest-item {
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: block;
  background: var(--color-bg);
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .latest-item:hover { opacity: 0.75; text-decoration: none; }
}
.latest-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0; }
.latest-title { display: block; padding: 14px 16px 18px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--color-primary); }

.faq-head { margin-bottom: 28px; }
.faq-head h2 { margin-bottom: 0; }

/* -- cursor-tilt 훅 -- */
.tilt-card { will-change: transform; }

:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(1) { transition-delay: 0s; }
:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(2) { transition-delay: 0.08s; }
:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(3) { transition-delay: 0.16s; }
:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(4) { transition-delay: 0.24s; }
:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(5) { transition-delay: 0.32s; }
:is(.rank-grid, .area-grid, .card-grid, .latest-feed, .icon-row, .step-flow, .value-grid) > .reveal:nth-child(n+6) { transition-delay: 0.4s; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.8s var(--ease-fluid), transform 0.8s var(--ease-fluid), filter 0.8s var(--ease-fluid);
}
.reveal.revealed { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
}

.pq10-editorial img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-fluid);
}
.reveal .pq10-editorial img { clip-path: inset(0 38% 0 0); }
.reveal.revealed .pq10-editorial img { clip-path: inset(0 0 0 0); }