:root { --ink: #1f2226; --paper: #f4f3ef; --line: rgba(31,34,38,.18); --accent: #c75e53; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans KR", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header { height: 72px; padding: 0 clamp(22px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 700 17px/1 "Playfair Display", serif; letter-spacing: .16em; }
.header-cta, .eyebrow, .image-caption, .hero-note, .card-meta, .card-open, .site-footer { font-size: 10px; letter-spacing: .13em; font-weight: 600; }
.header-cta { display: flex; gap: 12px; align-items: center; }
.header-cta span { font-size: 15px; }
.showcase-hero { min-height: min(780px, calc(100vh - 72px)); padding: clamp(58px, 8vw, 130px) clamp(22px, 10vw, 180px); display: grid; grid-template-columns: 1fr minmax(300px, 420px) 106px; align-items: center; gap: clamp(36px, 7vw, 116px); overflow: hidden; background: #dbe6e7; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 20px; color: #5b6566; }
.hero-copy h1, .section-heading h2, .closing-cta h2 { margin: 0; font: 400 clamp(42px, 5.3vw, 84px)/1.12 "Gowun Batang", "Nanum Myeongjo", serif; letter-spacing: -.05em; }
h1 em, h2 em { font-family: "Playfair Display", serif; font-weight: 500; }
.hero-description { margin: 28px 0 34px; color: #4d5659; font-size: 14px; line-height: 2; }
.primary-link { display: inline-flex; align-items: center; gap: 22px; border-bottom: 1px solid currentColor; padding-bottom: 9px; font-size: 12px; font-weight: 600; }
.primary-link span { font-size: 17px; }
.hero-image-frame { position: relative; aspect-ratio: .72; background: #fff; padding: 11px 11px 35px; box-shadow: 18px 20px 0 rgba(86, 112, 110, .16); transform: rotate(2.7deg); }
.hero-image-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hero-stamp { position: absolute; z-index: 1; right: -34px; bottom: 57px; width: 74px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: #d67a72; font: 700 15px/1.05 "Playfair Display", serif; transform: rotate(-12deg); }
.hero-stamp span { font: 9px "Noto Sans KR", sans-serif; letter-spacing: .08em; }
.image-caption { position: absolute; bottom: 12px; right: 15px; margin: 0; font-family: "Playfair Display", serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 400; }
.hero-note { align-self: end; padding-bottom: 4px; color: #566366; line-height: 1.7; }
.hero-note span { display: block; padding-top: 12px; font-size: 17px; }
.intro-band { padding: 48px clamp(22px, 10vw, 180px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-bottom: 1px solid var(--line); background: #f6f5f0; }
.intro-band p { margin: 0; max-width: 650px; font: 400 clamp(20px, 2.2vw, 31px)/1.65 "Gowun Batang", serif; letter-spacing: -.04em; }
.intro-band strong { font-weight: 700; color: #bf5f53; }
.intro-band span { color: #697071; font: 600 10px "Noto Sans KR", sans-serif; letter-spacing: .16em; white-space: nowrap; }
.template-section { padding: 120px clamp(22px, 8vw, 140px) 135px; background: #f6f5f0; }
.section-heading { max-width: 620px; margin-bottom: 65px; }
.section-heading h2 { font-size: clamp(37px, 4.1vw, 64px); }
.section-heading > p:last-child { margin: 21px 0 0; color: #71716f; font-size: 13px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.template-card { min-height: 490px; position: relative; padding: 15px 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: #f6f5f0; transition: background .35s ease, color .35s ease; }
.template-card:hover { background: #202528; color: #f8f6f0; }
.card-image { height: 274px; overflow: hidden; margin-bottom: 19px; background: #ddd; }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.template-card:hover .card-image img { transform: scale(1.05); }
.card-meta { display: flex; justify-content: space-between; margin-bottom: 11px; color: #737b7a; }
.template-card:hover .card-meta { color: #b9c4bf; }
.template-card h3 { margin: 0; font: 400 29px/1 "Playfair Display", serif; letter-spacing: -.04em; }
.template-card p { max-width: 270px; min-height: 43px; margin: 13px 0 16px; font: 12px/1.75 "Gowun Dodum", sans-serif; color: #686c6b; }
.template-card:hover p { color: #d4d3ce; }
.card-open { position: absolute; right: 16px; bottom: 20px; }
.card-open b { display: inline-block; margin-left: 6px; font-size: 15px; font-weight: 400; }
.card-arch .card-image { border-radius: 200px 200px 0 0; }.card-poster .card-image { filter: grayscale(1); }.card-lettering .card-image { transform: rotate(-2deg) scale(.95); }.card-sealing .card-image { border: 8px solid #e4dbcc; }.card-casual .card-image { border-radius: 50% 50% 7px 7px; }.card-seoul .card-image { clip-path: polygon(0 0,100% 0,100% 86%,0 100%); }.card-kyoto .card-image { width: 78%; margin-left: auto; }.card-letter .card-image { box-shadow: 10px 10px 0 #d8d3c7; }.card-season .card-image { border-radius: 50%; height: 255px; width: 255px; margin-left: auto; margin-right: auto; }
.closing-cta { padding: 125px 24px; text-align: center; color: #f7f3ed; background: #253535; }.closing-cta .eyebrow { color: #b8c8c4; }.closing-cta h2 { font-size: clamp(37px, 5vw, 70px); }.closing-cta > p:not(.eyebrow) { margin: 25px 0 32px; color: #c2ceca; font-size: 13px; }.light { color: #fff; }.site-footer { padding: 25px; text-align: center; color: #e2e1da; background: #182525; }

/* Invitation preview */
.preview-page { min-height: 100vh; overflow-x:hidden; background: #e7e8e3; }.preview-nav { position: sticky; z-index: 5; top: 0; height: 60px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; color: #4b504d; border-bottom: 1px solid rgba(47,53,50,.15); background: rgba(231,232,227,.92); backdrop-filter: blur(8px); font-size: 11px; }.preview-nav a { display: flex; gap: 6px; align-items: center; }.preview-nav p { margin: 0; letter-spacing: .12em; font-size: 10px; font-weight: 600; }.preview-nav button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; }
.preview-main { max-width: 1110px; padding: 46px 24px 90px; margin: auto; display: flex; align-items: flex-start; justify-content: center; gap: 46px; }.style-picker { position: sticky; top: 105px; width: 176px; }.style-picker > p { margin: 0 0 14px; color: #777e78; font: 600 10px "Noto Sans KR",sans-serif; letter-spacing: .12em; }.style-picker a { display: block; padding: 8px 0; border-bottom: 1px solid rgba(47,53,50,.12); color: #747874; font-size: 12px; }.style-picker a span { display: inline-block; width: 26px; color: #a5aaa5; font-size: 9px; }.style-picker a:hover, .style-picker a.active { color: #222; font-weight: 700; }.style-picker a.active span { color: #bd655d; }
.invitation { --i-paper: #fffdf9; --i-ink: #282622; --i-muted: #6e6b65; --i-line: #dbd5cc; --i-accent: #bd655d; width: 100%; max-width: 460px; overflow: hidden; color: var(--i-ink); background: var(--i-paper); box-shadow: 0 20px 60px rgba(33,42,36,.17); }.invite-hero { padding: 62px 22px 54px; text-align: center; }.invite-kicker, .section-mark { margin: 0; color: var(--i-accent); font: 600 9px "Noto Sans KR", sans-serif; letter-spacing: .19em; }.hero-ornament { width: 27px; height: 27px; margin: 18px auto 15px; border: 1px solid var(--i-accent); border-radius: 50%; position: relative; }.hero-ornament:after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--i-accent); border-radius: 50%; }.invite-hero h1 { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; font: 700 43px/1 "Nanum Myeongjo", serif; letter-spacing: -.1em; }.invite-hero h1 i { color: var(--i-accent); font: 400 25px/1 "Playfair Display",serif; }.invite-date { margin: 17px 0 30px; color: var(--i-muted); font-size: 10px; letter-spacing: .07em; }.invite-image-wrap { height: 500px; overflow: hidden; }.invite-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }.invite-intro { margin: 31px 0 0; font: 15px/2.05 "Gowun Batang",serif; letter-spacing: -.04em; }.invite-section { padding: 61px 32px; text-align: center; border-top: 1px solid var(--i-line); }.invite-section h2 { margin: 18px 0 17px; font: 700 25px/1.35 "Gowun Batang", "Nanum Myeongjo", serif; letter-spacing: -.07em; }.message-section > p:not(.section-mark), .venue-section > p:not(.section-mark) { margin: 0; color: var(--i-muted); font: 13px/2.15 "Gowun Batang",serif; }.family-names { display: flex; justify-content: center; gap: 45px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--i-line); }.family-names p { margin: 0; font: 11px "Gowun Dodum", sans-serif; }.family-names b { color: var(--i-accent); margin-right: 3px; }.family-names span { color: var(--i-muted); font-size: 9px; }.gallery-section { padding-left: 0; padding-right: 0; }.gallery-section .section-mark { margin-bottom: 25px; }.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }.gallery img { width: 100%; aspect-ratio: .85; object-fit: cover; display: block; }.date-section h2 { font: 500 30px "Playfair Display",serif; letter-spacing: .06em; }.date-section > p:not(.section-mark) { margin: -5px 0 27px; color: var(--i-muted); font-size: 11px; }.calendar { max-width: 315px; margin: auto; color: var(--i-muted); font-size: 10px; }.calendar-head, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 13px; }.calendar-head { padding-bottom: 16px; border-bottom: 1px solid var(--i-line); color: var(--i-accent); }.calendar-days { padding-top: 16px; }.calendar-days span { height: 20px; display: grid; place-items: center; }.calendar-days .wedding-day { border-radius: 50%; color: var(--i-paper); background: var(--i-accent); }.location-button { display: inline-flex; gap: 18px; margin: 27px 0; padding: 12px 19px; border: 1px solid var(--i-line); font-size: 11px; }.location-button span { color: var(--i-accent); font-size: 14px; }.transport { padding-top: 21px; border-top: 1px solid var(--i-line); text-align: left; }.transport p { margin: 8px 0; color: var(--i-muted); font-size: 10px; }.transport b { display: inline-block; width: 50px; color: var(--i-ink); }.contact-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--i-line); border-left: 1px solid var(--i-line); margin-top: 20px; }.contact-grid div { padding: 22px 8px; border-right: 1px solid var(--i-line); border-bottom: 1px solid var(--i-line); }.contact-grid span, .contact-grid b, .contact-grid a { display: block; }.contact-grid span { color: var(--i-accent); font: 600 8px "Noto Sans KR",sans-serif; letter-spacing: .13em; }.contact-grid b { margin: 8px 0; font: 700 16px "Gowun Batang",serif; }.contact-grid a { font-size: 10px; color: var(--i-muted); text-decoration: underline; text-underline-offset: 3px; }.invite-ending { padding: 58px 20px; color: #eeeae4; text-align: center; background: var(--i-ink); }.invite-ending p { margin: 0 0 15px; font: 13px "Gowun Batang",serif; }.invite-ending b { font: 600 9px "Noto Sans KR",sans-serif; letter-spacing: .17em; }

/* Each style modifies the same functional invitation, not merely its cover. */
.style-classic { --i-paper:#f8f4ea; --i-ink:#2a2926; --i-muted:#81786b; --i-line:#d5c8b3; --i-accent:#9f7e49; }.style-classic .invite-hero { padding-top: 74px; }.style-classic .invite-image-wrap { padding: 8px; border: 1px solid var(--i-line); height: 475px; }.style-classic .invite-image-wrap img { filter: sepia(.14); }.style-classic .hero-ornament { border-radius: 0; transform: rotate(45deg); }.style-classic .hero-ornament:after { border-radius: 0; }.style-classic .invite-section h2 { font-family: "Nanum Myeongjo",serif; }
.style-arch { --i-paper:#fdf8f4; --i-ink:#4b3d37; --i-muted:#8d7970; --i-line:#e6d6cb; --i-accent:#d78678; }.style-arch .invite-image-wrap { border-radius: 230px 230px 0 0; }.style-arch .gallery-photo:nth-child(odd) img { border-radius: 120px 120px 0 0; }.style-arch .invite-ending { border-radius: 120px 120px 0 0; }.style-arch .hero-ornament { border-radius: 50% 50% 0 50%; }
.style-poster { --i-paper:#f5f246; --i-ink:#171717; --i-muted:#474733; --i-line:#171717; --i-accent:#ec4234; }.style-poster .invite-hero { padding: 31px 14px 28px; }.style-poster .invite-kicker,.style-poster .section-mark { color: var(--i-ink); font-weight: 700; }.style-poster .invite-hero h1 { margin: 12px 0; font-family:"Noto Sans KR",sans-serif; font-size: 48px; font-weight: 700; }.style-poster .invite-hero h1 i { color: var(--i-ink); }.style-poster .hero-ornament { display:none; }.style-poster .invite-image-wrap { height: 555px; filter: grayscale(1) contrast(1.1); }.style-poster .invite-intro { margin: 23px 15px 0; font-family:"Noto Sans KR",sans-serif; font-size: 12px; font-weight:600; }.style-poster .invite-section { border-width: 2px; }.style-poster .invite-section h2 { font-family:"Noto Sans KR",sans-serif; font-weight: 700; }.style-poster .invite-ending { background: var(--i-accent); color: var(--i-ink); }
.style-lettering { --i-paper:#fffafa; --i-ink:#5a4348; --i-muted:#9b787e; --i-line:#eedde0; --i-accent:#d67e8d; }.style-lettering .invite-hero h1 { font-family:"Playfair Display",serif; font-style:italic; font-size: 48px; }.style-lettering .invite-image-wrap { height:450px; transform:rotate(-2deg) scale(.93); box-shadow:10px 10px 0 #f2e3e5; }.style-lettering .invite-intro { margin-top: 13px; }.style-lettering .invite-section h2 { font-family:"Gowun Dodum",sans-serif; font-size:22px; }.style-lettering .gallery { padding: 0 20px; gap:10px; }.style-lettering .gallery img { transform:rotate(2deg); }.style-lettering .gallery-photo:nth-child(even) img { transform:rotate(-2deg); }
.style-sealing { --i-paper:#eee5d5; --i-ink:#3e3329; --i-muted:#796958; --i-line:#cbbba8; --i-accent:#a5483b; }.style-sealing .invite-hero { margin: 11px; padding: 55px 22px 48px; border: 1px solid var(--i-line); }.style-sealing .hero-ornament { width:48px;height:48px;background:var(--i-accent);border:0; }.style-sealing .hero-ornament:after { inset:10px; border-color:#eac7b7; }.style-sealing .invite-image-wrap { height:460px; border:8px solid #e5dac8; }.style-sealing .invite-section { margin: 0 11px; border-left:1px solid var(--i-line);border-right:1px solid var(--i-line); }.style-sealing .invite-ending { margin:0 11px 11px; background:#47372d; }
.style-casual { --i-paper:#edf3ef; --i-ink:#25473e; --i-muted:#608076; --i-line:#ccded5; --i-accent:#ed745e; }.style-casual .invite-hero { padding-top:48px; }.style-casual .invite-hero h1 { font-family:"Gowun Dodum",sans-serif; font-size:38px; }.style-casual .invite-image-wrap { height:420px; border-radius: 210px 210px 18px 18px; }.style-casual .hero-ornament { background:var(--i-accent);border:0; }.style-casual .hero-ornament:after { border-color:#fff; }.style-casual .gallery img { border-radius:16px; }.style-casual .location-button { border-radius:99px; background:var(--i-accent);color:#fff;border:0; }.style-casual .invite-ending { background:#335f53; }
.style-seoul { --i-paper:#f7f7f5; --i-ink:#15171a; --i-muted:#6d7376; --i-line:#cdd0d0; --i-accent:#333d47; }.style-seoul .invite-hero { padding:27px 0 43px; }.style-seoul .invite-kicker { margin-bottom: 16px; }.style-seoul .hero-ornament { display:none; }.style-seoul .invite-hero h1 { font-family:"Noto Sans KR",sans-serif; font-weight:700; font-size:38px;letter-spacing:-.13em; }.style-seoul .invite-date { padding:0 20px; }.style-seoul .invite-image-wrap { height:535px; clip-path: polygon(0 0,100% 0,100% 89%,0 100%); }.style-seoul .invite-intro { padding:0 20px; font-family:"Noto Sans KR",sans-serif; font-size:12px; }.style-seoul .invite-section h2 { font-family:"Noto Sans KR",sans-serif; font-size:22px; }.style-seoul .gallery { grid-template-columns: 1.25fr .75fr; }.style-seoul .gallery-photo:first-child { grid-row:span 2; }.style-seoul .gallery-photo:first-child img { aspect-ratio:auto; height:100%; }.style-seoul .invite-ending { background:#15171a; }
.style-busan { --i-paper:#f2f4f2; --i-ink:#213840; --i-muted:#63777d; --i-line:#cbd8d6; --i-accent:#5c98a3; }.style-busan .invite-hero { padding:0 0 50px; }.style-busan .invite-kicker { padding-top:28px; }.style-busan .hero-ornament { display:none; }.style-busan .invite-hero h1 { margin:15px 0; font:500 48px "Playfair Display",serif; }.style-busan .invite-image-wrap { height:585px; }.style-busan .invite-intro { padding:0 20px; }.style-busan .gallery { grid-template-columns:1fr; gap:12px; padding:0 24px; }.style-busan .gallery img { aspect-ratio:1.35; }.style-busan .gallery-photo:nth-child(even) { width:78%; margin-left:auto; }.style-busan .invite-ending { background:#315967; }
.style-kyoto { --i-paper:#f1eee6; --i-ink:#39342e; --i-muted:#777066; --i-line:#d5cfc1; --i-accent:#a55242; }.style-kyoto .invite-hero { padding-top:57px; }.style-kyoto .invite-kicker { writing-mode:vertical-rl; position:absolute; margin-left:4px; }.style-kyoto .hero-ornament { width:20px;height:20px;border-radius:0;transform:rotate(45deg); }.style-kyoto .hero-ornament:after { display:none; }.style-kyoto .invite-hero h1 { font-family:"Nanum Myeongjo",serif; }.style-kyoto .invite-image-wrap { width:79%; height:530px; margin-left:auto; }.style-kyoto .gallery { grid-template-columns: 1fr 1fr; padding:0 44px; }.style-kyoto .gallery-photo:nth-child(odd) { margin-top:25px; }.style-kyoto .invite-ending { background:#574a3e; }
.style-letter { --i-paper:#fbf8f0; --i-ink:#4e483e; --i-muted:#81796d; --i-line:#ddd5c6; --i-accent:#977044; }.style-letter .invite-hero { margin:17px; padding:42px 18px 46px; border:1px solid var(--i-line); }.style-letter .hero-ornament { width:42px;height:29px;border-radius:0; }.style-letter .hero-ornament:after { inset:4px; border-radius:0; }.style-letter .invite-hero h1 { font: 500 41px "Playfair Display",serif; }.style-letter .invite-image-wrap { height:440px; }.style-letter .invite-intro { text-align:left; padding:0 10px; }.style-letter .message-section > p:not(.section-mark) { text-align:left; padding-left:17px; border-left:2px solid var(--i-accent); }.style-letter .gallery { padding:0 25px; gap:11px; }.style-letter .gallery img { box-shadow:4px 5px 0 #e2dacb; }.style-letter .invite-ending { background:#51483b; }
.style-season { --i-paper:#fff8f2; --i-ink:#4f4741; --i-muted:#8b756c; --i-line:#eedfd3; --i-accent:#d96e7b; }.style-season .invite-hero { padding-top:57px; background:linear-gradient(#fff0f1, var(--i-paper)); }.style-season .hero-ornament { border-color:#e4a5ae; }.style-season .hero-ornament:after { border-color:#e4a5ae; }.style-season .invite-image-wrap { width:330px; max-width:100%; height:330px; margin:auto; border-radius:50%; border:10px solid #f7e3df; }.style-season .invite-hero h1 { font-family:"Gowun Dodum",sans-serif; font-size:36px; }.style-season .gallery { grid-template-columns:repeat(4,1fr); }.style-season .gallery img { aspect-ratio:1; border-radius:50%; }.style-season .invite-ending { background:#b96270; }
.toast { position: fixed; z-index:9; left:50%; bottom:25px; padding:12px 18px; color:#fff; background:#282d2c; font-size:11px; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.2s; }.toast.visible { opacity:1;transform:translate(-50%,0); }
.family-names p { display: flex; flex-direction: column; gap: 8px; }.family-names span { font-size: 10px; }.family-names b { margin: 0; font-size: 16px; }.transport span { display: inline-block; padding-left: 50px; }
.invitation .gallery-photo { display: block; background: color-mix(in srgb, var(--i-paper) 88%, var(--i-line)); }.invitation .gallery-photo img { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
.invitation .gallery { display: block; padding: 0; }.gallery-viewport { overflow: hidden; touch-action: pan-y; }.gallery-track { display: flex; transition: transform .38s cubic-bezier(.22,.75,.25,1); will-change: transform; }.invitation .gallery-photo { flex: 0 0 100%; margin: 0; padding: 0; border: 0; }.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 20px 0; }.gallery-arrow, .gallery-dots button { border: 0; color: var(--i-ink); background: transparent; cursor: pointer; }.gallery-arrow { width: 26px; height: 26px; padding: 0; border: 1px solid var(--i-line); border-radius: 50%; font-size: 14px; line-height: 1; }.gallery-dots { display: flex; align-items: center; gap: 7px; }.gallery-dots button { width: 5px; height: 5px; padding: 0; border-radius: 50%; opacity: .28; background: var(--i-ink); }.gallery-dots button.active { width: 20px; border-radius: 9px; opacity: 1; background: var(--i-accent); }.gallery-count { margin: 11px 0 0; color: var(--i-muted); font-size: 9px; letter-spacing: .12em; }
.open-photo, .gallery-photo { cursor: zoom-in; }.open-photo:focus-visible, .gallery-photo:focus-visible { outline: 2px solid var(--i-accent); outline-offset: 3px; }.gallery-photo { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }.preview-page img, .showcase-page img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }.modal-open { overflow: hidden; }.photo-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; width: 100vw; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; background: rgba(12,15,16,.96); touch-action: none; }.photo-modal[hidden] { display: none; }.photo-modal img { display: block; width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }.photo-modal-close { position: fixed; top: max(13px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 1; width: 37px; height: 37px; padding: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: #fff; background: rgba(12,15,16,.28); cursor: pointer; font-size: 28px; line-height: 1; }
@media (max-width: 760px) { .showcase-hero { min-height:auto; padding:61px 24px 70px; grid-template-columns:1fr; gap:43px; }.hero-copy h1 { font-size:45px; }.hero-image-frame { width:min(79vw,370px); justify-self:center; }.hero-note { display:none; }.intro-band { display:block; padding:39px 24px; }.intro-band span { display:block; margin-top:21px; }.template-section { padding:79px 16px 86px; }.section-heading { padding:0 8px; margin-bottom:40px; }.template-grid { grid-template-columns:1fr 1fr; }.template-card { min-height:400px; padding:10px 10px 15px; }.card-image { height:190px; margin-bottom:14px; }.template-card h3 { font-size:24px; }.template-card p { min-height:63px; margin:8px 0; font-size:11px; }.card-open { right:10px; bottom:15px; }.card-season .card-image { width:174px; height:174px; }.closing-cta { padding:88px 22px; }.preview-nav { padding:0 16px; }.preview-nav p { display:none; }.preview-main { padding:0; display:block; }.style-picker { position:relative; top:auto; width:auto; padding:15px 16px 14px; overflow-x:auto; white-space:nowrap; background:#e7e8e3; }.style-picker > p { display:none; }.style-picker div { display:flex; gap:16px; }.style-picker a { flex:0 0 auto; padding:4px 0; border:0; }.style-picker a span { width:auto; margin-right:4px; }.invitation { max-width:none; box-shadow:none; }.invite-image-wrap { height: min(108vw,500px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.template-card,.card-image img,.gallery-track { transition:none; } }
.photo-modal-count { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; margin: 0; color: rgba(255,255,255,.86); font: 11px/1 "Noto Sans KR",sans-serif; letter-spacing: .12em; transform: translateX(-50%); pointer-events: none; }

/* Curated two-template collection */
.template-grid { max-width: 930px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-lettering-story .card-image { border-radius: 220px 220px 4px 4px; }
.card-lettering-story:after { content: "with all my heart"; position: absolute; z-index: 1; top: 275px; left: 38px; color: #fff; font: 43px/1 "Allura", cursive; text-shadow: 0 2px 13px rgba(71,50,45,.28); transform: rotate(-7deg); }
.card-illustrated-story .card-image { background: #dce7df; }
.card-winter-scene { position: relative; width: 100%; height: 100%; overflow: hidden; color: #42584a; background: linear-gradient(#dce8e1 0 62%,#f8f0e5 62%); }
.card-winter-scene:after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -12%; height: 46%; border-radius: 50% 50% 0 0; background: #f8f4ea; }
.card-winter-scene b { position: absolute; z-index: 2; top: 42%; left: 50%; font: 400 35px/1.05 "Allura",cursive; text-align: center; transform: translate(-50%,-50%); }
.card-moon { position: absolute; top: 24px; right: 31px; width: 48px; height: 48px; border-radius: 50%; background: #fff8dc; box-shadow: 0 0 28px rgba(255,248,220,.8); }
.card-tree { position: absolute; z-index: 1; bottom: 14%; width: 2px; height: 41%; background: #6e8275; }
.card-tree:before,.card-tree:after { content:""; position:absolute; left:50%; width:65px; height:100px; border-left:1px solid #6e8275; border-right:1px solid #6e8275; transform:translateX(-50%); clip-path:polygon(50% 0,100% 100%,0 100%); }
.tree-left { left: 19%; }.tree-right { right: 17%; height: 47%; }
.card-couple { position: absolute; z-index: 3; left: 50%; bottom: 18%; color: #a76565; font-size: 20px; transform: translateX(-50%); }
.card-snow { position: absolute; z-index: 2; color: #fff; animation: cardSnow 4s linear infinite; }.snow-a { left:17%; top:10%; }.snow-b { left:58%; top:7%; animation-delay:-1.4s; }.snow-c { left:76%; top:31%; animation-delay:-2.7s; }
@keyframes cardSnow { 0% { transform:translateY(-12px) rotate(0); opacity:0; } 25% { opacity:1; } 100% { transform:translateY(130px) rotate(140deg); opacity:0; } }

.hero-script,.illustration-scene { display: none; }
.style-lettering-story { --i-paper:#fbf7f1; --i-ink:#4a3e3a; --i-muted:#88766e; --i-line:#e7d9d0; --i-accent:#b36f72; }
.style-lettering-story .invite-hero { position: relative; padding: 62px 22px 58px; background: radial-gradient(circle at 12% 7%,rgba(231,201,196,.34),transparent 25%),#fbf7f1; }
.style-lettering-story .invite-kicker { color:#876d66; letter-spacing:.3em; }
.style-lettering-story .hero-ornament { width: 54px; height: 17px; margin: 20px auto 7px; border: 0; border-top: 1px solid var(--i-accent); border-radius: 50%; transform: rotate(-5deg); }
.style-lettering-story .hero-ornament:after { content:"♥"; inset:-10px auto auto 21px; border:0; color:var(--i-accent); font-size:9px; background:var(--i-paper); }
.style-lettering-story .invite-hero h1 { display:none; }
.style-lettering-story .hero-script { display:block; margin: 0; color:#6d514e; font:400 58px/1 "Allura",cursive; letter-spacing:0; }
.style-lettering-story .hero-script i { padding:0 5px; color:var(--i-accent); font-style:normal; }
.style-lettering-story .invite-date { margin: 8px 0 29px; font-family:"Cormorant Garamond",serif; font-size:12px; letter-spacing:.18em; }
.style-lettering-story .invite-image-wrap { position:relative; height:540px; border-radius:220px 220px 3px 3px; box-shadow:0 16px 45px rgba(111,79,70,.12); }
.style-lettering-story .invite-image-wrap:after { content:"forever starts here"; position:absolute; right:16px; bottom:12px; color:#fff; font:32px/1 "Allura",cursive; text-shadow:0 1px 8px rgba(55,40,36,.35); transform:rotate(-5deg); pointer-events:none; }
.style-lettering-story .invite-intro { margin-top:38px; color:#675652; font-size:14px; line-height:2.25; }
.style-lettering-story .invite-section { padding-top:72px; padding-bottom:72px; }
.style-lettering-story .invite-section h2 { color:#5d4846; font-weight:400; }
.style-lettering-story .section-mark { font-family:"Cormorant Garamond",serif; font-size:11px; font-weight:500; }
.style-lettering-story .message-section:before { content:"with love"; display:block; margin-bottom:14px; color:#c38a8a; font:35px/1 "Allura",cursive; }
.style-lettering-story .family-names { border-top:0; }
.style-lettering-story .gallery-section { background:#f5ece7; }
.style-lettering-story .date-section { background:linear-gradient(180deg,#fbf7f1,#f7eee9); }
.style-lettering-story .calendar-days .wedding-day { box-shadow:0 0 0 6px rgba(179,111,114,.12); }
.style-lettering-story .invite-ending { background:#7e5d5c; }

.style-illustrated-story { --i-paper:#f9f4e9; --i-ink:#33473c; --i-muted:#6f7c71; --i-line:#d8ddd2; --i-accent:#a75f61; }
.style-illustrated-story .invite-hero { padding:54px 18px 50px; background:#f9f4e9; }
.style-illustrated-story .invite-kicker { color:#657a6a; }
.style-illustrated-story .hero-ornament { width:34px; height:12px; margin:17px auto 10px; border:0; }
.style-illustrated-story .hero-ornament:before,.style-illustrated-story .hero-ornament:after { content:""; position:absolute; top:5px; width:15px; height:1px; border:0; border-radius:0; background:var(--i-accent); transform:rotate(28deg); }
.style-illustrated-story .hero-ornament:before { left:2px; }.style-illustrated-story .hero-ornament:after { right:2px; transform:rotate(-28deg); }
.style-illustrated-story .invite-hero h1 { font:400 36px/1.1 "Gowun Batang",serif; letter-spacing:-.08em; }
.style-illustrated-story .invite-hero h1 i { color:var(--i-accent); }
.style-illustrated-story .invite-date { margin:14px 0 24px; font-family:"Cormorant Garamond",serif; font-size:12px; letter-spacing:.17em; }
.style-illustrated-story .illustration-scene { display:block; position:relative; max-width:390px; margin:0 auto; }
.style-illustrated-story .illustration-scene svg { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(64,83,70,.1)); }
.style-illustrated-story .illustration-scene p { position:absolute; left:50%; top:28%; margin:0; color:#53685a; font:11px/1.6 "Cormorant Garamond",serif; letter-spacing:.2em; text-transform:uppercase; transform:translateX(-50%); }
.style-illustrated-story .illustration-scene p span { display:block; color:#9b6564; font:33px/1 "Allura",cursive; letter-spacing:0; text-transform:none; white-space:nowrap; }
.style-illustrated-story .invite-image-wrap { display:none; }
.style-illustrated-story .invite-intro { font-size:13px; }
.style-illustrated-story .winter-moon { animation:moonGlow 3.5s ease-in-out infinite alternate; transform-origin:center; }
.style-illustrated-story .snow-layer { animation:snowFall 7s linear infinite; }.style-illustrated-story .snow-front { animation-duration:5s; animation-delay:-2s; }
.style-illustrated-story .winter-trees { stroke-width:2; animation:treeSway 4s ease-in-out infinite alternate; transform-origin:50% 100%; }
.style-illustrated-story .winter-couple { animation:coupleFloat 3s ease-in-out infinite alternate; transform-origin:50% 80%; }
.style-illustrated-story .heart-stroke { stroke-dasharray:90; stroke-dashoffset:90; animation:drawHeart 3s ease-in-out infinite; }
.style-illustrated-story .invite-section { background:#f9f4e9; }
.style-illustrated-story .message-section { background:#e8efe8; }
.style-illustrated-story .message-section:before { content:"✦"; display:block; margin-bottom:12px; color:#b47b76; font-size:18px; }
.style-illustrated-story .gallery-section { background:#f3eadf; }
.style-illustrated-story .date-section { background:#dfeae2; }
.style-illustrated-story .location-button { border-radius:99px; background:#405b4b; color:#fff; }
.style-illustrated-story .invite-ending { color:#f6f2e8; background:#405b4b; }
@keyframes snowFall { from { transform:translateY(-30px); } to { transform:translateY(160px); } }
@keyframes moonGlow { to { opacity:.72; transform:scale(1.08); } }
@keyframes treeSway { to { transform:skewX(.8deg); } }
@keyframes coupleFloat { to { transform:translateY(-3px); } }
@keyframes drawHeart { 0%,15% { stroke-dashoffset:90; opacity:0; } 55%,85% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }

.reveal-ready { opacity:0; transform:translateY(36px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.25,1); }.reveal-ready.is-visible { opacity:1; transform:none; }
.music-toggle { position:fixed; z-index:12; right:18px; bottom:18px; display:flex; align-items:center; gap:8px; min-width:101px; height:38px; padding:0 13px; border:1px solid rgba(255,255,255,.5); border-radius:99px; color:#fff; background:rgba(41,48,44,.78); box-shadow:0 6px 20px rgba(31,36,34,.2); backdrop-filter:blur(8px); cursor:pointer; font:600 9px/1 "Noto Sans KR",sans-serif; letter-spacing:.08em; }
.music-bars { display:flex; align-items:center; gap:2px; height:12px; }.music-bars i { display:block; width:2px; height:4px; background:currentColor; }.music-toggle.playing .music-bars i { animation:musicBar .7s ease-in-out infinite alternate; }.music-toggle.playing .music-bars i:nth-child(2) { animation-delay:-.25s; }.music-toggle.playing .music-bars i:nth-child(3) { animation-delay:-.5s; }
@keyframes musicBar { to { height:12px; } }

@media (max-width:760px) {
  .template-grid { grid-template-columns:1fr; }
  .template-card { min-height:520px; padding:14px 14px 18px; }
  .card-image { height:340px; }
  .card-lettering-story:after { top:265px; left:35px; }
  .style-lettering-story .hero-script { overflow:hidden; font-size:46px; white-space:nowrap; }
  .style-lettering-story .invite-image-wrap { height:min(132vw,570px); }
  .music-toggle { right:12px; bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .card-snow,.winter-moon,.snow-layer,.winter-trees,.winter-couple,.heart-stroke,.music-bars i { animation:none!important; }
  .reveal-ready { opacity:1; transform:none; transition:none; }
}

/* Refined editorial lettering cover */
.editorial-cover-meta,.drawn-lettering { display:none; }
.card-lettering-story:after { display:none; }
.card-lettering-story .card-image { border-radius:0; background:#262522; }
.card-lettering-story .card-image img { filter:brightness(.78) saturate(.78); object-position:center 38%; }
.card-drawn-copy { position:absolute; z-index:2; left:50%; top:52%; width:100%; color:rgba(255,255,255,.92); font:42px/.82 "Allura",cursive; text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.35); transform:translate(-50%,-50%) rotate(-7deg); }
.style-lettering-story .invite-hero { position:relative; min-height:760px; padding:0; overflow:hidden; color:#fff; background:#1e201e; }
.style-lettering-story .invite-hero:after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(18,22,20,.34),transparent 28%,transparent 58%,rgba(13,17,15,.48)); pointer-events:none; }
.style-lettering-story .invite-kicker,.style-lettering-story .hero-ornament,.style-lettering-story .invite-hero h1,.style-lettering-story .hero-script,.style-lettering-story .invite-date,.style-lettering-story .invite-intro { display:none; }
.style-lettering-story .invite-image-wrap { position:absolute; z-index:0; inset:0; width:100%; height:100%; border-radius:0; box-shadow:none; animation:editorialPhoto 11s ease-out both; }
.style-lettering-story .invite-image-wrap:after { display:none; }
.style-lettering-story .invite-image-wrap img { object-position:center; filter:brightness(.82) saturate(.82) contrast(1.02); }
.style-lettering-story .editorial-cover-meta { display:block; position:absolute; z-index:3; inset:0; color:#fff; pointer-events:none; }
.style-lettering-story .editorial-cover-meta p { position:absolute; margin:0; font:500 15px/1.2 "Gowun Dodum",sans-serif; letter-spacing:.08em; writing-mode:vertical-rl; text-shadow:0 1px 9px rgba(0,0,0,.4); }
.style-lettering-story .editorial-cover-meta span { display:block; padding-top:8px; font:400 10px/1 "Cormorant Garamond",serif; letter-spacing:.12em; }
.style-lettering-story .cover-groom { top:25px; left:21px; }
.style-lettering-story .cover-bride { top:25px; right:21px; }
.style-lettering-story .cover-place { bottom:27px; left:21px; font-size:11px!important; letter-spacing:.16em!important; }
.style-lettering-story .cover-date { right:21px; bottom:27px; font:500 9px/1 "Cormorant Garamond",serif!important; letter-spacing:.15em!important; }
.style-lettering-story .drawn-lettering { display:block; position:absolute; z-index:4; top:45%; left:50%; width:90%; transform:translate(-50%,-50%) rotate(-6deg); pointer-events:none; }
.style-lettering-story .drawn-lettering svg { display:block; width:100%; overflow:visible; }
.style-lettering-story .drawn-lettering text { font-family:"Allura",cursive; font-size:61px; }
.style-lettering-story .lettering-outline { fill:transparent; stroke:#fbf5e9; stroke-width:.85; stroke-dasharray:1100; stroke-dashoffset:1100; animation:writeLettering 3.7s cubic-bezier(.6,0,.35,1) .35s forwards; }
.style-lettering-story .lettering-outline.line-two { animation-delay:1.25s; }
.style-lettering-story .lettering-fill { fill:#fbf5e9; opacity:0; filter:drop-shadow(0 2px 8px rgba(0,0,0,.28)); animation:fillLettering .9s ease 3.45s forwards; }
@keyframes editorialPhoto { from { opacity:.58; transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
@keyframes writeLettering { to { stroke-dashoffset:0; } }
@keyframes fillLettering { to { opacity:.92; } }

/* Generated winter artwork with layered motion */
.card-illustrated-story .card-image { position:relative; background:#182a35; }
.card-illustrated-story .card-image img { filter:saturate(.88) contrast(1.02); object-position:center; }
.card-art-snow { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.card-art-snow:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,37,49,.03),rgba(18,37,49,.2)); }
.card-art-snow span { position:absolute; z-index:2; left:50%; bottom:18px; color:#fff8e9; font:35px/1 "Allura",cursive; white-space:nowrap; text-shadow:0 2px 12px rgba(12,26,34,.45); transform:translateX(-50%); }
.card-art-snow i { position:absolute; z-index:2; top:-10px; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 7px #fff; animation:cardArtSnow 5s linear infinite; }
.card-art-snow i:nth-child(1){left:14%;animation-delay:-1s}.card-art-snow i:nth-child(2){left:39%;animation-delay:-3s}.card-art-snow i:nth-child(3){left:66%;animation-delay:-2s}.card-art-snow i:nth-child(4){left:87%;animation-delay:-4s}
@keyframes cardArtSnow { to { transform:translate(12px,330px); opacity:.15; } }
.style-illustrated-story .invite-hero { position:relative; min-height:760px; padding:0; overflow:hidden; color:#fff; background:#1b3342; }
.style-illustrated-story .invite-kicker { position:absolute; z-index:5; top:30px; left:50%; color:rgba(255,255,255,.88); transform:translateX(-50%); white-space:nowrap; text-shadow:0 2px 8px rgba(12,28,38,.45); }
.style-illustrated-story .hero-ornament { display:none; }
.style-illustrated-story .invite-hero h1 { position:absolute; z-index:5; top:50px; left:50%; margin:0; color:#fff; font-size:32px; transform:translateX(-50%); white-space:nowrap; text-shadow:0 2px 12px rgba(12,28,38,.5); }
.style-illustrated-story .invite-date { position:absolute; z-index:5; top:101px; left:50%; margin:0; color:rgba(255,255,255,.9); transform:translateX(-50%); white-space:nowrap; text-shadow:0 2px 8px rgba(12,28,38,.55); }
.style-illustrated-story .illustration-scene { z-index:0; display:block; position:absolute; inset:0; max-width:none; margin:0; overflow:hidden; }
.style-illustrated-story .illustration-scene:after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(8,24,35,.3),transparent 25%,transparent 58%,rgba(9,27,34,.5)); pointer-events:none; }
.style-illustrated-story .illustration-scene>img { width:100%; height:100%; object-fit:cover; object-position:center; animation:artBreath 14s ease-in-out infinite alternate; }
.style-illustrated-story .illustration-scene p { z-index:5; top:auto; right:auto; bottom:69px; left:50%; width:100%; color:rgba(255,255,255,.9); font-size:9px; text-align:center; text-shadow:0 2px 9px rgba(7,25,34,.55); transform:translateX(-50%); }
.style-illustrated-story .illustration-scene p span { color:#fff8e8; font-size:43px; text-shadow:0 2px 13px rgba(7,25,34,.45); animation:artTitle 3s ease-in-out infinite alternate; }
.style-illustrated-story .invite-intro { position:absolute; z-index:5; right:24px; bottom:24px; left:24px; margin:0; color:rgba(255,255,255,.86); font-size:10px; line-height:1.8; text-shadow:0 2px 9px rgba(7,25,34,.6); }
.illustration-snow { position:absolute; z-index:4; inset:-12% 0 0; overflow:hidden; pointer-events:none; }
.illustration-snow i { position:absolute; top:-10px; left:var(--snow-left); width:var(--snow-size); height:var(--snow-size); border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 5px rgba(255,255,255,.75); animation:realSnow var(--snow-duration) linear var(--snow-delay) infinite; }
.illustration-light { position:absolute; z-index:3; width:8px; height:8px; border-radius:50%; background:#fff1bd; box-shadow:0 0 8px 3px #ffe7a4,0 0 21px 8px rgba(255,208,117,.62); animation:lightFlicker 2.4s ease-in-out infinite alternate; }
.light-one { top:16%; left:16%; }.light-two { top:27%; right:17%; animation-delay:-.8s; }.light-three { top:51%; left:27%; animation-delay:-1.6s; }
@keyframes artBreath { from { transform:scale(1.015) translate3d(0,0,0); } to { transform:scale(1.065) translate3d(-1.2%,-.7%,0); } }
@keyframes artTitle { to { opacity:.76; transform:translateY(-2px); } }
@keyframes realSnow { from { transform:translate3d(0,-10px,0) rotate(0); opacity:0; } 12% { opacity:1; } to { transform:translate3d(var(--snow-drift),900px,0) rotate(240deg); opacity:.08; } }
@keyframes lightFlicker { to { opacity:.38; transform:scale(.72); } }

@media (max-width:760px) {
  .style-lettering-story .invite-hero,.style-illustrated-story .invite-hero { min-height:calc(100svh - 106px); }
  .style-lettering-story .drawn-lettering { width:96%; }
  .style-lettering-story .drawn-lettering text { font-size:56px; }
}
@media (prefers-reduced-motion:reduce) {
  .style-lettering-story .invite-image-wrap,.style-lettering-story .lettering-outline,.style-lettering-story .lettering-fill,.card-art-snow i,.style-illustrated-story .illustration-scene>img,.style-illustrated-story .illustration-scene p span,.illustration-snow i,.illustration-light { animation:none!important; }
  .style-lettering-story .lettering-outline { stroke-dashoffset:0; }
  .style-lettering-story .lettering-fill { opacity:.92; }
  .style-illustrated-story .door-intro-panel { transform:none!important; }
}

/* Illustrated template: handwritten typography */
.door-intro-layer,.hero-wreath { display:none; }
.style-illustrated-story { overflow:visible; font-family:"Nanum Pen Script",cursive; }
.style-illustrated-story .invite-hero { height:1120px; min-height:1120px; overflow:visible; }
.style-illustrated-story .hero-stage { position:sticky; z-index:1; top:106px; height:760px; overflow:hidden; background:#1b3342; }
.style-illustrated-story .door-intro-layer { position:absolute; z-index:4; inset:0; display:block; overflow:hidden; opacity:var(--hero-door-opacity,1); perspective:1400px; pointer-events:none; will-change:opacity; }
.style-illustrated-story .door-intro-panel { position:absolute; inset:0; overflow:hidden; background:#172d25; transform:rotateY(var(--hero-door-angle,0deg)); transform-origin:right center; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform; }
.style-illustrated-story .hero-door-art { display:block; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; }
.style-illustrated-story .hero-wreath { position:absolute; z-index:2; top:28px; left:50%; display:block; width:clamp(170px,45vw,188px); height:clamp(170px,45vw,188px); object-fit:contain; filter:drop-shadow(0 8px 18px rgba(9,18,15,.38)); transform:translateX(-50%); user-select:none; }
.style-illustrated-story .invite-kicker { top:250px; font:400 23.4px/1 "Nanum Pen Script",cursive; letter-spacing:.12em; opacity:var(--hero-header-opacity,1); transform:translate(-50%,var(--hero-header-shift,0)); will-change:opacity,transform; }
.style-illustrated-story .invite-hero h1 { top:281px; gap:15px; font:400 53.3px/1 "Nanum Pen Script",cursive; letter-spacing:-.03em; opacity:var(--hero-header-opacity,1); transform:translate(-50%,var(--hero-header-shift,0)); will-change:opacity,transform; }
.style-illustrated-story .invite-hero h1 i { margin:0 2px; color:#fff5df; font:400 53.3px/1 "Nanum Pen Script",cursive; text-shadow:0 2px 10px rgba(4,19,29,.8); }
.style-illustrated-story .invite-date { top:342px; color:#fff; font:700 23.4px/1.2 "Nanum Pen Script",cursive; letter-spacing:.04em; opacity:var(--hero-header-opacity,1); -webkit-text-stroke:.18px rgba(255,255,255,.8); text-shadow:0 2px 10px rgba(4,19,29,.75),0 0 2px rgba(4,19,29,.7); transform:translate(-50%,var(--hero-header-shift,0)); will-change:opacity,transform; }
.style-illustrated-story .illustration-scene p,.style-illustrated-story .invite-intro { display:none; }
.style-illustrated-story .illustration-scene .illustration-lettering { position:absolute; z-index:5; right:0; bottom:58px; left:0; display:block; width:auto; color:#fff8e8; text-align:center; text-shadow:0 2px 13px rgba(7,25,34,.72); transform:none; }
.style-illustrated-story .illustration-scene p.illustration-lettering span { display:block; color:inherit; font:400 43px/1 "Nanum Pen Script",cursive; letter-spacing:.02em; text-transform:none; white-space:nowrap; animation:artTitle 3s ease-in-out infinite alternate; }
.style-illustrated-story .illustration-lettering small { display:block; margin-top:5px; color:rgba(255,255,255,.9); font:500 15.3px/1.4 "Cormorant Garamond",serif; letter-spacing:.1em; text-transform:uppercase; }
.style-illustrated-story .section-mark { font:400 26px/1 "Nanum Pen Script",cursive; letter-spacing:.08em; }
.style-illustrated-story .invite-section h2 { font:400 41.6px/1.25 "Nanum Pen Script",cursive; letter-spacing:-.02em; }
.style-illustrated-story .message-section>p:not(.section-mark),.style-illustrated-story .venue-section>p:not(.section-mark) { font:400 23.4px/1.9 "Nanum Pen Script",cursive; letter-spacing:-.01em; }
.style-illustrated-story .family-names p { font:400 22.1px/1.3 "Nanum Pen Script",cursive; }
.style-illustrated-story .family-names span { font-size:18.2px; }.style-illustrated-story .family-names b { font-size:28.6px; }
.style-illustrated-story .date-section h2 { font:400 50.7px/1 "Nanum Pen Script",cursive; letter-spacing:.03em; }
.style-illustrated-story .date-section>p:not(.section-mark) { font:400 23.4px/1 "Nanum Pen Script",cursive; }
.style-illustrated-story .calendar { font:400 19.5px/1 "Nanum Pen Script",cursive; }
.style-illustrated-story .location-button { font:400 22.1px/1 "Nanum Pen Script",cursive; }
.style-illustrated-story .location-button span { font-size:18.2px; }
.style-illustrated-story .transport p { font:400 19.5px/1.5 "Nanum Pen Script",cursive; }
.style-illustrated-story .contact-grid span { font:400 18.2px/1 "Nanum Pen Script",cursive; }.style-illustrated-story .contact-grid b { font:400 28.6px/1 "Nanum Pen Script",cursive; }.style-illustrated-story .contact-grid a { font:400 19.5px/1 "Nanum Pen Script",cursive; }
.style-illustrated-story .gallery-arrow { font-size:18.2px; }.style-illustrated-story .gallery-count { font-size:11.7px; }
.style-illustrated-story .invite-ending p { font:400 26px/1.5 "Nanum Pen Script",cursive; }.style-illustrated-story .invite-ending b { font:400 22.1px/1 "Nanum Pen Script",cursive; letter-spacing:.08em; }
#invitation.style-illustrated-story,#invitation.style-illustrated-story * { font-family:"Gowun Dodum",sans-serif; }
#invitation.style-illustrated-story .invite-kicker,#invitation.style-illustrated-story .invite-date,#invitation.style-illustrated-story .illustration-lettering span,#invitation.style-illustrated-story .illustration-lettering small,#invitation.style-illustrated-story .section-mark,#invitation.style-illustrated-story .english-text,#invitation.style-illustrated-story .date-section h2,#invitation.style-illustrated-story .gallery-count,#invitation.style-illustrated-story .contact-grid>div>span,#invitation.style-illustrated-story .invite-ending b,.preview-style-illustrated-story .music-toggle { font-family:"Nanum Pen Script",cursive; }
.preview-style-illustrated-story .preview-nav,.preview-style-illustrated-story .style-picker { display:none; }
.preview-style-illustrated-story .toast { font-family:"Nanum Pen Script",cursive; font-size:17px; }
.preview-style-illustrated-story .preview-main { max-width:none; padding:0; }
.preview-style-illustrated-story .style-illustrated-story .hero-stage { top:0; }

@media (max-width:760px) {
  .style-illustrated-story .invite-hero { height:calc(100svh + 360px); min-height:calc(100svh + 360px); }
  .style-illustrated-story .hero-stage { top:0; height:100svh; }
}

@media (min-width:761px) {
  .style-illustrated-story .invite-hero { height:calc(100svh + 360px); min-height:calc(100svh + 360px); overflow:visible; background:transparent; }
  .style-illustrated-story .hero-stage { position:sticky; top:0; height:100svh; }
}

/* Final illustrated invitation details */
.style-illustrated-story .hero-wreath { top:65px; }
#invitation.style-illustrated-story,
#invitation.style-illustrated-story * { font-family:"Nanum Pen Script",cursive; }
.style-illustrated-story .message-section,
.style-illustrated-story .gallery-section,
.style-illustrated-story .date-section,
.style-illustrated-story .venue-section,
.style-illustrated-story .account-section,
.style-illustrated-story .guestbook-section,
.style-illustrated-story .invite-ending { color:#111; background:#fff; }
.style-illustrated-story .invite-section { border-top-color:#e4e4e4; }
.style-illustrated-story .invite-section,
.style-illustrated-story .invite-section :where(h2,p,span,b,time,label,legend,summary) { color:#111; }
.style-illustrated-story .message-section>p:not(.section-mark),
.style-illustrated-story .venue-section>p:not(.section-mark),
.style-illustrated-story .date-section>p:not(.section-mark),
.style-illustrated-story .transport p,
.style-illustrated-story .calendar,
.style-illustrated-story .family-names span { color:#111; }
.style-illustrated-story .message-section h2 { margin-right:-16px; margin-left:-16px; font-size:32px; white-space:nowrap; }
.style-illustrated-story .message-section:before { color:#111; }
.style-illustrated-story .calendar-head { color:#111; border-bottom-color:#ddd; }
.style-illustrated-story .calendar-days span { width:28px; height:28px; place-self:center; }
.style-illustrated-story .calendar-days .wedding-day { width:28px; height:28px; color:#fff; border-radius:50%; background:#c83b35; box-shadow:0 0 0 5px rgba(200,59,53,.1); }
.venue-map { position:relative; margin:0; overflow:hidden; }
.venue-map-card { height:360px; border:0; border-radius:0; background:#f6f6f6; box-shadow:none; }
.venue-map-live { position:absolute; top:0; right:0; left:0; height:300px; background:#f6f6f6; }
.venue-wedding-marker { position:relative; width:50px; height:56px; display:grid; place-items:center; }
.venue-wedding-marker:before { content:""; position:absolute; top:2px; left:5px; width:40px; height:40px; border:3px solid #fff; border-radius:50% 50% 50% 7px; background:#c83b35; box-shadow:0 3px 9px rgba(119,43,40,.28); transform:rotate(-45deg); }
.venue-wedding-marker svg { position:relative; z-index:1; width:25px; height:25px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:translateY(-4px); }
.map-open-button { position:absolute; right:18px; bottom:11px; left:18px; min-height:44px; display:grid; place-items:center; border:1px solid #ead6d7; border-radius:9px; color:#a06466; background:#fff; font:500 14px/1 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif; letter-spacing:-.02em; }
.style-illustrated-story .venue-address { margin:19px 0 13px!important; font-size:19.5px!important; line-height:1.4!important; }
.navigation-intro { margin:28px 0 14px; text-align:left; }
.navigation-intro h3 { margin:0 0 6px; font-size:24px; font-weight:400; }
.navigation-intro p { margin:0; color:#555!important; font-size:18px!important; line-height:1.5!important; }
.map-links { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 0 31px; }
.map-links a { display:flex; min-height:51px; align-items:center; justify-content:center; gap:7px; padding:0 6px; border:1px solid #cfcfcf; border-radius:6px; color:#111; background:#fff; font-size:17px; }
.app-icon { flex:0 0 21px; width:21px; height:21px; display:grid!important; place-items:center; padding:0!important; border-radius:6px; color:#fff!important; font-size:11px; font-weight:700; line-height:1; }
#invitation.style-illustrated-story .app-icon { font-family:"Noto Sans KR",sans-serif; }
.app-icon-naver { border-radius:50% 50% 50% 4px; background:#03c75a; }
.app-icon-kakao { color:#202020!important; background:#fee500; }
.app-icon-tmap { background:linear-gradient(135deg,#ee4878 0 48%,#4c67e8 52%); }
.transport { display:grid; gap:0; padding-top:0; border-top:1px solid #ddd; text-align:left; }
.transport-card { display:block; padding:24px 0; border-bottom:1px solid #e2e2e2; }
.transport-card:last-child { border-bottom:0; }
.transport-card h3 { margin:0 0 13px; color:#111; font-size:27px; font-weight:400; line-height:1; }
.style-illustrated-story .transport-card p { min-width:0; margin:0; color:#444; font-size:19px; line-height:1.55; }
.transport-rows { display:grid; gap:9px; }
.transport-rows p { display:flex; align-items:center; gap:7px; }
.transport span { padding-left:0; }
.route-badge { flex:0 0 23px; width:23px; height:23px; display:grid!important; place-items:center; padding:0!important; border-radius:50%; color:#fff!important; font-size:14px; line-height:1; }
.route-line-1 { background:#28529b; }
.route-line-2 { background:#2e9b48; }
.transport-destination { margin-bottom:11px!important; }
.bus-routes p { display:grid; grid-template-columns:10px 67px minmax(0,1fr); align-items:start; gap:8px; }
.route-dot { width:9px; height:9px; margin-top:9px; border-radius:50%; }
.bus-gyeonggi { background:#2e9b48; }
.bus-main { background:#28529b; }
.style-illustrated-story .bus-routes b { width:auto; color:#333; font-size:19px; font-weight:400; line-height:1.55; white-space:nowrap; }
.charter-fields { display:grid; gap:9px; margin-bottom:14px; }
.charter-fields p { display:grid; grid-template-columns:52px 1fr; align-items:end; }
.style-illustrated-story .charter-fields b { width:auto; font-size:19px; font-weight:400; line-height:1.55; }
.charter-fields span { height:24px; border-bottom:1px solid #bbb; }
.dday-countdown { margin:43px -32px -61px; padding:37px 22px 40px; border-top:1px solid #e2dfda; background:#faf8f5; }
.dday-numbers { display:grid; grid-template-columns:repeat(4,1fr); max-width:310px; margin:auto; }
.dday-numbers>div { position:relative; display:grid; gap:7px; }
.dday-numbers>div:not(:last-child):after { content:"·"; position:absolute; top:23px; right:-3px; color:#777; font:20px/1 Georgia,serif; }
.dday-numbers span { color:#8a8a8a!important; font-size:11px; letter-spacing:.08em; }
.dday-numbers strong { color:#444; font-size:28px; font-weight:400; line-height:1; }
.dday-countdown>p { margin:23px 0 0; color:#555!important; font:400 17px/1.6 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif!important; }
.dday-countdown>p b { color:#333!important; font-weight:400; text-decoration:underline; text-decoration-color:#c98b91; text-underline-offset:4px; }
#invitation.style-illustrated-story .dday-countdown>p :where(span,b) { font-family:"Pretendard Variable","Pretendard","Noto Sans KR",sans-serif; }
#invitation.style-illustrated-story .dday-numbers :where(span,strong) { font-family:"Noto Sans KR",sans-serif; }
.account-section h2,.guestbook-section h2 { margin-bottom:25px; }
.account-intro { margin:0 0 34px; color:#111; font-size:20px; line-height:1.75; }
.account-groups { display:grid; gap:12px; text-align:left; }
.account-group { border:1px solid #dedede; border-radius:8px; background:#fff; }
.account-group summary { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:0 22px; list-style:none; cursor:pointer; font-size:23px; text-align:center; }
.account-group summary::-webkit-details-marker { display:none; }
.account-group summary span { transition:transform .2s ease; }
.account-group[open] summary span { transform:rotate(180deg); }
.account-list { padding:0 17px 9px; border-top:1px solid #eee; }
.account-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid #eee; }
.account-row:last-child { border-bottom:0; }
.account-row span,.account-row b,.account-row p { display:block; }
.account-row span { color:#666; font-size:17px; }
.account-row b { margin:2px 0; color:#111; font-size:22px; font-weight:400; }
.account-row p { margin:0; color:#555; font-size:18px; }
.account-copy { flex:0 0 auto; min-width:58px; padding:8px 10px; border:1px solid #111; border-radius:4px; color:#111; background:#fff; cursor:pointer; font-size:17px; }
.account-copy:disabled { border-color:#d2d2d2; color:#999; cursor:default; }
.guestbook-form { display:grid; gap:13px; text-align:left; }
.guestbook-form label { display:grid; gap:6px; color:#333; font-size:18px; }
.guestbook-form input,.guestbook-form textarea { width:100%; border:1px solid #ccc; border-radius:5px; padding:11px 12px; color:#111; background:#fff; font-family:inherit; font-size:19px; outline:none; }
.guestbook-form textarea { resize:vertical; }
.guestbook-form input:focus,.guestbook-form textarea:focus { border-color:#111; box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.guestbook-form>button { min-height:48px; border:1px solid #111; border-radius:5px; color:#fff; background:#111; cursor:pointer; font-size:20px; }
.guestbook-form>button:disabled { opacity:.55; }
.guestbook-password-help { margin:-4px 0 0; color:#777; font-size:14px; line-height:1.45; }
.form-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-status { min-height:24px; margin:0; color:#555; font-size:17px; text-align:center; }
.guestbook-list { display:grid; gap:10px; margin-top:23px; text-align:left; }
.guestbook-list article { padding:16px; border:1px solid #e2e2e2; border-radius:7px; }
.guestbook-list article div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.guestbook-list b { color:#111; font-size:19px; font-weight:400; }
.guestbook-list time { color:#777; font-size:14px; }
.guestbook-list p { margin:7px 0 0; color:#333; font-size:18px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.guestbook-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:13px; }
.guestbook-actions button { min-width:48px; padding:6px 9px; border:1px solid #d5d5d5; border-radius:4px; color:#555; background:#fff; cursor:pointer; font:15px/1 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif; }
.guestbook-actions button:disabled { opacity:.55; cursor:default; }
.guestbook-empty { color:#777!important; text-align:center; }
.style-illustrated-story .invite-ending p,.style-illustrated-story .invite-ending b { color:#111; }
.rsvp-modal { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:15px; background:rgba(0,0,0,.46); font-family:"Noto Sans KR",sans-serif; }
.rsvp-modal[hidden] { display:none; }
.rsvp-card { position:relative; width:min(100%,425px); max-height:calc(100svh - 30px); overflow-y:auto; padding:57px 29px 28px; border-radius:16px; color:#292929; background:#fbfaf7; box-shadow:0 20px 70px rgba(0,0,0,.28); text-align:center; }
.rsvp-close { position:absolute; top:13px; right:15px; width:38px; height:38px; padding:0; border:0; color:#505050; background:transparent; cursor:pointer; font:300 29px/1 "Noto Sans KR",sans-serif; }
.rsvp-overview[hidden],.rsvp-choices[hidden] { display:none; }
.rsvp-overview h2,.rsvp-choices h2 { margin:0; font-size:19px; font-weight:500; letter-spacing:-.03em; }
.rsvp-symbol { display:grid; place-items:center; height:82px; color:#b9b8b6; }
.rsvp-symbol svg { width:49px; fill:#b9b8b6; stroke:#b9b8b6; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rsvp-symbol svg path { fill:none; }
#rsvp-overview .rsvp-symbol { --label-secondary:#b9b8b6; }
#rsvp-overview .rsvp-symbol .rsvp-symbol-art { width:48px; height:32px; fill:var(--label-secondary); stroke:none; }
#rsvp-overview .rsvp-symbol .rsvp-symbol-art path { fill:var(--label-secondary); stroke:none; }
.rsvp-description { margin:0; color:#575757; font-size:13px; line-height:1.75; letter-spacing:-.025em; word-break:keep-all; }
.rsvp-event-details { display:grid; gap:15px; margin-top:25px; padding:22px 0; border-top:1px solid #c6c2bc; border-bottom:1px solid #c6c2bc; text-align:left; }
.rsvp-event-details p { display:flex; align-items:center; gap:16px; margin:0; color:#333; font-size:13px; }
.rsvp-event-details svg { flex:0 0 21px; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rsvp-actions { display:grid; grid-template-columns:1fr 1.15fr; gap:12px; align-items:center; margin-top:24px; }
.rsvp-actions button,.rsvp-choice-buttons button,.rsvp-back { min-height:52px; padding:0 10px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:13px; }
.rsvp-snooze { padding:0!important; border:0; color:#606060; background:transparent; font-size:12px!important; white-space:nowrap; }
.rsvp-proceed { border:1px solid #292929; color:#292929; background:transparent; }
.rsvp-choices { display:grid; gap:20px; }
.rsvp-choice-copy { margin:0; color:#666; font-size:13px; }
.rsvp-choice-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rsvp-choice-buttons button { border:1px solid #202124; color:#fff; background:#202124; font-size:15px; }
.rsvp-choice-buttons button:disabled { opacity:.55; }
.rsvp-choices .form-status { min-height:20px; font:13px/1.5 "Noto Sans KR",sans-serif; }
.rsvp-back { min-height:auto; border:0; color:#666; background:transparent; text-decoration:underline; text-underline-offset:4px; }

@media (max-width:380px) {
  .rsvp-card { padding-right:24px; padding-left:24px; }
  .rsvp-actions { gap:6px; }
  .rsvp-actions button { padding:0 6px; font-size:12px; }
}

@media (max-width:380px) {
  .style-illustrated-story .message-section h2 { font-size:29px; }
  .map-links { gap:5px; }
  .map-links a { font-size:16px; }
}

/* Private attendance dashboard */
.admin-page { min-height:100vh; padding:32px 18px; color:#111; background:#f2f2f2; font-family:"Nanum Pen Script",cursive; }
.admin-shell { width:min(100%,980px); margin:auto; padding:30px; border:1px solid #ddd; border-radius:12px; background:#fff; box-shadow:0 15px 50px rgba(0,0,0,.08); }
.admin-shell header { position:relative; padding-bottom:25px; border-bottom:1px solid #ddd; }
.admin-shell header p { margin:0; font-size:18px; letter-spacing:.1em; }
.admin-shell h1 { margin:5px 0 0; font-size:43px; font-weight:400; }
.admin-shell header a { position:absolute; top:12px; right:0; border-bottom:1px solid #111; font-size:19px; }
.admin-login { max-width:430px; margin:38px auto; }
.admin-login label { display:block; margin-bottom:7px; font-size:21px; }
.admin-login div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.admin-login input { min-width:0; border:1px solid #bbb; border-radius:5px; padding:11px 12px; font-size:18px; }
.admin-login button,.admin-refresh { border:1px solid #111; border-radius:5px; padding:10px 20px; color:#fff; background:#111; cursor:pointer; font-size:20px; }
.admin-login p { min-height:25px; color:#555; font-size:18px; }
.admin-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:30px 0; }
.admin-summary article { padding:20px 14px; border:1px solid #ddd; border-radius:7px; text-align:center; }
.admin-summary span,.admin-summary b { display:block; }
.admin-summary span { color:#555; font-size:18px; }
.admin-summary b { margin-top:5px; font-size:38px; font-weight:400; }
.admin-table-wrap { overflow-x:auto; }
.admin-table-wrap table { width:100%; border-collapse:collapse; font-size:19px; }
.admin-table-wrap th,.admin-table-wrap td { padding:12px; border-bottom:1px solid #ddd; text-align:left; white-space:nowrap; }
.admin-table-wrap th { color:#555; font-weight:400; }
.admin-refresh { margin-top:22px; }
@media (max-width:600px) {
  .admin-shell { padding:22px 16px; }
  .admin-shell header a { position:static; display:inline-block; margin-top:12px; }
  .admin-summary { grid-template-columns:1fr 1fr; }
}

/* Keep the invitation copy and public-transit guidance easy to read. */
#invitation.style-illustrated-story .message-section .section-mark,
#invitation.style-illustrated-story .message-section h2,
#invitation.style-illustrated-story .message-section > p:not(.section-mark),
#invitation.style-illustrated-story .navigation-intro,
#invitation.style-illustrated-story .navigation-intro *,
#invitation.style-illustrated-story .map-links,
#invitation.style-illustrated-story .map-links *,
#invitation.style-illustrated-story .transport-card.shuttle-card,
#invitation.style-illustrated-story .transport-card.shuttle-card *,
#invitation.style-illustrated-story .transport-card.subway-card,
#invitation.style-illustrated-story .transport-card.subway-card *,
#invitation.style-illustrated-story .transport-card.bus-card,
#invitation.style-illustrated-story .transport-card.bus-card *,
#invitation.style-illustrated-story .transport-card.parking,
#invitation.style-illustrated-story .transport-card.parking *,
#invitation.style-illustrated-story .transport-card.parking-card,
#invitation.style-illustrated-story .transport-card.parking-card *,
#invitation.style-illustrated-story .transport-card.charter,
#invitation.style-illustrated-story .transport-card.charter,
#invitation.style-illustrated-story .transport-card.charter-card,
#invitation.style-illustrated-story .transport-card.charter-card * { font-family:"Gowun Dodum",sans-serif!important; }

#invitation.style-illustrated-story .message-section .section-mark {
  font:500 13px/1 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif;
  letter-spacing:.14em;
}

#invitation.style-illustrated-story .message-section h2 {
  margin:18px 0 16px;
  font:500 25px/1.35 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif;
  letter-spacing:-.045em;
  white-space:normal;
}

#invitation.style-illustrated-story .message-section > p:not(.section-mark) {
  font:400 17px/1.85 "Pretendard Variable","Pretendard","Noto Sans KR",sans-serif;
  letter-spacing:-.02em;
}