/* [사이트판 손봄 2026-10-10] */
/* =========================================================
   REPTILISH — site frame
   Tokens from brief §5. Mobile-first (375px), 16px gutters.
   ========================================================= */
:root{
  --cream:#FAF7F2; --warm:#F3EEE6; --paper:#FFFFFF; --deep:#3E3832;
  --ink:#3A3531; --mute:#6E655D; --accent:#6E5940; --line:#E7DFD4;
  --od-head:#F2EDE6; --od-body:#D9D2C8; --od-gold:#C6AE8A; --od-line:rgba(242,237,230,.16);
  --body:'Noto Serif', 'Noto Serif KR', serif;
  --display:'Cormorant Garamond', var(--body);
  --gut:16px; --max:1280px; --hdr:64px;
  --track:3.5px; /* label letter-spacing */
}
html:lang(ko){ --body:'Noto Serif KR','Noto Serif',serif; --track:3px; }
html:lang(ja){ --body:'Noto Serif JP','Noto Serif',serif; --track:3px; }
html:lang(zh){ --body:'Noto Serif TC','Noto Serif',serif; --track:3px; }
@media (min-width:768px){ :root{ --gut:32px; --hdr:76px; } }
@media (min-width:1200px){ :root{ --gut:48px; } }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 64px); }
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--body); font-weight:300; font-size:15px; line-height:1.95;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (min-width:768px){ body{ font-size:16px; } }
html:is(:lang(ko),:lang(ja),:lang(zh)) body{ word-break:keep-all; line-break:strict; }
html:is(:lang(ja),:lang(zh)) body{ word-break:normal; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
p, li, dd{ text-wrap:pretty; }
h1,h2,h3,h4{ font-weight:300; text-wrap:balance; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.wrap-narrow{ max-width:880px; margin:0 auto; padding:0 var(--gut); }

/* ---------- type ---------- */
.label{
  font-family:var(--display); font-weight:400; font-size:12px; line-height:1.4;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--accent);
}
@media (min-width:768px){ .label{ font-size:13px; } }
.on-deep .label, .label.gold{ color:var(--od-gold); }
.num{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; color:var(--accent); }
.sep{ display:block; width:36px; height:1px; background:var(--accent); border:0; }
.sep.center{ margin-left:auto; margin-right:auto; }
.on-deep .sep{ background:var(--od-gold); }

.h-display{ font-family:var(--display); font-weight:300; line-height:1.08; letter-spacing:-.005em; }
.h1{ font-size:42px; }
.h2{ font-size:32px; }
.h3{ font-size:24px; line-height:1.3; }
@media (min-width:768px){ .h1{ font-size:60px; } .h2{ font-size:44px; } .h3{ font-size:28px; } }
@media (min-width:1200px){ .h1{ font-size:76px; } }
/* CJK headings: Cormorant has no CJK glyphs → Noto Serif; scale down & loosen */
html:is(:lang(ko),:lang(ja),:lang(zh)) .h-display{ line-height:1.42; letter-spacing:0; }
html:is(:lang(ko),:lang(ja),:lang(zh)) .h1{ font-size:30px; }
html:is(:lang(ko),:lang(ja),:lang(zh)) .h2{ font-size:24px; }
html:is(:lang(ko),:lang(ja),:lang(zh)) .h3{ font-size:19px; }
@media (min-width:768px){
  html:is(:lang(ko),:lang(ja),:lang(zh)) .h1{ font-size:44px; }
  html:is(:lang(ko),:lang(ja),:lang(zh)) .h2{ font-size:32px; }
  html:is(:lang(ko),:lang(ja),:lang(zh)) .h3{ font-size:21px; }
}
@media (min-width:1200px){ html:is(:lang(ko),:lang(ja),:lang(zh)) .h1{ font-size:52px; } }
.lead{ font-size:16px; line-height:1.9; color:var(--ink); }
@media (min-width:768px){ .lead{ font-size:18px; } }
.small{ font-size:13px; line-height:1.8; color:var(--mute); }
.tiny{ font-size:12px; line-height:1.75; color:var(--mute); }
.mute{ color:var(--mute); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 26px; border-radius:1px;
  font-family:var(--body); font-weight:400; font-size:14px; line-height:1.35; letter-spacing:.02em;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:background .2s, color .2s, border-color .2s; text-align:center;
}
.btn:hover{ background:var(--deep); border-color:var(--deep); }
.btn.deep{ background:var(--deep); border-color:var(--deep); }
.btn.deep:hover{ background:var(--accent); border-color:var(--accent); }
.btn.outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.outline:hover{ background:var(--ink); color:var(--cream); }
.on-deep .btn.outline{ color:var(--od-head); border-color:rgba(242,237,230,.5); }
.on-deep .btn.outline:hover{ background:var(--od-head); color:var(--deep); }
.btn.light{ background:var(--od-head); color:var(--deep); border-color:var(--od-head); }
.btn.light:hover{ background:transparent; color:var(--od-head); }
.btn.block{ display:flex; width:100%; }
.btn .arr{ font-family:'Cormorant Garamond',serif; font-size:17px; line-height:1; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:480px){ .btn-row.stack-m{ flex-direction:column; } .btn-row.stack-m .btn{ width:100%; } }
.textlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:13px; letter-spacing:var(--track); text-transform:uppercase; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid currentColor;
}
.textlink:hover{ color:var(--accent); }
.pill{
  display:inline-block; padding:3px 11px; border-radius:999px;
  font-family:var(--display); font-size:11px; letter-spacing:2px; text-transform:uppercase; line-height:1.6;
  background:var(--deep); color:var(--od-head);
}
html:is(:lang(ko),:lang(ja),:lang(zh)) .pill{ font-family:var(--body); letter-spacing:.5px; font-size:11px; }
.ph{ /* visible copy placeholder */
  font-family:ui-monospace, Menlo, monospace; font-size:.86em; font-weight:400;
  background:rgba(198,174,138,.22); color:inherit; padding:1px 6px; border-radius:1px; white-space:nowrap;
}

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:50; background:rgba(250,247,242,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.hdr-in{ height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hdr-logo img{ height:26px; width:auto; }
@media (min-width:768px){ .hdr-logo img{ height:32px; } }
.hdr-nav{ display:none; align-items:center; gap:36px; }
.hdr-nav a{
  font-family:var(--display); font-size:14px; letter-spacing:2.6px; text-transform:uppercase; color:var(--ink);
  padding:6px 0; border-bottom:1px solid transparent; white-space:nowrap;
}
html:is(:lang(ko),:lang(ja),:lang(zh)) .hdr-nav a{ font-family:var(--body); font-size:14px; letter-spacing:.06em; }
.hdr-nav a:hover, .hdr-nav a[aria-current="page"]{ border-bottom-color:var(--accent); color:var(--accent); }
.hdr-right{ display:flex; align-items:center; gap:4px; }
@media (min-width:1024px){ .hdr-nav{ display:flex; } .hdr-burger{ display:none !important; } .hdr-right{ gap:28px; } }

/* language switcher */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:8px; height:44px; padding:0 10px;
  font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--ink);
  border:1px solid transparent;
}
.lang-btn:hover, .lang.open .lang-btn{ border-color:var(--line); }
.lang-btn svg{ width:16px; height:16px; stroke:var(--mute); }
.lang-btn .chev{ width:9px; height:9px; transition:transform .2s; }
.lang.open .lang-btn .chev{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px; z-index:60;
  background:var(--paper); border:1px solid var(--line); padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.18s;
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu .lh{ padding:8px 20px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.lang-menu a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
  padding:10px 20px; font-size:15px; line-height:1.4; color:var(--ink);
}
.lang-menu a .code{ font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:2px; color:var(--mute); }
.lang-menu a:hover{ background:var(--warm); }
.lang-menu a[aria-current="true"]{ color:var(--accent); }
.lang-menu a[aria-current="true"] .code::before{ content:"— "; }
.lang-menu a[lang="ko"]{ font-family:'Noto Serif KR',serif; }
.lang-menu a[lang="ja"]{ font-family:'Noto Serif JP',serif; }
.lang-menu a[lang="zh-Hant-TW"]{ font-family:'Noto Serif TC',serif; }
.lang-menu a[lang="en"]{ font-family:'Cormorant Garamond',serif; font-size:17px; }

.hdr-burger{ width:44px; height:44px; display:grid; place-items:center; }
.hdr-burger span{ display:block; width:20px; height:1px; background:var(--ink); position:relative; }
.hdr-burger span::before, .hdr-burger span::after{ content:""; position:absolute; left:0; width:20px; height:1px; background:var(--ink); }
.hdr-burger span::before{ top:-6px; } .hdr-burger span::after{ top:6px; }
/* mobile drawer */
.drawer{ position:fixed; inset:var(--hdr) 0 0 0; z-index:49; background:var(--cream); padding:24px var(--gut) 40px;
  transform:translateY(-8px); opacity:0; visibility:hidden; transition:.2s; overflow-y:auto; }
.drawer.open{ transform:none; opacity:1; visibility:visible; }
.drawer nav a{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:24px; font-weight:300; }
.drawer nav a .num{ font-size:15px; }
.drawer .dl{ margin-top:36px; }
.drawer .dl-row{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-top:12px; }
.drawer .dl-row a{ text-align:center; padding:12px 0; font-size:14px; border-right:1px solid var(--line); }
.drawer .dl-row a:last-child{ border-right:0; }
.drawer .dl-row a[aria-current="true"]{ background:var(--deep); color:var(--od-head); }

/* ---------- sections ---------- */
.sec{ padding:72px 0; }
@media (min-width:768px){ .sec{ padding:112px 0; } }
.bg-warm{ background:var(--warm); }
.bg-paper{ background:var(--paper); }
.bg-deep{ background:var(--deep); color:var(--od-body); }
.bg-deep .h-display{ color:var(--od-head); }
.sec-head{ display:grid; gap:18px; margin-bottom:40px; }
.sec-head.center{ text-align:center; justify-items:center; }
@media (min-width:768px){ .sec-head{ margin-bottom:56px; } }
.rule-top{ border-top:1px solid var(--line); }

/* ---------- product cards ---------- */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px 12px; }
@media (min-width:768px){ .cards{ gap:40px 24px; } }
@media (min-width:1024px){ .cards.c4{ grid-template-columns:repeat(4,1fr); } .cards.c3{ grid-template-columns:repeat(3,1fr); } }
.card{ display:flex; flex-direction:column; gap:14px; }
.card-img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--warm); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-img img{ transform:scale(1.03); }
.card-img .pill{ position:absolute; top:10px; left:10px; }
.card-img .imgnote{ position:absolute; right:8px; bottom:6px; font-size:10px; color:rgba(58,53,49,.75); background:rgba(250,247,242,.8); padding:0 6px; }
.card-body{ display:grid; gap:6px; }
.card-top{ display:flex; align-items:baseline; gap:10px; }
.card-top .num{ font-size:16px; }
.card-name{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:21px; line-height:1.2; color:var(--ink); }
@media (min-width:768px){ .card-name{ font-size:25px; } }
.card-line{ font-size:13px; line-height:1.75; color:var(--mute); }
@media (min-width:768px){ .card-line{ font-size:14px; } }
.card .textlink{ justify-self:start; margin-top:8px; font-size:12px; }

/* ---------- notes ---------- */
.note{ background:var(--warm); padding:18px 20px; font-size:13px; line-height:1.85; color:var(--ink); }
.note .label{ display:block; margin-bottom:6px; }
.fine{ font-size:12px; line-height:1.75; color:var(--mute); }
.fine p + p{ margin-top:4px; }

/* ---------- footer ---------- */
.ftr{ background:var(--deep); color:var(--od-body); padding:64px 0 28px; }
@media (min-width:768px){ .ftr{ padding:88px 0 32px; } }
.ftr-top{ display:grid; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--od-line); }
@media (min-width:900px){ .ftr-top{ grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; } }
.ftr-logo img{ height:82px; width:auto; }
.ftr-tag{ margin-top:20px; font-size:13px; line-height:1.8; color:var(--od-body); max-width:260px; }
.ftr h5{ font-family:var(--display); font-weight:400; font-size:12px; letter-spacing:var(--track); text-transform:uppercase; color:var(--od-gold); margin-bottom:16px; }
.ftr ul{ list-style:none; display:grid; gap:8px; }
.ftr ul a{ font-size:14px; color:var(--od-head); }
.ftr ul a:hover{ color:var(--od-gold); }
.ftr-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; }
@media (min-width:900px){ .ftr-cols{ display:contents; } }
.ftr-notices{ padding:28px 0; border-bottom:1px solid var(--od-line); display:grid; gap:6px; font-size:12px; line-height:1.8; color:rgba(217,210,200,.78); }
.ftr-bot{ padding-top:24px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12px; color:rgba(217,210,200,.78); }
.ftr .ph{ background:rgba(198,174,138,.18); color:var(--od-head); }

/* toast for placeholder links */
.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:100;
  background:var(--deep); color:var(--od-head); padding:12px 18px; font-size:13px; transition:.25s; pointer-events:none; max-width:calc(100vw - 32px); }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- buying routes ---------- */
.routes{ display:grid; border-top:1px solid var(--line); }
.route{ display:grid; align-content:start; gap:14px; padding:32px 0; border-bottom:1px solid var(--line); }
.route-text{ font-size:15px; line-height:1.9; max-width:520px; }
.route .btn-row{ margin-top:8px; }
@media (min-width:900px){
  .routes{ grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
  .route{ padding:44px 48px 48px 0; border-bottom:0; }
  .route + .route{ padding:44px 0 48px 48px; border-left:1px solid var(--line); }
}
.on-deep .routes, .on-deep .route, .on-deep .route + .route{ border-color:var(--od-line); }
.on-deep .route-text{ color:var(--od-body); }

/* ---------- utilities ---------- */
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.grid-2{ display:grid; gap:40px; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; gap:64px; } }
.ilist{ list-style:none; display:grid; }
.ilist li{ display:grid; grid-template-columns:44px 1fr; gap:8px; padding:16px 0; border-top:1px solid var(--line); }
.ilist li:last-child{ border-bottom:1px solid var(--line); }
.ilist .num{ font-size:20px; line-height:1.5; }

/* ---------- 사이트판 추가 ---------- */
/* 독일어 · 폴란드어 · 이탈리아어: 긴 낱말 줄바꿈 */
html:is(:lang(de),:lang(pl),:lang(it)) body{ hyphens:auto; }
/* 번역 전 언어 안내 띠 */
.pending{ background:var(--warm); border-bottom:1px solid var(--line); font-size:12.5px; color:var(--mute); text-align:center; padding:8px var(--gut); }
/* 언어 메뉴: 7개 */
.drawer .dl-row{ grid-template-columns:repeat(7,1fr); }
.drawer .dl-row a{ font-size:13px; }

/* 플랫폼 버튼 — 각 서비스에서 익숙한 모양 */
.btn .ico{ width:18px; height:18px; flex:0 0 18px; display:block; }
.btn.naver{ background:#03C75A; border-color:#03C75A; color:#fff; }
.btn.naver:hover{ background:#02B351; border-color:#02B351; }
.btn.naver .ico{ width:14px; height:14px; flex-basis:14px; }
.btn.insta{ background:linear-gradient(45deg,#F58529 0%,#DD2A7B 42%,#8134AF 72%,#515BD4 100%); border:0; color:#fff; }
.btn.insta:hover{ filter:brightness(.93); }
.btn.kakao{ background:#FEE500; border-color:#FEE500; color:#191919; }
.btn.kakao:hover{ background:#F2D900; border-color:#F2D900; }
.btn.mail{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.mail:hover{ background:var(--ink); color:var(--cream); }
.btn.mail .ico{ stroke:currentColor; }
.on-deep .btn.mail{ color:var(--od-head); border-color:rgba(242,237,230,.5); }
.btn .arr{ margin-left:-2px; }