@font-face{font-family:Pretendard;src:url("./fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url("./fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:light;--paper:#fffdfb;--ink:#1c1721;--muted:#615764;--line:#e8e0e7;--accent:#a6235e;--pink:#fae9f2;--code:ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Pretendard,Arial,sans-serif}
svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #a6235e;outline-offset:4px}
.skip{position:absolute;top:-150px;left:16px;z-index:5;background:white;padding:12px}
.skip:focus{top:5px}
.shell{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.preview-notice{min-height:35px;padding:8px 14px;background:#f5eaf3;color:#554454;text-align:center;font-size:12px}
.preview-notice span{margin-right:10px;color:#84224e;font:700 10px var(--code);letter-spacing:.13em;white-space:nowrap}
.masthead{min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand,.masthead nav{display:flex;align-items:center}
.brand{gap:13px;flex:none}
.brand img{object-fit:contain;mix-blend-mode:multiply}
.brand span{border-left:1px solid var(--line);padding-left:13px;font:700 11px var(--code);letter-spacing:.12em}
.masthead nav{gap:35px;color:#493f4c;font-size:14px;font-weight:700}
.masthead a:hover,.footer a:hover{color:var(--accent)}
.button{min-height:46px;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid transparent;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:700;transition:background .18s,border-color .18s}
.outline{border-color:#ded4de;background:var(--paper)}
.outline:hover{border-color:#b884a3;background:#f8ecf4}
.header-login{min-height:42px;white-space:nowrap}
.hero{display:grid;grid-template-columns:1.13fr .87fr;gap:clamp(42px,7vw,104px);align-items:center;padding-block:47px 59px}
.stage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:548px;margin:0;border:1px solid #e4d4e9;border-radius:15px;background:radial-gradient(ellipse at 52% 54%,#fbf1f0 0%,#f1e3ec 42%,#ded6ee 100%)}
.stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.38;background:repeating-linear-gradient(90deg,transparent 0 52px,#fff7 52px 53px),repeating-linear-gradient(0deg,transparent 0 52px,#fff7 52px 53px);mask-image:linear-gradient(120deg,#000,transparent 76%)}
.stage-top,.stage-caption{position:absolute;inset-inline:23px;display:flex;align-items:center;justify-content:space-between;gap:9px;color:#5a4560;font:700 10px var(--code);letter-spacing:.11em;z-index:2}
.stage-top{top:21px}
.stage-caption{bottom:20px;justify-content:flex-start}
.stage-caption>span:first-child{color:var(--accent);font-size:15px}
.caption-right{margin-left:auto;text-align:right}
.stage-lettering{position:absolute;z-index:-1;color:#fff8;font:700 clamp(130px,22vw,310px)/1 Arial,sans-serif;letter-spacing:-.08em;transform:translate(-.04em,-.03em);user-select:none}
.book{position:relative;width:min(51%,271px);transform:rotate(-8deg);border-radius:2px 7px 7px 2px;box-shadow:5px 4px 0 #f5edf0,9px 6px 0 #948592,18px 19px 22px #42253949,29px 49px 60px #593d6251}
.book:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2a172339 0,transparent 2%,#fff2 3%,transparent 6%);border-radius:inherit;pointer-events:none}
.book img{display:block;width:100%;height:auto;border-radius:inherit}
.intro{padding:12px 0}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0;color:var(--accent);font:700 11px/1.5 var(--code);letter-spacing:.17em}
.dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
h1{margin:19px 0 22px;font:900 clamp(51px,6vw,94px)/.82 Arial,sans-serif;letter-spacing:-.087em}
.mark{color:#b83272}
.edition{display:block;margin-top:19px;color:var(--accent);font:700 13px/1 var(--code);letter-spacing:.28em}
.lead{margin:0 0 6px;font-size:clamp(20px,2vw,27px);font-weight:700;line-height:1.3;letter-spacing:-.035em}
.description{max-width:340px;margin:0 0 27px;color:var(--muted)}
.price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;border-top:1px solid var(--line);padding-top:18px}
.price-caption{display:block;color:var(--muted);font-size:13px}
.price-row strong{display:block;font-size:32px;line-height:1.3;letter-spacing:-.045em}
.price-tag{align-self:center;padding:6px 10px;border-radius:5px;background:var(--pink);color:#79264f;font-size:12px;font-weight:700;white-space:nowrap}
.primary{background:#281d2e;color:white}
.primary:hover{background:#532947}
.hero-cta,.full{width:100%}
.hero-cta{min-height:57px;justify-content:space-between;padding-inline:20px;font-size:16px}
.hero-cta span{font-size:23px}
.hero-note{margin:10px 0 0;color:var(--muted);font-size:13px}
.lookbook,.guide{border-top:1px solid var(--line);padding-block:32px 59px;scroll-margin-top:14px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:23px}
h2{margin:7px 0 0;font-size:clamp(26px,3vw,36px);line-height:1.16;letter-spacing:-.04em}
.section-heading>p{margin:0;color:var(--muted);font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery button{overflow:hidden;padding:0;border:1px solid var(--line);border-radius:10px;background:#fffafa;text-align:left}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:1.37;object-fit:cover;object-position:center 27%;transition:filter .2s}
.gallery button:hover img{filter:brightness(.9)}
.gallery button span{display:flex;justify-content:space-between;gap:4px;padding:12px 15px;font-size:14px;font-weight:700}
.gallery b{color:var(--accent)}
.guide{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px}
.guide dl{margin:0}
.guide dl div{display:grid;grid-template-columns:86px 1fr;gap:10px;border-bottom:1px solid var(--line);padding:13px 0}
.guide dl div:first-child{padding-top:0}
.guide dt{font-weight:700}
.guide dd{margin:0;color:var(--muted)}
.footer{display:flex;justify-content:space-between;gap:12px;padding-block:24px 31px;border-top:1px solid var(--line);font-size:13px}
.footer span{color:var(--accent)}
dialog{width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:27px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px #160d2850}
dialog::backdrop{background:#1d1226a6}
body:has(dialog[open]){overflow:hidden}
dialog h2{margin-bottom:13px;font-size:28px}
dialog p:not(.eyebrow){color:var(--muted)}
.close{position:absolute;top:9px;right:9px;width:43px;height:43px;padding:0;border:0;border-radius:8px;background:transparent;font-size:28px;line-height:1}
.close:hover{background:var(--pink)}
.summary{display:flex;align-items:center;gap:12px;padding:11px;background:#f8eef5;border-radius:8px}
.summary img{border-radius:3px}
.summary span{display:block;color:var(--muted);font-size:13px}
.demo-user{margin:0 0 10px;font-size:13px}
.quantity-row,.total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.quantity-row select{min-width:64px;min-height:40px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
fieldset{margin:0;padding:0;border:0}
legend{margin-bottom:6px;font-weight:700}
.payment{display:flex;align-items:center;gap:11px;min-height:59px;margin-bottom:6px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.payment:has(:checked){border-color:#be78a0;background:#f9edf4}
.payment input{accent-color:var(--accent)}
.payment small{display:block;color:var(--muted);font-size:12px}
.total output{font-size:22px;font-weight:700}
.result-note{padding:11px;background:#f8eef5;border-radius:8px;font-size:14px}
.lightbox{width:min(640px,calc(100% - 28px));padding:15px;text-align:center}
.lightbox h2{margin:5px 43px 11px;font-size:20px}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 170px);margin:auto;object-fit:contain;border-radius:4px}
#photo-scroll{max-height:calc(100dvh - 170px);overflow:auto}
.photo-crop{position:relative;overflow:hidden}
.photo-thumb.photo-crop{aspect-ratio:1.37}
#photo-frame.photo-crop{width:min(100%,520px);aspect-ratio:var(--crop-ratio);margin:auto;border-radius:4px}
.photo-crop > img{position:absolute;inset:0 auto auto 0;width:var(--crop-image-width);max-width:none;height:auto;max-height:none;aspect-ratio:auto;border-radius:0;transform:translate(var(--crop-left),var(--crop-top))}
.photo-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px}
.photo-controls .button{min-width:48px}
@media(max-width:960px){
  .shell{width:calc(100% - 58px)}
  .hero{gap:36px}
  .stage{min-height:454px}
  .book{width:min(57%,237px)}
}
@media(max-width:720px){
  .shell{width:calc(100% - 36px)}
  .masthead{min-height:66px;gap:7px}
  .masthead nav{display:none}
  .brand,.brand span{gap:7px}
  .brand img{width:75px;height:24px}
  .brand span{padding-left:7px;font-size:9px}
  .header-login{gap:5px;min-height:44px;padding-inline:9px;font-size:12px}
  .header-login svg{width:15px}
  .hero{grid-template-columns:1fr;gap:24px;padding-block:19px 34px}
  .stage{min-height:0;aspect-ratio:1.12}
  .stage-top,.stage-caption{inset-inline:12px;font-size:8px}
  .stage-top{top:12px}
  .stage-caption{bottom:12px}
  .book{width:min(47%,205px)}
  .intro{padding:0}
  h1{margin-block:15px 19px;font-size:clamp(54px,13vw,82px)}
  .section-heading{display:block}
  .section-heading>p{margin-top:7px}
  .gallery{gap:7px}
  .gallery-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-thumb.photo-crop{aspect-ratio:.8}
  .gallery .photo-thumb:not(.photo-crop) > img{aspect-ratio:.8}
  .gallery button span{padding:8px 6px;font-size:11px}
  .guide{grid-template-columns:1fr}
  dialog{padding:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

#title{font:700 clamp(42px,5.7vw,76px)/1.04 Pretendard,Arial,sans-serif;letter-spacing:-.065em;word-break:keep-all}
#title .edition{font:700 clamp(16px,2vw,23px)/1.3 Pretendard,Arial,sans-serif;letter-spacing:-.02em}
#book-description{max-width:100%;white-space:pre-line}
.stage-empty{color:#60415d;font-weight:700}
#landing-notice{padding:55px 0}