/* ============================================================
   ROSA n VALLEY — 농업회사법인 로사앤밸리(주)
   Damask Rose / Pyeongchang
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* 사진이 색을 내고, 화면은 따뜻한 무채색으로 받친다 */
  --rose:#8C6B72;
  --rose-deep:#1D1B18;
  --rose-dark:#000000;
  --rose-100:#F4F2ED;
  --rose-200:#EBE7DF;
  --rose-300:#DAD4C9;
  --leaf:#5A5C50;
  --leaf-soft:#F1F1EC;
  --ink:#1D1B18;
  --ink-2:#3A3733;
  --muted:#726E66;
  --muted-2:#9C978D;
  --line:#E4E0D7;
  --line-2:#D5D0C5;
  --bg:#FFFFFF;
  --bg-2:#F4F2ED;
  --shadow-sm:0 1px 2px rgba(27,24,25,.05), 0 6px 18px rgba(27,24,25,.05);
  --shadow-md:0 2px 6px rgba(27,24,25,.06), 0 18px 44px rgba(27,24,25,.09);
  --display:'Playfair Display', 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  --script:'Parisienne', 'Playfair Display', cursive;
  --serif:'Playfair Display', 'Noto Serif KR', serif;
  --sans:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wrap:1200px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; border:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; font-weight:500; letter-spacing:-.01em; line-height:1.3}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap-lg{max-width:1440px}
.wrap-sm{max-width:900px}
.section{padding:132px 0}
.section--tight{padding:78px 0}
.section--tint{background:var(--bg-2)}
.section--rose{background:var(--rose-100)}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--script); font-size:27px; font-weight:400; font-style:normal;
  letter-spacing:.01em; color:var(--muted-2); text-transform:lowercase; margin-bottom:2px; line-height:1;
}
.shead{font-family:var(--display); font-weight:400; font-size:clamp(27px,3.1vw,40px); line-height:1.34; letter-spacing:.02em; text-transform:uppercase}
.shead em{font-style:normal; font-weight:400; color:var(--muted); display:block}
.slead{margin-top:20px; color:var(--muted); font-size:15.5px; line-height:1.95; max-width:620px}
.sec-head{margin-bottom:64px}
.sec-head--center{text-align:center}
.sec-head--center .slead{margin-left:auto; margin-right:auto}
.rule{display:none}
.sec-head--center .rule{margin-left:auto; margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:54px; padding:0 40px; border-radius:0;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:all .3s var(--ease); border:1px solid transparent;
}
.btn svg{width:16px;height:16px;stroke-width:1.7;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:#000}
.btn--outline{border-color:var(--ink); color:var(--ink)}
.btn--outline:hover{background:var(--ink); color:#fff}
.btn--ghost-light{border-color:rgba(255,255,255,.55); color:#fff}
.btn--ghost-light:hover{background:#fff; color:var(--rose-deep); border-color:#fff}
.btn--sm{height:44px; padding:0 24px; font-size:11.5px}
.btn--lg{height:60px; padding:0 48px; font-size:13px}
.btn--block{width:100%}
.textlink{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--rose-deep); border-bottom:1px solid var(--rose-300); padding-bottom:3px; transition:.25s var(--ease)}
.textlink:hover{border-color:var(--rose-deep); gap:11px}

/* ---------- 이모지 아이콘 ---------- */
.emo{
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
  font-style:normal; font-weight:400; line-height:1; display:inline-block;
  letter-spacing:normal; -webkit-font-smoothing:auto;
}
.btn .emo{font-size:14px; transition:transform .3s var(--ease)}
.btn:hover .emo{transform:translateX(3px)}
.vcard__ico .emo{font-size:28px}
.process__dot .emo{font-size:28px}
.contact-list .ci .emo{font-size:17px}
.icon-btn .emo{font-size:18px}
.floaters .emo{font-size:20px}
.lang .emo{font-size:15px; transition:transform .25s var(--ease)}
.lang:hover .emo{transform:rotate(-18deg)}
.textlink .emo{font-size:13px}

/* ============================================================
   Header
   ============================================================ */
.topbar{
  background:var(--bg-2); color:var(--muted); font-size:12px; letter-spacing:.02em;
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:36px; gap:16px}
.topbar__msg{opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar__links{display:flex; align-items:center; gap:18px; flex:none}
.topbar__links a{color:var(--ink-2); transition:color .2s}
.topbar__links a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

.topbar .wrap, .site-header .wrap{max-width:1400px}
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.site-header.is-stuck{box-shadow:0 1px 20px rgba(27,24,25,.07)}
.nav{display:flex; align-items:center; gap:26px; height:var(--nav-h)}
.brand{display:flex; align-items:center; flex:none; margin-right:6px}
.brand img{height:34px; width:auto}
.nav__menu{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav__menu > li{flex:none}
.nav__menu > li > a{
  display:block; padding:0 13px; line-height:var(--nav-h); font-size:15px; font-weight:600;
  color:var(--ink-2); position:relative; transition:color .25s; white-space:nowrap;
}
.nav__menu > li > a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:22px; height:1.5px;
  background:var(--rose); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__menu > li > a:hover, .nav__menu > li.is-active > a{color:var(--rose-deep)}
.nav__menu > li > a:hover::after, .nav__menu > li.is-active > a::after{transform:scaleX(1)}
.nav__util{display:flex; align-items:center; gap:10px; flex:none; margin-left:14px}
/* 언어 전환 — 누르면 반대 언어로 바뀌는 버튼 하나 */
.lang{
  display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 4px;
  border:0; border-radius:0;
  font-size:13px; font-weight:700; letter-spacing:.05em; color:var(--ink-2);
  transition:.25s var(--ease);
}
.lang svg{width:16px; height:16px; color:var(--rose); transition:.25s var(--ease)}
.lang:hover{color:var(--rose-deep)}
.lang:hover svg{transform:rotate(-18deg)}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; color:var(--ink-2); transition:.25s; position:relative}
.icon-btn:hover{color:var(--ink)}
.icon-btn svg{width:19px; height:19px; stroke-width:1.5}
.icon-btn__badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--rose); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
.nav__cta{display:inline-flex}
.nav__toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav__toggle span{display:block; width:22px; height:1.6px; background:var(--ink); transition:.3s var(--ease)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative; min-height:clamp(560px,84vh,800px); display:flex; align-items:center; overflow:hidden; background:#26241f}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; animation:heroZoom 16s var(--ease) forwards}
@keyframes heroZoom{from{transform:scale(1.1)} to{transform:scale(1)}}
.hero__inner::before{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,92%); height:118%; background:radial-gradient(ellipse at center, rgba(22,20,18,.42) 0%, rgba(22,20,18,.22) 55%, transparent 78%); z-index:-1; pointer-events:none}
.hero__media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,24,21,.46) 0%, rgba(26,24,21,.40) 40%, rgba(26,24,21,.62) 100%)}
.hero__inner{position:relative; z-index:2; color:#fff; padding:60px 0; text-align:center; isolation:isolate}
.hero__eyebrow{font-family:var(--script); font-size:30px; font-weight:400; letter-spacing:.01em; text-transform:none; color:rgba(255,255,255,.88); margin-bottom:6px; line-height:1}
.hero h1{font-family:var(--display); font-size:clamp(30px,4.4vw,56px); line-height:1.24; letter-spacing:.04em; font-weight:400; text-transform:uppercase; text-shadow:0 2px 34px rgba(0,0,0,.22)}
.hero h1 em{display:block; font-style:normal; font-weight:400; font-size:.78em; color:rgba(255,255,255,.82); margin-top:8px; letter-spacing:.05em}
.hero__text{margin:26px auto 0; max-width:540px; font-size:15px; line-height:1.95; color:rgba(255,255,255,.92); text-shadow:0 1px 16px rgba(0,0,0,.45)}
.hero__actions{margin-top:40px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.hero__scroll{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
.hero__scroll i{display:block; width:1px; height:40px; background:linear-gradient(to bottom, rgba(255,255,255,.7), transparent); animation:scrollLine 2s infinite}
@keyframes scrollLine{0%{opacity:0; transform:scaleY(.3)}40%{opacity:1}100%{opacity:0; transform:scaleY(1)}}

/* Page hero (sub pages) */
.phero{position:relative; height:360px; display:flex; align-items:center; background:#26241f; overflow:hidden}
.phero__media{position:absolute; inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.phero__media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(28,26,23,.36), rgba(28,26,23,.52))}
.phero__inner{position:relative; z-index:2; color:#fff}
.phero__eyebrow{font-family:var(--script); font-size:26px; font-weight:400; letter-spacing:.01em; text-transform:none; color:rgba(255,255,255,.86); margin-bottom:2px; line-height:1}
.phero h1{font-family:var(--display); font-weight:400; font-size:clamp(26px,3.2vw,38px); letter-spacing:.05em; text-transform:uppercase}
.phero p{margin-top:12px; color:rgba(255,255,255,.85); font-size:16px; max-width:620px}

/* Breadcrumb */
.crumb{border-bottom:1px solid var(--line); background:#fff}
.crumb ol{display:flex; align-items:center; gap:9px; height:52px; font-size:13px; color:var(--muted-2); flex-wrap:wrap}
.crumb li::after{content:'/'; margin-left:9px; color:var(--line-2)}
.crumb li:last-child{color:var(--ink-2); font-weight:600}
.crumb li:last-child::after{display:none}

/* ============================================================
   Feature / value cards
   ============================================================ */
.grid{display:grid; gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.vcard{padding:8px 22px 8px 0; background:none; border:0; transition:.35s var(--ease)}
.vcard:hover{transform:translateY(-3px)}
.vcard:hover .vcard__ico{color:var(--rose-deep)}
/* 아이콘이 있는 카드는 아이콘을 글 왼쪽에 둔다 */
.vcard:has(.vcard__ico){display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:20px; align-items:start}
.vcard__ico{grid-row:1 / 3; display:flex; align-items:flex-start; justify-content:center; color:var(--rose); padding-top:2px}
.vcard__ico svg{width:44px; height:44px; stroke-width:1.05}
.vcard h3{font-family:var(--display); font-weight:400; font-size:18px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px}
.vcard p{color:var(--muted); font-size:15px; line-height:1.8}
.vcard__num{font-size:12px; font-weight:700; color:var(--rose); letter-spacing:.16em; margin-bottom:14px}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:none; border:0}
.stat{background:none; padding:30px 26px; text-align:center; position:relative}
.stat + .stat::before{content:''; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--line-2); opacity:.7}
.stat__v{font-family:var(--sans); font-size:clamp(32px,3.6vw,44px); font-weight:600; letter-spacing:-.035em; color:var(--rose-deep); line-height:1.1; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1}
.stat__v small{font-size:.46em; font-weight:600; margin-left:2px; letter-spacing:-.02em; color:var(--rose)}
.stat__l{margin-top:10px; font-size:14px; color:var(--muted); letter-spacing:-.01em}

/* Split (image + text) */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0}
.split__media .tag{
  position:absolute; left:20px; bottom:18px; background:none; padding:0; border-radius:0;
  font-size:12px; font-weight:700; color:#fff; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4);
}
.split__body h2{font-family:var(--display); font-weight:400; font-size:clamp(25px,2.8vw,34px); line-height:1.38; letter-spacing:.04em; text-transform:uppercase}
.split__body .slead{max-width:none}
.deflist{margin-top:30px; border-top:1px solid var(--line)}
.deflist div{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px}
.deflist dt{font-weight:600; color:var(--ink-2)}
.deflist dd{margin:0; color:var(--muted)}

/* ============================================================
   Process (재배 → 공급)
   ============================================================ */
.process{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; counter-reset:step}
.process__item{position:relative; padding:0 18px; text-align:center}
.process__item::before{
  content:''; position:absolute; top:26px; left:calc(-50% + 48px); width:calc(100% - 96px); height:1px;
  background:var(--rose-300); opacity:.5;
}
.process__item:first-child::before{display:none}
.process__dot{
  position:relative; z-index:1; width:52px; height:52px; margin:0 auto 20px;
  color:var(--rose); display:flex; align-items:center; justify-content:center;
  transition:.35s var(--ease);
}
.process__dot svg{width:46px; height:46px; stroke-width:1.05}
.process__item:hover .process__dot{color:var(--rose-deep); transform:translateY(-4px)}
.process__step{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--rose); text-transform:uppercase; font-variant-numeric:lining-nums}
.process__item h3{font-family:var(--display); font-weight:400; font-size:17px; letter-spacing:.05em; text-transform:uppercase; margin:8px 0 10px}
.process__item p{font-size:14px; color:var(--muted); line-height:1.75}

/* ============================================================
   Ingredient cards
   ============================================================ */
.icard{background:none; border:0; display:flex; flex-direction:column; transition:.35s var(--ease)}
.icard:hover{transform:translateY(-4px)}
.icard__media{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--rose-100); border-radius:0}
.icard__media img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)}
.icard:hover .icard__media img{transform:scale(1.06)}
.icard__badge{
  position:absolute; top:16px; left:16px; background:none; padding:0; border-radius:0;
  color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4);
}
.icard__body{padding:22px 4px 0; display:flex; flex-direction:column; flex:1}
.icard__code{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--rose)}
.icard h3{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.04em; text-transform:uppercase; margin:7px 0 12px}
.icard p{font-size:14.5px; color:var(--muted); line-height:1.8; flex:1}
/* 특징 태그 — 해시태그 */
.icard__spec{margin:16px 0 22px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px 14px}
.icard__spec span{background:none; border:0; padding:0; font-size:12.5px; font-weight:500; letter-spacing:.01em; color:var(--rose); transition:color .2s}
.icard__spec span::before{content:'#'; margin-right:1px; opacity:.6}
.icard:hover .icard__spec span{color:var(--ink-2)}
.icard__foot{display:flex; gap:9px}
.icard__foot .btn--primary{background:transparent; color:var(--ink); border-color:var(--line-2)}
.icard__foot .btn--primary:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.icard__foot .btn{flex:1}

/* Spec table */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:0; background:#fff}
.tbl{min-width:720px; font-size:14.5px}
.tbl th,.tbl td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{background:var(--rose-100); color:var(--rose-dark); font-weight:700; font-size:13.5px; letter-spacing:.01em; white-space:nowrap; border-bottom:1px solid var(--rose-300)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
.tbl td{color:var(--muted)}
.tbl tbody tr:hover{background:var(--bg-2)}

/* ============================================================
   Shop
   ============================================================ */
.pcard{background:none; border:0; transition:.35s var(--ease); display:flex; flex-direction:column}
.pcard:hover{transform:translateY(-4px)}
.pcard__media{position:relative; aspect-ratio:1/1; background:var(--rose-100); overflow:hidden; border-radius:0}
.pcard__media img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__flag{position:absolute; top:13px; left:13px; display:flex; gap:6px}
.pcard__flag span{font-size:11px; font-weight:700; letter-spacing:.05em; padding:6px 13px; border-radius:0; background:var(--rose-deep); color:#fff}
.pcard__flag span.soon{background:var(--muted-2)}
.pcard__body{padding:20px 4px 0; display:flex; flex-direction:column; flex:1}
.pcard h3{font-size:14px; font-weight:600; letter-spacing:.04em; margin-bottom:7px}
.pcard__desc{font-size:13.5px; color:var(--muted); line-height:1.8; flex:1}
.pcard__price{margin-top:16px; display:flex; align-items:baseline; gap:8px}
.pcard__price b{font-size:17px; font-weight:600; letter-spacing:.01em}
.pcard__price s{font-size:14px; color:var(--muted-2)}
.pcard__price em{font-style:normal; font-size:13px; color:var(--muted)}
.pcard__buy{margin-top:16px; display:flex; gap:8px}
.pcard__buy .btn--primary{background:transparent; color:var(--ink); border-color:var(--line-2)}
.pcard__buy .btn--primary:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pcard__buy .btn{flex:1}
.pcard__buy .icon-btn{height:42px; width:42px; flex:none}

.notice-list{border-top:1px solid var(--line)}
.notice-list li{display:grid; grid-template-columns:130px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); font-size:15px}
.notice-list dt,.notice-list b{font-weight:600}
.notice-list span{color:var(--muted); line-height:1.8}

/* ============================================================
   News
   ============================================================ */
.ncard{display:flex; flex-direction:column; background:none; border:0; transition:.35s var(--ease)}
.ncard:hover{transform:translateY(-4px)}
.ncard__media{aspect-ratio:16/10; overflow:hidden; background:var(--rose-100); border-radius:0}
.ncard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ncard:hover .ncard__media img{transform:scale(1.05)}
.ncard__body{padding:20px 4px 0; flex:1; display:flex; flex-direction:column}
.ncard__meta{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted-2); margin-bottom:12px}
.ncard__cat{color:var(--rose-deep); font-weight:700; letter-spacing:.03em}
.ncard h3{font-size:18px; line-height:1.45; margin-bottom:10px}
.ncard p{font-size:14.5px; color:var(--muted); line-height:1.8; flex:1}

/* ============================================================
   CTA band
   ============================================================ */
.cta{position:relative; overflow:hidden; background:#26241f}
.cta__media{position:absolute; inset:0; opacity:.32}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__inner{position:relative; z-index:2; padding:92px 0; text-align:center; color:#fff}
.cta__inner h2{font-family:var(--display); font-weight:400; font-size:clamp(25px,3vw,36px); line-height:1.4; letter-spacing:.04em; text-transform:uppercase}
.cta__inner h2 em{font-style:normal; font-weight:400; color:rgba(255,255,255,.72); display:block}
.cta__inner p{margin:22px auto 0; max-width:560px; color:rgba(255,255,255,.76); font-size:14.5px; line-height:1.95}
.cta__actions{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta .btn--primary{background:#fff; color:var(--ink)}
.cta .btn--primary:hover{background:var(--rose-200)}

/* ============================================================
   Forms
   ============================================================ */
.form{display:grid; gap:20px}
.field{display:grid; gap:8px}
.field label{font-size:14px; font-weight:600; color:var(--ink-2)}
.field label .req{color:var(--rose); margin-left:3px}
.field input,.field select,.field textarea{
  width:100%; padding:14px 18px; border:1px solid var(--line-2); border-radius:0;
  background:#fff; font-size:15px; transition:.2s;
}
/* select 는 브라우저 기본 줄높이 때문에 input 보다 3px 낮게 잡힌다. 높이를 직접
   고정해야 같은 줄의 input 과 윗변·아랫변이 맞는다. */
.field input,.field select{height:56px; padding-top:0; padding-bottom:0}
.field textarea{min-height:150px; resize:vertical; line-height:1.75}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--rose); box-shadow:0 0 0 3px rgba(173,83,111,.12)}
.field__hint{font-size:13px; color:var(--muted-2)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.checkline{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted)}
.checkline input{width:17px;height:17px;margin-top:3px;flex:none; accent-color:var(--rose-deep)}
.checkline a{color:var(--rose-deep); text-decoration:underline; text-underline-offset:2px}
.formnote{background:var(--rose-100); border:0; border-radius:0; padding:22px 26px; font-size:14px; color:var(--rose-dark); line-height:1.8}

.contact-box{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:26px 0 0}
.contact-box h3{font-size:19px; margin-bottom:20px}
.contact-list{display:grid; gap:18px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.contact-list .ci{width:26px;height:26px;flex:none;margin-top:2px;color:var(--rose);display:flex;align-items:center;justify-content:center}
.contact-list .ci svg{width:24px;height:24px;stroke-width:1.35}
.contact-list b{display:block; font-size:13px; color:var(--muted-2); font-weight:600; letter-spacing:.01em}
.contact-list span{font-size:15.5px; color:var(--ink); font-weight:500}
.mapbox{border:0; border-radius:0; overflow:hidden; background:var(--bg-2)}
.mapbox iframe{display:block; width:100%; height:420px; border:0; filter:grayscale(.15)}

/* 문의 페이지 오른쪽 열 — 연락처·진행순서는 내용만큼, 지도는 남는 높이를 채운다.
   지도에 고정 높이를 주면 왼쪽 폼보다 아래로 삐져나와 두 열의 끝이 어긋난다. */
.contact-side{display:grid; gap:24px; grid-template-rows:auto auto 1fr}
.contact-side .mapbox{min-height:200px}
.contact-side .mapbox iframe{height:100%; min-height:200px}
@media (max-width:860px){
  .contact-side{grid-template-rows:none}
  .contact-side .mapbox iframe{height:240px; min-height:0}
}

/* ============================================================
   History / timeline
   ============================================================ */
.tl{position:relative; padding-left:0}
.tl__year{display:grid; grid-template-columns:170px 1fr; gap:36px; padding:34px 0; border-top:1px solid var(--line)}
.tl__year:first-child{border-top:0; padding-top:0}
.tl__y{font-family:var(--sans); font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--rose-deep); line-height:1; font-variant-numeric:lining-nums tabular-nums}
.tl__items li{display:grid; grid-template-columns:54px 1fr; gap:16px; padding:7px 0; font-size:15.5px; color:var(--ink-2)}
.tl__items li b{color:var(--rose); font-weight:600; font-size:14px; padding-top:2px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:#1D1B18; color:rgba(255,255,255,.62); font-size:14px; padding:64px 0 34px; margin-top:0}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:32px; opacity:.92; margin-bottom:20px}
.foot-brand p{line-height:1.85; font-size:13.5px; color:rgba(255,255,255,.5)}
.foot-col h4{font-size:14px; color:#fff; font-weight:600; letter-spacing:.02em; margin-bottom:18px}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:13.5px; color:rgba(255,255,255,.58); transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-contact li{display:flex; gap:10px; margin-bottom:12px; font-size:13.5px; line-height:1.7}
.foot-contact b{color:rgba(255,255,255,.45); font-weight:500; flex:none; min-width:52px}
.foot-contact span{color:rgba(255,255,255,.78)}
.foot-bottom{padding-top:28px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between}
.foot-info{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:rgba(255,255,255,.42); line-height:1.8}
.foot-legal{display:flex; gap:18px; font-size:12.5px}
.foot-legal a{color:rgba(255,255,255,.62)}
.foot-legal a:hover{color:#fff}
.copy{width:100%; font-size:12.5px; color:rgba(255,255,255,.34); padding-top:10px}

/* Float buttons */
.floaters{position:fixed; right:22px; bottom:26px; z-index:90; display:flex; flex-direction:column; gap:10px}
.floaters a,.floaters button{
  width:52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--line-2);
  box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center;
  color:var(--rose-deep); transition:.25s var(--ease);
}
.floaters a:hover,.floaters button:hover{background:var(--rose-deep); color:#fff; border-color:var(--rose-deep); transform:translateY(-3px)}
.floaters svg{width:20px;height:20px; stroke-width:1.5}
.floaters .to-top{opacity:0; visibility:hidden}
.floaters .to-top.is-on{opacity:1; visibility:visible}

/* Reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important}
  .hero__media img{animation:none}
  *{scroll-behavior:auto!important}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1280px){
  .nav{gap:16px}
  .nav__menu > li > a{padding:0 11px; font-size:15px}
  .nav__menu > li > a::after{left:11px; right:11px}
  .nav__cta{display:none}
  .nav__util{margin-left:10px}
}
/* 태블릿 — 콘텐츠가 화면 너비를 쓰도록 2단 구성을 더 좁은 폭까지 유지한다 */
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:36px}
  .split--rev .split__media{order:0}
}
@media (max-width:1100px){
  .split{gap:44px}
  .foot-top{grid-template-columns:1fr 1fr; gap:36px}
  .process{grid-template-columns:repeat(3,1fr); gap:34px 0}
  .process__item:nth-child(4)::before{display:none}
}
@media (max-width:1080px){
  :root{--nav-h:64px}
  /* 모바일 헤더 — 390px 폭에서도 햄버거까지 한 줄에 들어가야 한다 */
  .nav{gap:12px}
  .brand img{height:27px}
  .nav__util{gap:7px; margin-left:auto}
  .lang{height:38px; padding:0 2px; font-size:12px; gap:5px}
  .lang svg{width:15px; height:15px}
  .icon-btn{width:38px; height:38px}
  .icon-btn svg{width:17px; height:17px}
  .nav__toggle{width:38px; height:38px}
  /* 헤더에 backdrop-filter가 있어 fixed의 기준이 헤더가 된다 -> absolute로 붙인다 */
  .nav__menu{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 36px;
    margin:0; border-top:1px solid var(--line); box-shadow:0 18px 30px rgba(27,24,25,.10);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--ease), visibility .28s;
  }
  .nav__menu > li{opacity:0; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease)}
  .nav__menu.is-open{opacity:1; visibility:visible; pointer-events:auto}
  .nav__menu.is-open > li{opacity:1; transform:none}
  .nav__menu.is-open > li:nth-child(2){transition-delay:.04s}
  .nav__menu.is-open > li:nth-child(3){transition-delay:.08s}
  .nav__menu.is-open > li:nth-child(4){transition-delay:.12s}
  .nav__menu.is-open > li:nth-child(5){transition-delay:.16s}
  .nav__menu.is-open > li:nth-child(6){transition-delay:.2s}
  .nav__menu.is-open > li:nth-child(7){transition-delay:.24s}
  .nav__menu > li > a{line-height:1.5; padding:17px 4px; font-size:17px; border-bottom:1px solid var(--line)}
  .nav__menu > li > a::after{display:none}
  .nav__toggle{display:flex}
  .nav__cta{display:none}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  /* 2열에서 홀수 개로 끝나면 마지막 칸이 비어 보인다 -> 가운데 정렬로 메운다 */
  .grid-2 > :last-child:nth-child(odd),
  .grid-3 > :last-child:nth-child(odd),
  .grid-4 > :last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:calc(50% - 14px);
  }
  .stats{grid-template-columns:repeat(2,1fr)}
  .section{padding:76px 0}
  .topbar__msg{display:none}
  .topbar .wrap{justify-content:flex-end}
}
@media (max-width:700px){
  body{font-size:15.5px}
  .vcard{padding:26px 22px}
  .vcard:has(.vcard__ico){grid-template-columns:46px 1fr; column-gap:16px}
  .vcard__ico svg{width:36px; height:36px}
  .brand img{height:25px}
  .lang{height:38px; padding:0 2px; font-size:11.5px}
  .wrap{padding:0 18px}
  .section{padding:58px 0}
  .section--tight{padding:46px 0}
  .sec-head{margin-bottom:34px}
  .grid{gap:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-2 > :last-child:nth-child(odd),
  .grid-3 > :last-child:nth-child(odd),
  .grid-4 > :last-child:nth-child(odd){width:auto; justify-self:stretch}
  .stats{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:1fr; gap:28px}
  .process__item::before{display:none}
  .process__item{
    display:grid; grid-template-columns:52px 1fr; column-gap:18px; row-gap:0;
    grid-template-areas:"dot step" "dot title" "dot desc";
    align-items:start; text-align:left; padding:0;
  }
  .process__dot{grid-area:dot; margin:0; align-self:start}
  /* .process__step 도 <p> 라서, 설명 선택자가 라벨까지 잡지 않도록 제외한다 */
  .process__item .process__step{grid-area:step}
  .process__item h3{grid-area:title; margin:6px 0 8px}
  .process__item p:not(.process__step){grid-area:desc}
  .hero{min-height:calc(100vh - var(--nav-h) - 38px)}
  .hero__media::after{background:linear-gradient(180deg, rgba(38,20,28,.62), rgba(38,20,28,.78))}
  .phero{height:230px}
  .deflist div{grid-template-columns:110px 1fr; gap:12px}
  .tl__year{grid-template-columns:1fr; gap:14px; padding:26px 0}
  .tl__y{font-size:30px}
  .field-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:32px}
  .notice-list li{grid-template-columns:1fr; gap:6px}
  .contact-box{padding:22px 0 0}
  .floaters{right:14px; bottom:16px}
  .floaters a,.floaters button{width:46px;height:46px}
  .cta__inner{padding:64px 0}
  .btn{height:48px; padding:0 22px; font-size:14.5px}
}


/* 공정 단계 수에 따른 열 수 */
.process--4{grid-template-columns:repeat(4,1fr)}
.process--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1180px){
  .process--4,.process--6{grid-template-columns:repeat(3,1fr); gap:34px 0}
}
@media (max-width:700px){
  .process--4,.process--6{grid-template-columns:1fr; gap:28px}
}

/* ============================================================
   Specification sheet (원료 규격서 이미지)
   ============================================================ */
.specsheet{border-top:1px solid var(--line); padding-top:40px}
.specsheet__fig{margin:0}
.specsheet__fig + .specsheet__fig{margin-top:22px}
.specsheet__fig img{display:block; width:100%; height:auto; border:1px solid var(--line); background:#fff}

/* ============================================================
   Science list (다마스크 로즈에 담긴 피부 과학)
   ============================================================ */
.sci{display:grid; gap:14px}
.sci__item{
  display:grid; grid-template-columns:62px 1fr; gap:22px; align-items:start;
  background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:24px 26px;
}
.sci__ico{
  width:62px; height:62px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--rose);
}
.sci__ico svg{width:28px; height:28px; stroke-width:1.3}
.sci__h{font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--rose-deep); margin:2px 0 8px}
.sci__h small{font-weight:600; letter-spacing:0; color:var(--muted-2); margin-left:4px}
.sci__d{font-size:15px; line-height:1.8; color:var(--ink); margin:0}
.sci__ref{display:block; font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:9px}

/* ============================================================
   Certificates (인증)
   ============================================================ */
.certs{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.cert{margin:0; text-align:center}
.cert__media{background:#fff; border:1px solid var(--line); padding:18px; display:flex; align-items:center; justify-content:center}
.cert__media img{display:block; width:100%; height:auto; max-height:460px; object-fit:contain}
.cert figcaption{margin-top:14px; font-size:14.5px; font-weight:600; color:var(--ink)}

/* ============================================================
   Flow diagram (로즈워터 생산 공정 흐름도)
   ============================================================ */
.flow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch}
.flow__pre{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.flow__box{
  border:1px solid var(--line); border-radius:6px; padding:18px 16px; text-align:center;
  font-size:14.5px; font-weight:600; color:var(--ink); background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; min-height:66px;
}
.flow__box--lt{background:#eef5ec; border-color:#cbdfc5}
.flow__box--sd{background:#e9f1f4; border-color:#c3d8e0}
.flow__lane{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; grid-column:1 / -1}
.flow__lane > .flow__label{grid-column:1 / -1; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--muted-2); margin-bottom:-4px}

@media (max-width:1080px){
  /* 태블릿에서는 데스크톱과 같은 3단 흐름을 유지한다 */
  .certs{gap:18px}
  .flow{gap:12px}
  .flow__lane,.flow__pre{gap:12px}
  .flow__box{padding:14px 10px; font-size:13.5px; min-height:60px}
}
@media (max-width:700px){
  .flow__lane{grid-template-columns:1fr}
  .flow__pre{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sci__item{grid-template-columns:1fr; gap:14px; padding:20px}
  .sci__ico{width:52px;height:52px}
  .certs{grid-template-columns:1fr; gap:24px}
  .specsheet{padding-top:30px}
}

/* ============================================================
   Gallery (장미밭의 기록 — 9장)
   ============================================================ */
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.gallery__item{margin:0; overflow:hidden; border-radius:3px; background:var(--bg-2)}
.gallery__item img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.gallery__item:hover img{transform:scale(1.04)}

@media (max-width:1080px){
  .gallery{gap:14px}
}
@media (max-width:700px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  /* 홀수 장으로 끝나면 마지막 한 장 옆이 비어 보인다 -> 가운데로 */
  .gallery > :last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:calc(50% - 5px);
  }
}
@media (prefers-reduced-motion:reduce){
  .gallery__item img{transition:none}
  .gallery__item:hover img{transform:none}
}

/* ============================================================
   Contact — 폼 + 사이드 정보 2단 (모바일에서 1단으로 접힘)
   ============================================================ */
.contact-grid{grid-template-columns:1.25fr 1fr; align-items:start; gap:56px}
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr; gap:40px}
}

/* ============================================================
   사업 분야 — 이미지 카드형 (PPT 슬라이드 11)
   ============================================================ */
.bizgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px}
.bizcard{background:none; border:0; display:flex; flex-direction:column; transition:.35s var(--ease)}
.bizcard:hover{transform:translateY(-4px)}
.bizcard__media{overflow:hidden; background:var(--bg-2)}
.bizcard__media img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.bizcard:hover .bizcard__media img{transform:scale(1.05)}
.bizcard__body{padding:20px 2px 0; flex:1}
.bizcard__num{font-size:12px; font-weight:700; color:var(--rose); letter-spacing:.16em; margin-bottom:10px}
.bizcard__body h3{font-family:var(--display); font-weight:400; font-size:18px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; line-height:1.4}
.bizcard__body p{color:var(--muted); font-size:14.5px; line-height:1.8}

@media (max-width:1080px){
  .bizgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
}
@media (max-width:700px){
  .bizgrid{gap:14px}
  .bizcard__body{padding:16px 0 0}
  .bizcard__body h3{font-size:16.5px}
  .bizcard__body p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .bizcard,.bizcard__media img{transition:none}
  .bizcard:hover{transform:none}
  .bizcard:hover .bizcard__media img{transform:none}
}

/* ============================================================
   회사소개서 PDF 버튼 / 카카오톡 채널 (PPT 슬라이드 42)
   상수가 비어 있으면 마크업 자체가 비어 아무것도 보이지 않는다.
   ============================================================ */
.foot-cta:empty{display:none}
.foot-cta{margin-top:30px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12)}

.topbar__pdf{display:inline-flex; align-items:center; gap:6px}
.topbar__pdf svg{width:14px; height:14px; stroke-width:1.5}
.pdfbtn{display:inline-flex; align-items:center; gap:8px}
.pdfbtn svg{width:17px; height:17px; stroke-width:1.4; flex:none}
.pdfbtn__size{opacity:.6; font-weight:500; font-size:.88em; letter-spacing:0}

.floaters__kakao{background:#FAE100 !important; color:#3C1E1E !important; border-color:#FAE100 !important}
.floaters__kakao:hover{background:#F2D900 !important}
.floaters__kakao svg{fill:currentColor; stroke:none}

@media (max-width:1080px){
  .topbar__pdf .pdfbtn__size{display:none}
}

/* ============================================================
   카드 액션 — 테두리 버튼 대신 텍스트 링크 (대표 원료)
   ============================================================ */
.icard__foot--text{
  display:flex; align-items:center; gap:26px;
  margin-top:20px; padding-top:15px; border-top:1px solid var(--line);
}
.cardlink{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); padding-bottom:3px; white-space:nowrap;
  transition:color .25s var(--ease);
}
.cardlink svg{width:15px; height:15px; stroke-width:1.7; transition:transform .3s var(--ease)}
.cardlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.cardlink:hover{color:var(--rose-deep)}
.cardlink:hover::after{transform:scaleX(1)}
.cardlink:hover svg{transform:translateX(4px)}
.cardlink--quiet{color:var(--muted); font-weight:600}
.cardlink--quiet:hover{color:var(--ink)}

@media (max-width:700px){
  .icard__foot--text{gap:20px; padding-top:13px; margin-top:16px}
  .cardlink{font-size:11.5px; letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .cardlink::after{transition:none}
  .cardlink svg{transition:none}
}

/* ============================================================
   외곽선 버튼 -> 텍스트 링크
   마크업(.btn.btn--outline)은 그대로 두고 표현만 바꾼다.
   짙은 CTA(.btn--primary)와 어두운 배경의 .btn--ghost-light 는 유지.
   ============================================================ */
.btn--outline{
  height:auto; padding:0 0 3px; border:0; background:none;
  color:var(--ink); gap:8px; position:relative; align-self:center;
  font-size:12px; letter-spacing:.13em;
}
.btn--outline::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.btn--outline:hover{background:none; color:var(--rose-deep)}
.btn--outline:hover::after{transform:scaleX(1)}
.btn--outline.btn--lg{font-size:12.5px}
.btn--outline.btn--sm{font-size:11.5px}
/* 카드 하단에서 버튼과 나란히 설 때 텍스트 링크는 늘리지 않는다 */
.icard__foot .btn--outline,
.pcard__buy .btn--outline{flex:none}
.icard__foot{align-items:center; gap:20px}

@media (prefers-reduced-motion:reduce){
  .btn--outline::after{transition:none}
}

/* 사진 위 라벨 가독성 — 박스 대신 상단/하단 스크림 그라데이션 */
.icard__media::after{
  content:''; position:absolute; inset:0 0 auto 0; height:38%;
  background:linear-gradient(180deg, rgba(20,12,16,.46), rgba(20,12,16,0));
  pointer-events:none; z-index:1;
}
.icard__badge{z-index:2}
.split__media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(0deg, rgba(20,12,16,.5), rgba(20,12,16,0));
  pointer-events:none; z-index:1;
}
.split__media .tag{z-index:2}

/* 카드 하단 — 텍스트 링크 + 작은 솔리드 CTA (옅은 테두리 박스가 늘어나던 것 교체) */
.icard__foot{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.icard__foot .btn{flex:none}
.icard__foot .btn--primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.icard__foot .btn--primary:hover{background:#000; color:#fff; border-color:#000}
.pcard__buy .btn--primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.pcard__buy .btn--primary:hover{background:#000; border-color:#000}

/* ============================================================
   Aroma composition / Quality specification  (카탈로그 A5 8P 반영)
   ============================================================ */
.aroma{display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px; margin-top:4px}
.aroma__item{padding:30px 0 6px; border-top:1px solid var(--line-2)}
.aroma__en{font-family:var(--serif); font-size:23px; line-height:1.3; color:var(--rose-deep); margin:0 0 8px; letter-spacing:.01em}
.aroma__ko{font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--rose); margin:0 0 12px}
.aroma__d{font-size:14.5px; line-height:1.78; color:var(--muted); margin:0}

.qgrid{display:grid; grid-template-columns:1.3fr 1fr; gap:0 52px; align-items:start}
.qblock{min-width:0}
.qblock__t{font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--rose-deep); margin:0 0 14px}
.tbl--q{min-width:0}
.qsub{display:none}
.tbl--q th,.tbl--q td{padding:13px 16px; white-space:nowrap}
.tbl--q thead th{background:none; border-bottom:1px solid var(--line-2); color:var(--muted-2); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.tbl--q tbody tr:hover{background:none}
.tbl--q .tbl__sum th,.tbl--q .tbl__sum td{border-top:1px solid var(--line-2); color:var(--rose-deep); font-weight:700}

.qrec{display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px; margin-top:52px}
.qrec__item{padding:26px 0 6px; border-top:1px solid var(--line-2)}
.qrec__k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:0 0 12px}
.qrec__v{font-family:var(--serif); font-size:27px; line-height:1.25; color:var(--rose-deep); margin:0 0 8px}
.qrec__d{font-size:14px; line-height:1.72; color:var(--muted); margin:0}

@media (max-width:1024px){
  .qgrid{grid-template-columns:1fr; gap:44px 0}
}
@media (max-width:860px){
  .aroma,.qrec{grid-template-columns:1fr; gap:0}
  .tbl--q th,.tbl--q td{padding:11px 9px; font-size:12.5px}
  .tbl--q thead th{font-size:11px; letter-spacing:.03em}
  .qinci{display:none}
  .qsub{display:block; white-space:normal; font-weight:500; font-size:11.5px;
        line-height:1.5; color:var(--muted-2); margin-top:5px}
  .aroma__en{font-size:21px}
  .qrec{margin-top:40px}
  .qrec__v{font-size:24px}
}

/* ===== 첫 화면 홍보영상 ==============================================
   들어오자마자 영상이 첫 화면을 꽉 채우고, 그 아래에 제목과 버튼만 둔다.
   영상 안에 자막과 메시지가 박혀 있어 배경으로 깔 수 없고(글자가 겹친다),
   잘리면 그 자막이 날아가므로 object-fit:contain 이다. 남는 여백은 영상
   배경과 같은 #F7E6E5 이라 이어 붙은 것처럼 보인다.
   높이는 헤더(상단 띠 38px + 내비)를 뺀 나머지 전체. 모바일 주소창 때문에
   100vh 는 넘치므로 100svh 를 쓰고, 지원하지 않으면 100vh 로 떨어진다. */
/* 영상을 가장 크게 보여주는 것이 우선이다. 자막이 박힌 영상이라 잘라낼 수 없으므로
   가로를 화면 끝까지 쓰는 것이 최대 크기다(16:9 그대로). 제목과 버튼은 그 바로 아래. */
/* 높이는 영상이 정한다. 화면 높이에 억지로 맞추면(min-height) 세로로 긴 창에서
   16:9 영상 아래에 분홍 배경만 남아 어색해진다. 배경색은 영상 아래 가장자리와
   같은 값이라 휴대폰에서 버튼 줄이 이어붙은 것처럼 보이게 하는 용도로만 쓴다. */
.vhero{display:flex; flex-direction:column}
/* 영상과 제목·버튼을 한 덩어리로 묶어 화면 가운데에 놓는다. 16:9 영상은 세로로 긴
   휴대폰 화면을 채울 수 없으므로, 억지로 늘리는 대신 가운데 정렬로 균형을 잡는다. */
.vhero__media{position:relative; flex:0 0 auto; display:block}
/* 남은 높이에 맞춰 영상이 줄어든다. height:100% 로 높이를 먼저 잡고 16:9 로 너비를
   끌어낸 뒤, 화면보다 넓어지면 max-width 가 다시 눌러준다. 이래야 제목·버튼이
   화면 밖으로 밀려나지 않는다. */
.vhero__video{display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:contain; background:#F7E6E5}

/* 버튼 — 영상 하단의 빈 띠(가장 좁은 시점에도 영상 높이의 13%)에 올린다.
   영상 안 내용과 겹치지 않는 선이다. 세로로 긴 휴대폰에서는 영상이 작아져
   그 띠가 28px 밖에 안 되므로, 거기서는 영상 바로 아래로 내린다. 배경이
   영상 아래 가장자리와 같은 #F7E6E5 라 경계가 보이지 않는다. */
.vhero__actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  padding:16px 18px 20px}
/* PC: 버튼은 영상 아래쪽 빈 띠에 가운데로 올리고, 소리 버튼은 같은 줄 왼쪽 끝에 둔다.
   휴대폰에서는 영상이 작아 그 띠에 넣을 수 없으므로 셋 다 영상 바로 아래 한 줄로 흐른다. */
@media (min-width:769px){
  .vhero__actions{position:absolute; left:0; right:0; bottom:clamp(8px,1.4vw,20px); z-index:2;
    padding:0; display:flex; justify-content:center; align-items:center}
  .vhero__actions .btn--lg{height:44px; padding:0 22px; font-size:12px}
  .vhero__sound{position:absolute; left:clamp(12px,2.6vw,28px); top:50%; transform:translateY(-50%)}
}

/* 소리 버튼 — 네모 상자 대신 아이콘과 글씨, 밑줄 한 줄로만 둔다.
   오른쪽 아래에 두면 전화·채팅 플로팅 버튼에 가려서 왼쪽 아래에 둔다. */
.vhero__sound{display:inline-flex; align-items:center; gap:9px; padding:6px 1px 7px; border:0; background:none;
  color:#7a4d57; font-family:inherit; font-size:11px; letter-spacing:.16em; line-height:1;
  cursor:pointer; border-bottom:1px solid rgba(122,77,87,.35);
  transition:color .25s var(--ease), border-color .25s var(--ease)}
.vhero__sound:hover{color:#5d343d; border-bottom-color:rgba(122,77,87,.8)}
.vhero__sound:focus-visible{outline:1px solid rgba(122,77,87,.8); outline-offset:5px}
.vhero__sound svg{flex:0 0 auto; overflow:visible}
.vhero__sound[aria-pressed="false"] .wv{display:none}
.vhero__sound[aria-pressed="true"]  .sl{display:none}

@media (max-width:640px){
  .vhero__sound{font-size:10px; letter-spacing:.12em; gap:7px}
  .vhero__actions{gap:8px; padding:14px 16px 20px}
  .vhero__actions .btn--lg{height:46px; padding:0 18px; font-size:12px}
}