@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   이창화 · 이예나 — 모바일 청첩장
   Claude Design 시안(청첩장.dc.html) 그대로 옮긴 스타일
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:#332f28;         /* 본문 먹색 */
  --ink-2:#453f36;
  --ink-3:#5b5449;
  --mute:#8c8371;
  --mute-2:#a1957e;
  --faint:#a39a88;
  --paper:#faf7f0;       /* 청첩장 종이 */
  --paper-2:#fffdf6;     /* 폴라로이드 / 카드 */
  --paper-3:#f2ece0;
  --edge:#ded5c2;
  --edge-2:#e6ded0;
  --ph:#e6e0d4;          /* 이미지 자리 */
  --link:#a3695e;

  --f-hand:'Nanum Pen Script','Gowun Dodum',cursive;
  --f-sans:'Gowun Dodum',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  --f-serif:'Gowun Batang','Nanum Myeongjo',serif;
}

/* 체코어 모드 — 한글 폰트에 없는 ě š č ř ž 같은 글자까지 갖춘
   라틴 폰트를 앞세운다 (한글은 뒤의 한글 폰트로 자연스럽게 대체) */
:root[lang="cs"]{
  --f-hand:'Caveat','Nanum Pen Script',cursive;
  --f-sans:'Karla','Gowun Dodum',system-ui,sans-serif;
  --f-serif:'Lora','Gowun Batang',serif;
}
/* 라틴 이름이 한글보다 길어서, 좁은 화면에선 제목을 화면 폭에 맞춰
   줄이고 절대 두 줄로 꺾이지 않게 한다 (카드 최대 폭에선 38px) */
:root[lang="cs"] .hero-names{white-space:nowrap;font-size:min(38px,8.8vw)}
:root[lang="cs"] .hero-names span{font-size:.85em;padding:0 10px}
:root[lang="cs"] .greeting-body{font-size:15.5px;line-height:2}
:root[lang="cs"] .dot{font-size:15px;letter-spacing:.02em}
:root[lang="cs"] .parents{font-size:13.5px}
/* 체코어 캡션은 두 줄이 되기 쉬워서 자리를 조금 더 준다 */
:root[lang="cs"] .poi{padding-bottom:46px}
:root[lang="cs"] .poi figcaption{font-size:15px;line-height:1.15}
:root[lang="cs"] .lb-frame{padding-bottom:62px}
:root[lang="cs"] .lb-frame figcaption{font-size:18px;line-height:1.2}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#dedad0}
body{
  font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:#7f4d44}
button{font-family:inherit;cursor:pointer}

.card{
  min-width:320px;max-width:430px;margin:0 auto;
  background:var(--paper);
  box-shadow:0 0 70px rgba(60,50,40,.22);
  position:relative;overflow:hidden;
}

@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* 공통 헤드 ------------------------------------------------ */
.sec-head{text-align:center}
.eyebrow{
  margin:0;font:400 12px/1 var(--f-sans);
  letter-spacing:.3em;color:var(--mute-2);
}
.sec-title{
  margin:12px 0 0;font:400 24px/1.4 var(--f-serif);
  color:var(--ink);font-weight:400;
}
.sec-sub{margin:10px 0 0;font:400 13.5px/1.8 var(--f-sans);color:var(--mute)}
.rule{margin:34px auto 0;width:34px;height:1px;background:#cfc7b6}
.rule-light{margin:20px auto 0;width:30px;background:rgba(242,236,224,.35)}

/* ══════════ HERO ══════════ */
.hero{position:relative;height:560px;background:var(--ph);overflow:hidden}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(35,28,20,.28) 0%,rgba(35,28,20,0) 34%,
    rgba(35,28,20,.05) 60%,rgba(35,28,20,.5) 100%);
}
.hero-kicker{
  position:absolute;top:26px;left:0;right:0;margin:0;
  text-align:center;color:#fff8ec;
  font:400 12px/1 var(--f-sans);letter-spacing:.46em;opacity:.92;
}
.hero-foot{position:absolute;left:0;right:0;bottom:34px;text-align:center;color:#fff8ec}
.hero-names{
  margin:0;font:400 40px/1.2 var(--f-serif);font-weight:400;
  letter-spacing:.06em;text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.hero-names span{font-family:var(--f-hand);font-size:34px;padding:0 12px;opacity:.9}
.hero-date{
  margin:12px 0 0;font:400 13px/1 var(--f-sans);
  letter-spacing:.2em;opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.5);
}

.stamp{
  position:absolute;top:74px;right:-8px;width:116px;
  padding:15px 10px 13px;text-align:center;
  background:linear-gradient(158deg,#f4ecd8,#e6d9bd);
  transform:rotate(6deg);
  box-shadow:4px 7px 16px rgba(40,30,15,.3);
}
.stamp-tape{
  position:absolute;top:-10px;left:50%;
  transform:translateX(-50%) rotate(-5deg);
  width:46px;height:18px;background:rgba(255,255,255,.55);
  border-left:1px dashed rgba(0,0,0,.14);
  border-right:1px dashed rgba(0,0,0,.14);
}
/* 모바일에선 카드가 화면에 꽉 차 잘린 모습이 자연스럽지만,
   화면이 카드보다 넓어지면 잘라내는 대신 진짜로 카드 밖으로 삐져나오게 한다.
   (.card/.hero 의 overflow 를 풀어야 스티커가 보인다. 다른 요소는
    각자 자기 overflow 를 갖고 있어 밖으로 새는 것이 없다) */
@media (min-width:431px){
  html,body{background:radial-gradient(130% 100% at 50% 0%,#e8e4d9 0%,#dedad0 52%,#d2ccbf 100%) fixed #dedad0}
  .card,.hero{overflow:visible}
  .card{margin:28px auto 56px;box-shadow:0 18px 60px rgba(60,50,40,.28),0 4px 16px rgba(60,50,40,.14)}
  .stamp{right:-15px}
}
.stamp-year{display:block;font:400 11px/1 var(--f-sans);color:#8a7c5c;letter-spacing:.2em}
.stamp-day{display:block;font:400 42px/1 var(--f-hand);color:#3b3527;margin-top:2px;font-weight:400}
.stamp-time{display:block;font:400 12px/1.3 var(--f-sans);color:#7b6f52;margin-top:5px}

/* ══════════ 인사말 ══════════ */
.greeting{padding:52px 38px 46px;text-align:center;background:var(--paper)}
.dday{
  display:inline-block;margin:0;padding:7px 15px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font:400 11px/1 var(--f-sans);letter-spacing:.18em;
}
.greeting-body{
  margin:26px 0 0;font:400 16.5px/2.15 var(--f-serif);
  color:var(--ink-2);text-wrap:pretty;
}
.parents{margin-top:30px;display:grid;gap:12px;font:400 14.5px/1.7 var(--f-sans);color:var(--ink-3)}
.parents p{margin:0}
.parents span{color:var(--faint);padding:0 4px}
.parents b{font-weight:400;color:var(--ink);font-size:16px}

/* ══════════ 갤러리 ══════════ */
.gallery{
  position:relative;padding:44px 0 50px;
  background:linear-gradient(#efe9dc,#e9e2d2);
  border-top:1px solid #ddd5c2;border-bottom:1px solid #ddd5c2;
}
.gal-head{text-align:center;padding:0 32px 6px}
.gal-title{margin:12px 0 0;font:400 30px/1.35 var(--f-hand);color:#3d382e}

.line{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.line::-webkit-scrollbar{display:none}
.line[data-row="0"]{margin-top:26px}
.line[data-row="1"],
.line[data-row="2"]{margin-top:14px}

.track{position:relative;display:flex;gap:16px;padding:0 26px 22px;width:max-content}
.line[data-row="2"] .track{padding-bottom:24px}

.wire{position:absolute;top:8px;left:0;right:0;height:26px;pointer-events:none}
.wire path{fill:none;stroke:#8d8471;stroke-width:1.6}

.poi{
  position:relative;flex:none;margin:0;cursor:pointer;
  width:var(--w);margin-top:var(--mt);
  padding:11px 11px 34px;
  background:var(--paper-2);
  box-shadow:0 6px 16px rgba(60,48,30,.22);
  transform:rotate(var(--rot));
  transition:box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.poi:hover{box-shadow:0 10px 22px rgba(60,48,30,.3)}
.poi img{width:100%;height:var(--h);object-fit:cover;background:var(--ph)}
.poi figcaption{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font:400 18px/1.05 var(--f-hand);color:#5c5343;
  padding:0 6px;word-break:keep-all;
}
.peg{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:16px;height:22px;background:var(--pin);
  border-radius:3px 3px 6px 6px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* ══════════ 식순 ══════════ */
.timeline{padding:52px 30px 46px;background:var(--paper)}
.slips{margin-top:30px;display:grid;gap:16px}
.slip{
  position:relative;padding:18px 20px 20px;
  box-shadow:3px 5px 14px rgba(50,40,20,.16);
}
.slip h3{margin:8px 0 0;font:400 26px/1.2 var(--f-hand);font-weight:400}
.slip p{margin:0}
.slip-time{font:400 13px/1 var(--f-sans);letter-spacing:.12em}
.slip-desc{margin-top:6px;font:400 13.5px/1.7 var(--f-sans);word-break:keep-all}

.slip-a{background:#ece4d1;transform:rotate(-.8deg)}
.slip-a .slip-time{color:#8c7d5c}
.slip-a h3{color:#3a3427}
.slip-a .slip-desc{color:#6b6353}

.slip-b{background:#dde2da;transform:rotate(.7deg)}
.slip-b .slip-time{color:#5f6b5c}
.slip-b h3{color:#2f3730}
.slip-b .slip-desc{color:#54604f}

.slip-c{background:#e9dcd5;transform:rotate(-.5deg)}
.slip-c .slip-time{color:#93705f}
.slip-c h3{color:#3b2f28}
.slip-c .slip-desc{color:#6b574d}

/* ══════════ 오시는 길 ══════════ */
.location{padding:48px 30px 44px;background:var(--paper-3);border-top:1px solid #e2dacb}
.location .sec-title{font-size:26px}
.addr{margin:14px 0 0;font:400 14px/1.85 var(--f-sans);color:var(--ink-3)}
.addr span{color:var(--mute-2);font-size:13px}

.map-grid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.map-btn{
  padding:14px 10px;text-align:center;
  background:var(--paper-2);border:1px solid var(--edge);
  font:400 14px/1 var(--f-sans);color:#443f36;
  transition:background .18s ease,border-color .18s ease;
}
.map-btn:hover{background:#fff;border-color:#c9bfa8;color:#443f36}
.copy-btn{
  grid-column:1 / -1;padding:14px 10px;text-align:center;
  background:var(--ink);color:var(--paper);border:0;
  font:400 14px/1 var(--f-sans);letter-spacing:.02em;
  transition:opacity .18s ease;
}
.copy-btn:active{opacity:.8}
.note{
  margin:22px 0 0;padding:16px 18px;
  background:var(--paper-2);border:1px dashed #d8cfba;
  font:400 13.5px/1.85 var(--f-sans);color:var(--ink-3);
}

/* ══════════ 주변 ══════════ */
.around{padding:48px 30px 50px;background:var(--paper)}
.spots{margin-top:26px;display:grid;gap:14px}
.spot{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;background:var(--paper-2);border:1px solid var(--edge-2);
  transition:border-color .18s ease;
}
.spot:hover{border-color:#cfc5b2}
.dot{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:400 22px/1 var(--f-hand);
}
.dot-g{background:#e3e6e0;color:#5f6b5e}
.dot-w{background:#e9e1d8;color:#7d6a5c}
.spot-txt b{display:block;font:400 17px/1.3 var(--f-serif);font-weight:400;color:var(--ink)}
.spot-txt em{display:block;margin-top:5px;font:400 13px/1.6 var(--f-sans);font-style:normal;color:var(--mute)}

/* ══════════ 맺음 ══════════ */
.outro{padding:56px 34px 62px;background:var(--ink);color:var(--paper-3);text-align:center}
.outro-hand{margin:0;font:400 30px/1.5 var(--f-hand);color:#f7f1e4}
.outro-when{margin:22px 0 0;font:400 14.5px/1.95 var(--f-sans);color:rgba(242,236,224,.8)}
.outro-names{margin:26px 0 0;font:400 22px/1.4 var(--f-serif);letter-spacing:.08em}

/* ══════════ 언어 전환 ══════════ */
.lang-toggle{
  position:fixed;z-index:50;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  /* 넓은 화면에선 카드(최대 430px) 오른쪽 가장자리에 붙인다 */
  right:max(14px,calc(50vw - 201px));
  padding:11px 18px;border:0;border-radius:999px;
  background:rgba(51,47,40,.92);color:var(--paper);
  font:400 13px/1 'Karla','Gowun Dodum',system-ui,sans-serif;
  letter-spacing:.08em;
  box-shadow:0 4px 14px rgba(30,22,10,.35);
  transition:opacity .18s ease;
}
.lang-toggle:active{opacity:.8}

/* ══════════ 라이트박스 ══════════ */
.lb{
  position:fixed;inset:0;z-index:60;
  background:rgba(28,24,18,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;
  visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s;
}
.lb.open{visibility:visible;opacity:1;animation:up .22s ease-out}
.lb-frame{
  position:relative;margin:0;padding:14px 14px 52px;max-width:340px;width:100%;
  background:var(--paper-2);box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lb-frame img{width:100%;max-height:62vh;object-fit:contain;background:var(--ph)}
.lb-frame figcaption{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font:400 22px/1 var(--f-hand);color:#5c5343;padding:0 10px;
}
.lb-nav{display:flex;align-items:center;gap:20px;margin-top:24px}
.lb-nav button{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(250,247,240,.35);background:transparent;
  color:var(--paper);font:400 18px/1 var(--f-sans);
  display:flex;align-items:center;justify-content:center;
}
.lb-nav button:active{background:rgba(250,247,240,.12)}
.lb-nav span{font:400 12px/1 var(--f-sans);color:rgba(250,247,240,.6);letter-spacing:.14em}
.lb-hint{margin:16px 0 0;font:400 12px/1 var(--f-sans);color:rgba(250,247,240,.45)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.01ms!important}
}