:root { --ink:#302d29; --muted:#726d65; --paper:#f7f3ed; --paper-deep:#eee8df; --sage:#788476; --sage-deep:#566251; --apricot:#d9a798; --line:#ded7cd; --serif:'Gowun Batang','Nanum Myeongjo',serif; --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { background:#e6e0d8; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#e6e0d8; font-family:var(--sans); font-size:16px; line-height:1.7; overflow-x:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
.music-toggle { position:fixed; z-index:30; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:44px; padding:0 12px; color:#fff; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:rgba(48,45,41,.54); box-shadow:0 2px 12px rgba(48,45,41,.16); backdrop-filter:blur(8px); font-size:12px; font-weight:600; letter-spacing:.02em; }
.music-toggle span[aria-hidden] { font-size:17px; line-height:1; }
.music-toggle[aria-pressed='true'] { background:rgba(86,98,81,.88); }
.invitation-shell { width:min(100%,480px); min-height:100vh; margin:0 auto; overflow:hidden; background:var(--paper); box-shadow:0 0 40px rgba(64,53,43,.12); }
.cover { position:relative; min-height:690px; height:100svh; max-height:800px; color:#fff; display:flex; align-items:flex-end; overflow:hidden; background:#827e72; }
.cover .photo-frame { position:absolute; inset:0; width:100%; height:100%; }
.cover-wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,21,18,.08) 15%,rgba(22,21,18,.02) 47%,rgba(22,21,18,.72) 100%); }
.cover-copy { position:relative; z-index:1; padding:0 28px calc(44px + env(safe-area-inset-bottom)); width:100%; text-align:center; text-shadow:0 1px 16px rgba(20,18,14,.25); }
.eyebrow,.section-kicker { margin:0 0 9px; color:var(--sage-deep); font:500 11px/1.2 var(--sans); letter-spacing:.2em; }
.cover .eyebrow { color:rgba(255,255,255,.85); }
[hidden] { display:none !important; }
h1,h2,p { margin-top:0; }
h1,h2,.when-date,.venue-name { font-family:var(--serif); font-weight:400; }
h1 { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 15px; font-size:clamp(33px,9vw,43px); letter-spacing:-.06em; }
h1 i { color:#e9c5b8; font:400 42px/1 'Pinyon Script',cursive; }
.cover-date,.cover-venue { margin:3px 0; font-size:14px; letter-spacing:.03em; }
.section { position:relative; padding:78px 28px; border-top:1px solid rgba(111,103,91,.08); }
h2 { margin:0; font-size:29px; letter-spacing:-.07em; line-height:1.3; }
.letter { min-height:550px; display:flex; flex-direction:column; justify-content:center; text-align:center; overflow:hidden; }
.letter .section-kicker { margin-bottom:10px; }
.greeting { position:relative; z-index:1; margin:36px 0 30px; white-space:pre-line; font-family:var(--serif); font-size:17px; line-height:2.05; letter-spacing:-.03em; }
.family-lines { position:relative; z-index:1; display:grid; gap:7px; color:#524e48; font-size:14px; }
.family-line { display:flex; justify-content:center; align-items:baseline; gap:12px; }
.family-line b { font-family:var(--serif); font-size:17px; font-weight:400; }
.botanical { position:absolute; pointer-events:none; user-select:none; opacity:.34; }
.botanical-letter { width:220px; right:-75px; top:-32px; transform:rotate(19deg); }
.middle-photo { padding-top:20px; padding-bottom:20px; }
.middle-photo .photo-frame { height:auto; aspect-ratio:3/4; }
.photo-frame { background:#e9e3db; overflow:hidden; }
.photo-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-frame.is-placeholder { display:grid; place-content:center; align-content:center; gap:6px; color:#7e786e; background:linear-gradient(135deg,rgba(255,255,255,.45),transparent),#e9e3db; }
.photo-frame.is-placeholder::before { content:''; display:block; width:32px; height:42px; margin:auto; border:1px solid #aaa297; background:linear-gradient(145deg,transparent 50%,rgba(120,132,118,.18) 51%); }
.photo-label { margin:0; font:500 13px/1.35 var(--sans); letter-spacing:.04em; }
.photo-ratio { margin:0; font-size:11px; color:#968f85; }
.when { text-align:center; padding-bottom:72px; }
.when-date { margin:21px 0 28px; font-size:18px; }
.calendar { width:100%; max-width:370px; margin:auto; }
.calendar-title { margin:0 0 13px; color:var(--sage-deep); font-size:14px; font-weight:600; letter-spacing:.08em; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-grid span { display:grid; place-items:center; aspect-ratio:1; min-width:0; font-size:13px; }
.calendar-grid .weekday { height:25px; color:#999186; font-size:11px; font-weight:600; }
.calendar-grid .sunday { color:#b77b72; }
.calendar-grid .wedding-day { position:relative; color:#fff; font-weight:600; z-index:0; }
.calendar-grid .wedding-day::before { content:''; position:absolute; z-index:-1; width:31px; height:31px; border-radius:50%; background:var(--sage); }
.dday { display:inline-block; margin:31px 0 0; padding:7px 15px; color:var(--sage-deep); border:1px solid rgba(120,132,118,.42); border-radius:100px; font-size:13px; }
.section-heading-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; }
.gallery-count { margin:0 0 4px; color:var(--muted); font-size:12px; }
.gallery-track { display:flex; gap:10px; margin:0 -28px; padding:0 28px 14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-slide { flex:0 0 calc(82% - 5px); padding:0; border:0; background:transparent; scroll-snap-align:start; }
.gallery-slide .photo-frame { aspect-ratio:4/5; }
.gallery-thumbnails { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.gallery-thumb { position:relative; padding:0; aspect-ratio:1; overflow:hidden; border:1px solid transparent; background:#e9e3db; }
.gallery-thumb[aria-current='true'] { border-color:var(--sage-deep); }
.gallery-thumb .photo-frame { width:100%; height:100%; }
.gallery-thumb .photo-label,.gallery-thumb .photo-ratio,.gallery-thumb .photo-frame::before { display:none; }
.gallery-thumb .photo-frame.is-placeholder::after { content:attr(data-number); color:#8e877d; font-size:11px; }
.venue-name { margin:21px 0 1px; font-size:21px; }
.venue-hall { margin:0 0 22px; color:var(--muted); font-size:14px; }
.address-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; }
.icon-button { flex:0 0 auto; min-height:44px; padding:0 10px; color:var(--sage-deep); border:0; background:transparent; font-size:13px; font-weight:600; }
.map-placeholder { position:relative; height:210px; margin:24px 0 12px; overflow:hidden; background:repeating-linear-gradient(25deg,transparent 0 30px,rgba(120,132,118,.17) 31px 33px,transparent 34px 65px),repeating-linear-gradient(-62deg,transparent 0 39px,rgba(208,166,149,.24) 40px 43px,transparent 44px 82px),#eae8e1; }
.map-placeholder::before,.map-placeholder::after { content:''; position:absolute; background:rgba(255,255,255,.68); transform:rotate(-10deg); }
.map-placeholder::before { width:150%; height:18px; top:44%; left:-20%; }.map-placeholder::after { width:18px; height:140%; top:-20%; left:57%; }
.map-placeholder span { position:absolute; z-index:1; top:50%; left:50%; width:82px; height:82px; padding-top:28px; color:#fff; background:var(--sage); border:7px solid rgba(255,255,255,.85); border-radius:50%; text-align:center; font:11px/1.2 var(--serif); transform:translate(-50%,-50%); }
.map-links { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.map-links a { display:grid; place-items:center; min-height:44px; color:#484740; border:1px solid var(--line); text-decoration:none; font-size:12px; }
.transport { margin:30px 0 0; }
.transport div { padding:16px 0; border-top:1px solid var(--line); }.transport div:last-child { border-bottom:1px solid var(--line); }.transport dt { margin-bottom:4px; color:var(--sage-deep); font-size:13px; font-weight:600; }.transport dd { margin:0; color:#5e5952; font-size:14px; line-height:1.6; }
.contact-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:24px -28px -78px; background:var(--line); }.contact-card { padding:20px 18px; background:var(--paper); }.contact-card p { margin:0; }.contact-role { color:var(--sage-deep); font-size:12px; }.contact-name { margin:2px 0 13px !important; font-family:var(--serif); font-size:18px; }.contact-actions { display:flex; gap:7px; }.contact-actions a { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 10px; color:#55514c; border:1px solid var(--line); text-decoration:none; font-size:12px; }
.section-intro { margin:16px 0 25px; color:var(--muted); font-size:14px; }
.account-groups { display:grid; gap:9px; }.account-group { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.account-group summary { display:flex; align-items:center; justify-content:space-between; min-height:61px; list-style:none; font-family:var(--serif); font-size:18px; cursor:pointer; }.account-group summary::-webkit-details-marker { display:none; }.account-group summary::after { content:'+'; color:var(--sage-deep); font:300 25px/1 var(--sans); }.account-group[open] summary::after { content:'−'; }.account-list { padding-bottom:8px; }.account-row { padding:15px 0; border-top:1px solid var(--line); }.account-holder { margin:0 0 3px; font-size:13px; }.account-number { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#5a554e; font-size:14px; }.account-copy { min-width:44px; min-height:44px; color:var(--sage-deep); border:0; background:transparent; font-size:12px; font-weight:600; }.kakaopay-link { display:inline-block; margin-top:5px; color:var(--sage-deep); font-size:12px; }
.primary-button,.secondary-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 18px; border:0; text-decoration:none; font-size:14px; }.primary-button { color:#fff; background:var(--sage-deep); }.primary-button span { font-size:18px; }.secondary-button { color:#45413b; background:transparent; border:1px solid var(--line); }.share-actions { display:grid; gap:8px; margin-top:24px; }
.closing { position:relative; min-height:270px; padding:101px 28px 55px; overflow:hidden; color:#fff; background:var(--sage-deep); text-align:center; }.closing p { position:relative; z-index:1; margin:0; font-family:var(--serif); font-size:17px; }.closing .closing-names { margin-top:20px; color:rgba(255,255,255,.74); font-size:14px; }.botanical-footer { width:230px; top:-77px; right:-55px; opacity:.21; filter:grayscale(1) brightness(4); transform:rotate(31deg); }
.lightbox { position:fixed; z-index:40; inset:0; display:grid; grid-template-columns:48px 1fr 48px; grid-template-rows:1fr 50px; align-items:center; color:#fff; background:rgba(19,18,16,.96); touch-action:pan-y; }.lightbox[hidden] { display:none; }.lightbox-image { grid-column:1/4; width:100%; height:100%; min-height:0; }.lightbox-image img,.lightbox-image .photo-frame { width:100%; height:100%; object-fit:contain; background:transparent; }.lightbox-image .photo-frame.is-placeholder { color:#bdb8ae; }.lightbox-close,.lightbox-prev,.lightbox-next { z-index:1; color:#fff; border:0; background:rgba(0,0,0,.12); }.lightbox-close { position:absolute; top:18px; right:18px; width:44px; height:44px; font-size:34px; line-height:1; }.lightbox-prev,.lightbox-next { width:48px; height:70px; font-size:38px; }.lightbox-prev { grid-column:1; grid-row:1; }.lightbox-next { grid-column:3; grid-row:1; }.lightbox p { grid-column:1/4; grid-row:2; margin:0; text-align:center; font-size:13px; }
.toast { position:fixed; z-index:20; left:50%; bottom:28px; padding:11px 18px; color:#fff; background:#363832; border-radius:100px; font-size:13px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .22s,transform .22s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (min-width:481px) { body { padding:30px 0; }.invitation-shell { border-radius:3px; }.cover { border-radius:3px 3px 0 0; } }
@media (max-width:350px) { .section { padding-left:22px; padding-right:22px; }.gallery-track { margin-left:-22px; margin-right:-22px; padding-left:22px; }.contact-list { margin-left:-22px; margin-right:-22px; }.cover-copy { padding-left:22px; padding-right:22px; }.gallery-thumbnails { gap:5px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal,.toast { transition:none; }.reveal { opacity:1; transform:none; } }