/* ============================================================
   떼드영 · 홍차추천 — DESIGN SYSTEM
   REFERENCE: swc.weddialand.com (SC-011 ROMANTIC BLOOM) 구조/토큰 이식
   COLOR: White + Black-cherry Wine + Ink (blush 포지션 → wine 치환)
   TYPE : Cormorant Garamond(EN) + Montserrat(라벨) + Noto Sans KR(한글)
   RADIUS: 0 (커서 원형 요소만 50%) / SHADOW: 미사용(카드 오버레이 text-shadow 1건 제외)
   ============================================================ */

:root{
  --white:  #FFFFFF;
  --light:  #FAFAFA;
  --wine-l: #FBF2F1;
  --wine:   #8C3A46;
  --wine-d: #5C1F28;
  --wine-v: #B85D6B;
  --ink:    #0F0F0F;
  --gray:   #888888;
  --line:   rgba(15,15,15,.08);

  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Montserrat','Noto Sans KR',sans-serif;
  --fh:'Noto Sans KR','Montserrat',sans-serif;

  --px: clamp(1.5rem, 5vw, 2.5rem);
  --py: clamp(5rem, 10vw, 10rem);
  --mx: 1440px;

  --ease: cubic-bezier(.25,1,.5,1);
}
@media (max-width:768px){ :root{ --py: clamp(3.5rem, 9vw, 6rem); } }

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }
html{ scroll-behavior:smooth; font-size:18px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--fb); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; cursor:none;
  word-break:keep-all; overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--wine); color:var(--white); }

.w{ max-width:var(--mx); margin:0 auto; padding:0 var(--px); width:100%; }

/* 라벨/버튼류 wide-tracking은 라틴 대문자 전용. 한글 CTA는 가독성을 위해
   트래킹을 .08em로 낮춰 적용(스펙의 .4em 그대로 쓰면 한글이 깨져 보임). */
.tw-en{ font-family:var(--fb); text-transform:uppercase; letter-spacing:.4em; }
.tw-kr{ font-family:var(--fb); letter-spacing:.08em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fb); font-weight:500; font-size:.78rem;
  letter-spacing:.08em; padding-bottom:.3rem;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.btn .arrow{ color:var(--wine-v); }
.btn-fill{ background:var(--ink); color:var(--white); padding:1rem 1.75rem; }
.btn-fill .arrow{ color:var(--wine-v); }
.btn-fill:hover{ background:var(--wine); }
.btn-line{ border-bottom:1px solid var(--ink); color:var(--ink); }
.btn-line:hover{ color:var(--wine); border-color:var(--wine); }
.section--ink .btn-line{ border-color:var(--white); color:var(--white); }
.section--ink .btn-line:hover{ color:var(--wine-v); border-color:var(--wine-v); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; background:var(--wine);
  border-radius:50%; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); transition:transform .15s ease;
}
.cursor-outline{
  position:fixed; top:0; left:0; width:40px; height:40px;
  border:1px solid rgba(140,58,70,.5); border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background-color .2s,border-color .2s;
}
.cursor-outline.hov{ width:60px; height:60px; background:rgba(140,58,70,.15); border-color:transparent; }
@media (max-width:768px){ .cursor-dot,.cursor-outline{ display:none; } body{ cursor:auto; } }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--px); color:var(--white); mix-blend-mode:difference;
  pointer-events:none;
}
.hdr > *{ pointer-events:auto; }
.hdr-logo{ font-size:11px; text-transform:uppercase; letter-spacing:.4em; font-family:var(--fb); }
.hdr-cta{
  display:flex; align-items:center; gap:.55rem;
  font-size:11px; text-transform:uppercase; letter-spacing:.2em; font-family:var(--fb);
  border-bottom:1px solid currentColor; padding-bottom:.25rem; transition:color .2s;
}
.hdr-cta .dot{ width:6px; height:6px; border-radius:50%; background:var(--wine); }
.hdr-cta:hover{ color:var(--wine-v); }
@media (max-width:768px){
  .hdr{
    mix-blend-mode:normal; color:var(--ink); background:rgba(255,255,255,.92);
    backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
    padding:.875rem var(--px);
  }
}

/* ============================================================
   HERO — 홈: 풀블리드 이미지 + 화이트 그라데이션 오버레이 + 초대형 국문 타이틀
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:6rem; padding-bottom:clamp(7.5rem,13vw,9.5rem); overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  /* 홍차 사진이 또렷하고 먹음직스럽게 보이도록 grayscale/저채도 워시 대신 채도·대비만 살짝 올림 */
  filter:saturate(1.2) contrast(1.05) brightness(1.02);
  transition:filter 1s var(--ease);
  /* 완전히 정지된 화면이 아니라 아주 느린 호흡(줌 인/아웃)으로 은은한 생동감만 부여 */
  animation:hero-breathe 26s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes hero-breathe{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce){ .hero-bg img{ animation:none; } }
.hero-bg::before{
  content:''; position:absolute; inset:0;
  /* 텍스트가 앉는 좌측 구간에만 스크림을 주고, 사진 대부분(우측)은 그대로 노출 */
  background:linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 60%);
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  /* 텍스트가 하단에 앉으므로 하단 스크림을 더 진하고 넓게 */
  background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.4) 68%, rgba(255,255,255,.78) 100%);
}
.hero-in{ position:relative; z-index:1; width:100%; }
.hero-kicker{
  display:block; font-size:10px; color:var(--wine); text-transform:uppercase;
  letter-spacing:.4em; font-family:var(--fb); margin-bottom:1.5rem;
  text-shadow:0 2px 16px rgba(255,255,255,.7);
}
.hero-h1{
  font-family:var(--fh); font-weight:200; color:var(--ink);
  font-size:clamp(2.6rem,7.5vw,7.2rem); line-height:.98; margin:0;
  text-shadow:0 4px 28px rgba(255,255,255,.85);
}
.hero-h1-seo{ position:absolute; left:-99999px; }
.hero-sub{
  font-family:var(--fh); font-weight:300; color:var(--gray); max-width:22rem; margin-top:1.5rem;
  text-shadow:0 2px 16px rgba(255,255,255,.75);
}
.hero-meta{ position:absolute; left:var(--px); bottom:2rem; z-index:2; display:flex; align-items:center; gap:1rem; }
.hero-meta .lbl{ writing-mode:vertical-rl; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gray); font-family:var(--fb); }
.hero-meta .ln{ width:1px; height:64px; background:var(--line); }
.hero-actions{ position:absolute; right:var(--px); bottom:2rem; z-index:2; display:flex; flex-direction:column; gap:1rem; align-items:flex-end; }

/* ---------- 모바일: 사진 위 오버레이 대신, 사진(위) + 텍스트(아래) 스택 구조로 전환 ---------- */
@media (max-width:768px){
  .hero{ display:block; min-height:auto; overflow:visible; padding:5rem 0 0; }
  .hero-bg{
    position:relative; inset:auto; height:auto; aspect-ratio:4/5;
  }
  .hero-bg img{ animation-duration:20s; }
  /* 텍스트가 사진 아래 일반 배경(흰색)으로 내려가므로 사진 위 스크림 불필요 */
  .hero-bg::before,.hero-bg::after{ content:none; }
  .hero-in{ padding:2.2rem var(--px) 0; }
  .hero-kicker,.hero-h1,.hero-sub{ text-shadow:none; }
  .hero-h1{ font-size:clamp(2.4rem,11vw,4.6rem); }
  .hero-meta{ display:none; }
  .hero-actions{
    position:static; flex-direction:row; flex-wrap:wrap; gap:1.4rem;
    padding:2rem var(--px) 3rem; margin-top:1.5rem; align-items:center;
  }
}

/* ---------- HERO 베리에이션 B: 세부페이지 (풀블리드 상품컷 + 오프셋 배지) ---------- */
.hero-b{ min-height:86svh; padding:7rem var(--px) 4rem; }
/* 세로로 긴 제품컷이 대부분이라 16/8.6 와이드 배너는 크롭이 너무 심함 → 4/3로 완화 */
.hero-b-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; }
.hero-b-media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
@media (max-width:768px){ .hero-b-media{ aspect-ratio:3/4; } }
/* 브랜드 스틸라이프처럼 원본이 이미 와이드 파노라마(1400x420)인 경우 전용 비율 */
@media (min-width:769px){ .hero-b-media--wide{ aspect-ratio:10/3; } }
.hero-b-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,0) 62%, rgba(15,15,15,.55) 100%); }
/* 배지가 사진을 너무 많이 가리지 않도록 겹침을 최소화 */
.hero-b-copy{ position:relative; z-index:3; margin-top:-3.5rem; }
.hero-b-badge{ display:inline-block; background:var(--white); padding:2.2rem clamp(1.5rem,4vw,3rem); max-width:40rem; }
.hero-b-h1{ font-family:var(--fh); font-weight:400; font-size:clamp(2.6rem,5.6vw,4.2rem); line-height:1.08; color:var(--ink); margin-bottom:.9rem; }
.hero-b-sub{ font-size:1.02rem; color:var(--gray); }
.hero-b-badge .btn{ margin-top:1.6rem; }
@media (max-width:768px){ .hero-b-copy{ margin-top:-3.5rem; } .hero-b-badge{ padding:1.6rem 1.4rem; } }

/* ---------- HERO 베리에이션 C: 사업자정보 페이지 (다크 반전) ---------- */
.hero-c{ min-height:60svh; padding:9rem var(--px) 3rem; position:relative; display:flex; align-items:flex-end; background:var(--ink); color:var(--white); }
.hero-c-img{ position:absolute; inset:0; }
.hero-c-img img{ width:100%; height:100%; object-fit:cover; opacity:.34; filter:grayscale(45%); }
.hero-c-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.35), rgba(15,15,15,.92)); }
.hero-c-copy{ position:relative; z-index:2; padding-bottom:2rem; }
.hero-c-h1{ font-family:var(--fh); font-weight:400; font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.06; margin-bottom:1rem; }
.hero-c-copy .btn{ margin-top:1.8rem; }
/* 히어로 배경이 ink이므로 .btn-fill의 기본 ink 배경은 묻혀 보임 → wine으로, .btn-line도 흰색 보더로 반전 */
.hero-c .btn-fill{ background:var(--wine); }
.hero-c .btn-fill:hover{ background:var(--wine-d); }
.hero-c .btn-line{ border-color:var(--white); color:var(--white); }
.hero-c .btn-line:hover{ color:var(--wine-v); border-color:var(--wine-v); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--wine); overflow:hidden; white-space:nowrap; padding:1rem 0; }
.marquee-track{ display:inline-block; animation:marquee 32s linear infinite; }
@media (max-width:768px){ .marquee-track{ animation-duration:42s; } }
.marquee-track span{ display:inline-block; font-family:var(--fd); font-style:italic; font-size:1.1rem; color:var(--white); padding:0 2rem; }
@keyframes marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }

/* ============================================================
   SECTION — 공통
   ============================================================ */
.section{ padding:var(--py) 0; }
.section--alt{ background:var(--wine-l); }
.section--light{ background:var(--light); }
.section--ink{ background:var(--ink); color:var(--white); }

/* ============================================================
   PHILOSOPHY — Asymmetric Split (id="about")
   ============================================================ */
.phil-grid{ display:block; }
@media (min-width:900px){ .phil-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:2.5rem; align-items:end; } }
.phil-l{}
@media (min-width:900px){ .phil-l{ grid-column: span 4; } }
.phil-label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.4em; color:var(--wine); font-family:var(--fb); margin-bottom:1.6rem; }
.phil-p{ font-family:var(--fh); color:var(--ink); line-height:1.95; }
.phil-p + .phil-p{ margin-top:1.2rem; }
.lead{ font-family:var(--fh); color:var(--gray); font-size:1.05rem; line-height:1.85; max-width:32rem; }
.section--ink .lead, .hero-c .lead{ color:rgba(255,255,255,.75); }
.phil-r{ margin-top:5rem; }
@media (min-width:900px){ .phil-r{ grid-column: 6/13; margin-top:0; } }
.phil-kicker{ font-size:10px; text-transform:uppercase; letter-spacing:.3em; color:var(--gray); font-family:var(--fb); }
.phil-h2{ font-family:var(--fd); font-style:italic; font-weight:400; font-size:clamp(1.9rem,3.4vw,3.1rem); color:var(--ink); margin:1rem 0 2.5rem; }
.phil-img{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.phil-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(55%); transition:filter 1s var(--ease), transform 1.2s var(--ease); }
.phil-img::after{ content:''; position:absolute; inset:0; background:var(--wine); mix-blend-mode:overlay; opacity:.2; transition:opacity 1s var(--ease); }
.phil-img:hover img{ filter:grayscale(0%); transform:scale(1.05); }
.phil-img:hover::after{ opacity:.05; }

/* ============================================================
   PROGRAMS — 카드 그리드 (id="services")
   ============================================================ */
.prog-head{ margin-bottom:5rem; }
@media (min-width:900px){ .prog-head{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; gap:2rem; } }
.prog-grid{ border-top:1px solid var(--ink); padding-top:4rem; display:grid; grid-template-columns:1fr; gap:5rem 2.5rem; }
@media (min-width:900px){ .prog-grid{ grid-template-columns:repeat(3,1fr); gap:5rem 3rem; } }
.prog-card-num{ display:block; font-family:var(--fd); font-style:italic; font-size:1.5rem; color:var(--wine); margin-bottom:1rem; }
.prog-card-img-wrap{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--wine-l); margin-bottom:2rem; }
@media (max-width:768px){ .prog-card-img-wrap{ margin-bottom:1.1rem; } }
.prog-card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.prog-card:hover .prog-card-img-wrap img{ transform:scale(1.04); }
.prog-card-overlay-title{ position:absolute; left:1.25rem; bottom:1.25rem; color:var(--white); font-family:var(--fd); font-style:italic; font-size:1.5rem; text-shadow:0 10px 30px rgba(0,0,0,.18); }
.prog-card-meta{ padding-bottom:1rem; margin-bottom:1.75rem; border-bottom:1px solid var(--line); }
.prog-card-h3-kr{ font-family:var(--fh); font-weight:400; font-size:1.3rem; color:var(--ink); transition:color .2s; }
.prog-card:hover .prog-card-h3-kr{ color:var(--wine); }
.prog-card-sub{ font-size:.82rem; color:var(--gray); margin-top:.4rem; }
.prog-card-list{ padding-left:1rem; margin-bottom:2rem; color:var(--gray); font-size:.9rem; line-height:2; list-style:disc; }
.prog-card-cta{ display:inline-block; border-bottom:1px solid var(--ink); color:var(--ink); font-size:10px; text-transform:uppercase; letter-spacing:.2em; font-family:var(--fb); padding-bottom:.3rem; transition:color .2s,border-color .2s; }
.prog-card:hover .prog-card-cta{ color:var(--wine); border-color:var(--wine); }

/* ============================================================
   AUTHORITY — 통계 그리드
   ============================================================ */
.auth{ background:var(--wine-l); }
.auth-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem 2rem; }
@media (min-width:900px){ .auth-grid{ grid-template-columns:repeat(4,1fr); } }
.auth-num{ font-family:var(--fd); font-style:italic; font-size:clamp(2.4rem,5vw,3.8rem); color:var(--wine); line-height:1; }
.auth-label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--gray); font-family:var(--fb); margin-top:.9rem; }

/* ============================================================
   INFO — Access 패턴 재구성 (구매/스펙 안내 2단)
   ============================================================ */
.info-grid{ display:grid; grid-template-columns:1fr; gap:4rem; }
@media (min-width:900px){ .info-grid{ grid-template-columns:1.1fr 1fr; gap:6rem; align-items:center; } }
.info-h2{ font-family:var(--fd); font-style:italic; font-weight:400; font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:2.4rem; }
.info-row{ display:grid; grid-template-columns:1fr; padding:1rem 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .info-row{ grid-template-columns:120px 1fr; padding:1.25rem 0; } }
.info-row dt{ font-family:var(--fb); font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--gray); }
.info-row dd{ font-family:var(--fh); color:var(--ink); margin:.4rem 0 0; }
@media (min-width:900px){ .info-row dd{ margin:0; } }
.info-img{ aspect-ratio:4/5; overflow:hidden; filter:grayscale(20%); }
.info-img img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   FAQ — 아코디언
   ============================================================ */
.faq{ background:var(--light); }
.faq-head{ margin-bottom:4rem; text-align:center; }
.faq-list{ max-width:44rem; margin:0 auto; }
.faq-it{ border-bottom:1px solid var(--line); padding:1.5rem 0; }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; font-family:var(--fh); font-weight:400; font-size:1.05rem; color:var(--ink); }
.faq-q .plus{ font-family:var(--fd); font-size:1.4rem; color:var(--wine); transition:transform .3s var(--ease); flex:none; }
.faq-it.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease), padding .35s var(--ease); }
.faq-it.open .faq-a{ max-height:600px; padding-top:1.25rem; }
.faq-a p{ color:var(--gray); }

/* ============================================================
   CTA — 다크 반전 2단
   ============================================================ */
.cta{ background:var(--ink); color:var(--white); }
.cta-grid{ display:grid; grid-template-columns:1fr; gap:4rem; }
@media (min-width:900px){ .cta-grid{ grid-template-columns:1fr 1fr; align-items:end; } }
.cta-h2{ font-family:var(--fd); font-style:italic; font-weight:400; font-size:clamp(2.1rem,4.5vw,3.5rem); line-height:1.18; margin-bottom:2rem; }
.cta-btn{ display:inline-block; border-bottom:1px solid var(--wine); color:var(--white); font-family:var(--fb); font-size:10px; text-transform:uppercase; letter-spacing:.2em; padding-bottom:.3rem; transition:color .2s; }
.cta-btn:hover{ color:var(--wine-v); }
.cta-info{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:900px){ .cta-info{ grid-template-columns:repeat(2,1fr); } }
.cta-info-cell dt{ font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.5); font-family:var(--fb); margin-bottom:.6rem; }
.cta-info-cell dd{ font-family:var(--fh); font-size:1.05rem; margin:0; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ background:var(--ink); color:var(--white); padding:3rem 0 2rem; }
.ft-brand{ font-family:var(--fd); font-weight:400; font-size:clamp(2.5rem,10vw,9rem); opacity:.9; white-space:nowrap; }
@media (max-width:768px){ .ft-brand{ white-space:normal; font-size:clamp(2rem,9vw,3.5rem); } }
.ft-nav{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.4rem; }
.ft-col h4{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--wine-v); font-family:var(--fb); margin-bottom:1rem; }
.ft-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.ft-col a{ font-size:.92rem; color:rgba(255,255,255,.82); font-family:var(--fh); }
.ft-col a:hover{ color:var(--wine-v); }
.ft-biz{ font-size:.85rem; line-height:2; color:rgba(255,255,255,.65); font-family:var(--fh); margin-top:1.2rem; }
.ft-meta{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; margin-top:3rem; display:flex; flex-direction:column; gap:1rem; }
@media (min-width:900px){ .ft-meta{ flex-direction:row; justify-content:space-between; } }
.ft-legal{ font-size:9px; letter-spacing:.04em; color:rgba(255,255,255,.55); }
.ft-copy{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* ============================================================
   SECTION BANNER — 텍스트 위주 섹션 상단에 놓는 풀와이드 이미지
   ============================================================ */
.section-banner{ aspect-ratio:3/2; overflow:hidden; margin-bottom:2.2rem; }
.section-banner img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:768px){ .section-banner{ aspect-ratio:4/3; } }

/* ============================================================
   DETAIL PAGE — 제품 상세 블록
   ============================================================ */
.detail-block{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .detail-block{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); } }
.detail-block.is-reverse{ direction:rtl; }
.detail-block.is-reverse > *{ direction:ltr; }
.detail-media{ overflow:hidden; }
.detail-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
/* 가로 사진(예: christmas-teacup-silverpot 1000x741)을 4/5 세로 비율로 크롭하면 모바일 1열 레이아웃에서
   피사체가 대부분 잘려 안 보이는 문제가 있어, 모바일에서는 크롭 없이 원본 비율 그대로 노출 */
@media (max-width:768px){ .detail-media img{ aspect-ratio:auto; height:auto; } }
.detail-copy h2{ font-family:var(--fd); font-style:italic; font-weight:400; font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:1rem; color:var(--ink); }
.detail-copy p{ color:var(--gray); font-family:var(--fh); }
.detail-copy p + p{ margin-top:1rem; }

.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
.tag{ font-size:.78rem; font-family:var(--fb); letter-spacing:.04em; padding:.5rem 1rem; border:1px solid var(--wine); color:var(--wine); }

.spec-grid{ border-top:1px solid var(--ink); margin-top:1.5rem; }
.spec-row{ display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.spec-row dt{ font-weight:500; color:var(--ink); font-size:.9rem; font-family:var(--fb); }
.spec-row dd{ margin:0; color:var(--gray); font-family:var(--fh); }

.callout{ border-left:2px solid var(--wine); background:var(--wine-l); padding:1.5rem 1.7rem; margin-top:1.5rem; }
.callout p{ margin:0; color:var(--ink-soft,var(--gray)); }

/* COST TABLE — 비용/스펙 비교표 (AEO: <table> 명시 요구) */
.cost-table{ width:100%; border-collapse:collapse; margin-top:1.5rem; font-family:var(--fh); font-size:.92rem; }
.cost-table caption{ text-align:left; font-family:var(--fb); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-bottom:.8rem; }
.cost-table th, .cost-table td{ border-bottom:1px solid var(--line); padding:.85rem 1rem; text-align:left; }
.cost-table thead th{ border-bottom:1px solid var(--ink); font-family:var(--fb); font-weight:500; font-size:.78rem; letter-spacing:.04em; color:var(--ink); }
.cost-table tbody th{ font-weight:500; color:var(--ink); white-space:nowrap; }
.cost-table td{ color:var(--gray); }
.cost-table tbody tr.is-brand td, .cost-table tbody tr.is-brand th{ color:var(--wine); font-weight:500; }
@media (max-width:640px){ .cost-table{ font-size:.82rem; } .cost-table th, .cost-table td{ padding:.65rem .6rem; } }
.callout strong{ color:var(--ink); font-family:var(--fb); }

.answer-block{ background:var(--light); padding:clamp(1.6rem,3vw,2.4rem); margin-top:-3.2rem; position:relative; z-index:2; }
.answer-block p{ font-size:1.05rem; color:var(--ink); font-family:var(--fh); }

/* ============================================================
   COMPARE — 브랜드/취향 비교 리스트 (세부 키워드 페이지용)
   ============================================================ */
.compare{ border-top:1px solid var(--ink); margin-top:2rem; }
.compare-row{ display:grid; grid-template-columns:1fr; gap:.4rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
@media (min-width:700px){ .compare-row{ grid-template-columns:11rem 1fr; gap:1.6rem; align-items:baseline; } }
.compare-row dt{ font-family:var(--fd); font-style:italic; font-size:1.15rem; color:var(--wine); }
.compare-row dd{ margin:0; color:var(--gray); font-family:var(--fh); line-height:1.85; }
.compare-row.is-brand{ background:var(--wine-l); }
.compare-row.is-brand dt{ color:var(--ink); font-family:var(--fh); font-style:normal; font-weight:500; }
.compare-row.is-brand dd{ color:var(--ink); }

/* ============================================================
   STEPS — 번호 매긴 순차 리스트 (우리는 법·페어링 등)
   ============================================================ */
.steps{ counter-reset:step; margin-top:2rem; }
.step{ position:relative; display:grid; grid-template-columns:3rem 1fr; gap:1.4rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step-num{
  counter-increment:step; font-family:var(--fd); font-style:italic; font-size:1.3rem; color:var(--wine);
  width:3rem; height:3rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--wine);
}
.step-num::before{ content:counter(step); }
.step-body h3{ font-family:var(--fh); font-weight:500; font-size:1.05rem; margin-bottom:.4rem; color:var(--ink); }
.step-body p{ color:var(--gray); font-family:var(--fh); line-height:1.8; margin:0; }

/* ============================================================
   QUOTE — 풀 인용구 (편집형 강조 블록)
   ============================================================ */
.quote{ position:relative; padding:.5rem 0 .5rem 2.2rem; margin:2.4rem 0; border-left:2px solid var(--wine); }
.quote p{
  font-family:var(--fd); font-style:italic; font-weight:400; color:var(--ink);
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.5; margin:0;
}
.quote cite{ display:block; margin-top:.9rem; font-style:normal; font-family:var(--fb); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gray); }

/* ============================================================
   INTERNAL LINK GRID
   ============================================================ */
.linkgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
@media (max-width:768px){ .linkgrid{ grid-template-columns:1fr; } }
.card6-grid{ display:grid; grid-template-columns:1fr; gap:1.4rem; }
@media (min-width:640px){ .card6-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .card6-grid{ grid-template-columns:repeat(3,1fr); } }
.linkcard{ display:flex; flex-direction:column; background:var(--light); overflow:hidden; transition:opacity .2s var(--ease); }
.linkcard:hover{ opacity:.85; }
.linkcard-img{ aspect-ratio:4/3; overflow:hidden; }
.linkcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.linkcard:hover .linkcard-img img{ transform:scale(1.04); }
.linkcard-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.linkcard-body h3{ font-family:var(--fh); font-weight:400; font-size:1.1rem; }
.linkcard-body p{ color:var(--gray); font-size:.9rem; line-height:1.6; font-family:var(--fh); }
.linkcard-highlight{ background:var(--wine); color:var(--white); }
.linkcard-highlight .linkcard-body h3{ color:var(--white); }
.linkcard-highlight .linkcard-body p{ color:rgba(255,255,255,.78); }

/* ============================================================
   REVEAL (JS: adds .is-in)
   ============================================================ */
[data-reveal]{ opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal="up"]{ transform:translateY(2.2rem); }
[data-reveal="left"]{ transform:translateX(-2.2rem); }
[data-reveal="right"]{ transform:translateX(2.2rem); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-stagger] > *{ transition-delay:calc(var(--i,0) * 100ms); }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  .bento-item img, .linkcard-img img, .prog-card-img-wrap img, .phil-img img{ transition:none!important; }
}