/* 시안 docs/design/drafts/v3, v4를 그대로 옮긴 것. 색·글꼴·크기·사진 처리 값은 시안과 같다. */
@font-face{font-family:'JejuMyungjo';src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2611021659@webfont-50/webfont-50/JejuMyeongjo-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'AritaDotum';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-dotum-Medium.woff') format('woff');font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#2b2d2e;color:#ecedeb;font-family:'AritaDotum',-apple-system,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.name{font-family:'JejuMyungjo',serif;font-weight:400}

/* 폰: 데스크톱은 가운데 375px 폰, 모바일은 화면 전체 */
.stage{height:100%;display:flex;align-items:center;justify-content:center}
.phone{--top:96px;--top-pad:52px;--bottom:112px;width:375px;height:min(812px,calc(100dvh - 32px));border-radius:38px;overflow:hidden;position:relative;background:#060707;color:#f4f1ea;flex:none;isolation:isolate}
@media (max-width:500px){
  .phone{--top:calc(48px + env(safe-area-inset-top));--top-pad:calc(18px + env(safe-area-inset-top));--bottom:calc(64px + env(safe-area-inset-bottom));width:100%;height:100dvh;border-radius:0}
}
.view{position:absolute;inset:0}
#base,#over,#sheet{position:absolute;inset:0}
#base{z-index:1}#over{z-index:2}#sheet{z-index:3}
#over:empty,#sheet:empty{display:none}
.detail{background:#060707}
.bar-t{position:absolute;top:0;left:0;right:0;height:var(--top);background:#060707;z-index:6;padding:var(--top-pad) 20px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:12.5px;color:#f4f1ea}
.bar-t .s{color:#7f8584;text-align:right}
.bar-b{position:absolute;bottom:0;left:0;right:0;height:var(--bottom);background:#060707;z-index:6;padding:20px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;font-size:14px}
.bar-b .s{color:#7f8584}
.bar-b .acts{white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d1301c;margin-right:7px;vertical-align:1px}
/* 휴대폰: 글자 크기는 그대로 두고 누르는 영역만 44px 안팎으로 넓힌다 */
.bar-t a,.bar-t button,.bar-b a,.bar-b button,.slot .lb .out{position:relative}
/* 화면 이동(네 화면, 지금 화면만 밝게)과 날짜 바꾸기(24일 25일). 밑줄은 "누를 수 있다", 밝은 글자는 "지금". */
.tabs{display:flex;gap:16px;white-space:nowrap}
.tabs .s,.dates .s{color:#7f8584}
.dates{display:flex;gap:18px}
.bar-t u,.bar-b u,.dates u{text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.bar-t .dates button::after,.bar-b .dates button::after{inset:-14px -9px}
.bar-b .acts{display:flex;gap:22px}
/* 날짜 바꾸기가 없어서 묶음이 하나뿐이면 양 끝으로 벌린다(왼쪽 "1 / 128, 전체 보기", 오른쪽 담기). */
.bar-b .acts:only-child{flex:1;justify-content:space-between}
.bar-t .tabs a::after{inset:-14px -8px}
.bar-t a::after,.bar-t button::after,.bar-b a::after,.bar-b button::after,.slot .lb .out::after{content:"";position:absolute;inset:-14px -4px}

/* 목록: 한 장면씩 */
.reel{position:absolute;top:var(--top);bottom:var(--bottom);left:0;right:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.reel::-webkit-scrollbar{display:none}
.scene{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;background:#060707;cursor:pointer}

/* 한 영화의 스틸처럼: 차가운 그림자, 따뜻한 불빛, 붉은 번짐, 입자 */
.still{position:absolute;inset:0;overflow:hidden}
.still .base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(.88) brightness(.92);transition:filter .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.still .cool{position:absolute;inset:0;background:linear-gradient(180deg,#0e2630 0%,#0b1d26 55%,#10171c 100%);mix-blend-mode:soft-light;opacity:.95}
.still .shade{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(4,6,7,.55) 100%),linear-gradient(180deg,rgba(4,6,7,.5),transparent 34%)}
.still .hal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.95) contrast(7) blur(12px) sepia(1) saturate(5) hue-rotate(-30deg);mix-blend-mode:screen;opacity:.2}
.grain{position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:overlay;animation:grain 1s steps(6) infinite;pointer-events:none}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
/* 진짜 창처럼 아래쪽에만 김. backdrop-filter는 쓰지 않는다(스크롤 영역에서 사진 전체가 흐려지는 Chromium 버그). */
.steam{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(6,8,9,0),rgba(6,8,9,.3) 70%,rgba(6,8,9,.42)),linear-gradient(180deg,rgba(196,206,210,0),rgba(206,214,217,.10))}
.fogwrap{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(180deg,transparent 62%,#000 84%);-webkit-mask-image:linear-gradient(180deg,transparent 62%,#000 84%)}
.fogimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(8px) brightness(1.06) saturate(.8) contrast(1.05)}
.drip{position:absolute;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 70%,rgba(255,255,255,.5));pointer-events:none}
.drip::after{content:"";position:absolute;left:-1px;bottom:-2px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45)}
/* 사진이 아직 없는 곳: 같은 장면에 사진 대신 먼 창빛만 */
.still.empty .lamp{position:absolute;left:50%;top:46%;width:420px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,150,70,.10),transparent);filter:blur(10px)}
.title{position:absolute;left:20px;right:20px;top:22px;z-index:3;font:400 42px/1.08 'JejuMyungjo',serif;letter-spacing:-.01em;color:#f6f2ea;text-shadow:0 1px 20px rgba(0,0,0,.45)}
.stays .title{font-size:38px;line-height:1.1;letter-spacing:0}
/* 가이드 등재: 이름 바로 아래 한 줄, 글자로만 */
.sub .fit{color:#bfc2c0}
/* 장면의 낱말이 곧 조건: 평소에는 표시가 없고 켠 낱말에만 밑줄(마우스를 올리면 밑줄) */
.tok{position:relative;font:inherit;color:inherit;text-shadow:inherit}
@media (hover:hover){.tok:hover{box-shadow:inset 0 -1px 0 rgba(244,241,234,.6)}}
/* 안내 한 줄: 첫 장면 안, 자막 바로 위. 장면과 함께 넘어간다. */
.scene .tip{position:absolute;z-index:3;left:20px;right:20px;bottom:86px;text-align:center;font-size:13px;color:#dcd8cf;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.8),0 1px 14px rgba(0,0,0,.7)}
.tok::after{content:"";position:absolute;inset:-12px -3px}
.tok.on{box-shadow:inset 0 -1px 0 #f4f1ea}
.bar-t .cond{display:flex;gap:14px;min-width:0;white-space:nowrap}
.bar-t .cond button:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet h3{display:flex;justify-content:space-between;align-items:baseline}
.sheet h3 .x{position:relative;font-size:13.5px;color:#a7aaa8;box-shadow:inset 0 -1px 0 #7f8584}
.sheet h3 .x::after{content:"";position:absolute;inset:-14px -10px}
/* 받은 목록(휴대폰): 받은 곳이 한 화면에 띠로, 누른 띠만 넓게 */
.bands{position:absolute;inset:var(--top) 0 var(--bottom);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.bands::-webkit-scrollbar{display:none}
.bands .said{flex:none;padding:6px 20px 18px;margin:0;font-size:30px;line-height:1.25;color:#f6f2ea}
.band{position:relative;flex:1 0 60px;overflow:hidden;cursor:pointer;background:#0b1114;transition:flex-grow .4s cubic-bezier(.2,.7,.2,1)}
.band+.band{margin-top:2px}
.band .still .base{filter:contrast(1.1) saturate(.7) brightness(.55);transition:filter .4s ease}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,8,9,.72),rgba(6,8,9,.12) 55%,rgba(6,8,9,.5));pointer-events:none}
.band .title{top:10px;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .title .guide{margin-top:3px;font-size:12.5px}
.band .sub{left:20px;right:20px;bottom:58px;text-align:left;font-size:13.5px;display:none}
.band .acts{position:absolute;z-index:3;left:20px;bottom:20px;display:none;gap:22px;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.band .acts .out,.band .acts a{position:relative;box-shadow:inset 0 -1px 0 rgba(244,241,234,.5)}
.band .acts .out::after,.band .acts a::after{content:"";position:absolute;inset:-14px -6px}
.band.on{flex:3.4 0 220px;cursor:default}
.band.on .still .base{filter:contrast(1.12) saturate(.88) brightness(.86)}
.band.on::after{background:linear-gradient(180deg,rgba(6,8,9,.4),rgba(6,8,9,0) 40%,rgba(6,8,9,.8))}
.band.on .title{font-size:38px;top:18px;white-space:normal}
.band.on .title .guide{margin-top:8px;font-size:13.5px}
.band.on .sub{display:block}.band.on .acts{display:flex}
.bandsview>.note{position:absolute;z-index:7;left:0;right:0;bottom:var(--bottom);margin:0;padding:12px 20px;background:#060707}
.title .guide{display:block;margin-top:10px;font:500 13.5px/1.5 'AritaDotum',sans-serif;letter-spacing:0;color:#f4f1ea;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sub{position:absolute;left:16px;right:16px;bottom:22px;z-index:3;text-align:center;font-size:15px;font-weight:500;line-height:1.55;color:#f6f2ea;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sub .soft{color:#dcd8cf}
.stays .sub{text-shadow:0 1px 3px rgba(0,0,0,.75)}
.stays .steam{background:linear-gradient(180deg,rgba(6,8,9,0),rgba(6,8,9,.38) 70%,rgba(6,8,9,.5)),linear-gradient(180deg,rgba(196,206,210,0),rgba(206,214,217,.10))}
.stays .fogimg{filter:blur(8px) brightness(1.06) saturate(.8)}
/* 장면 전환: 초점이 맞듯이 */
.scene:not(.on) .base{filter:contrast(1.05) saturate(.6) brightness(.7) blur(6px);transform:scale(1.035)}
.scene.none{cursor:default}
/* 전체 보기: 곳마다 사진을 얇게 잘라 쌓은 띠. 고른 띠만 넓어진다. */
.strips{position:absolute;top:var(--top);bottom:var(--bottom);left:0;right:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.strips::-webkit-scrollbar{display:none}
.strip{position:relative;height:60px;overflow:hidden;cursor:pointer;background:#0b1114;transition:height .38s cubic-bezier(.2,.7,.2,1)}
.strip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.7) brightness(.55);transition:filter .4s ease}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,9,.72),rgba(6,8,9,.12) 55%,rgba(6,8,9,.5));pointer-events:none}
.strip>p{position:absolute;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.strip .name{left:20px;right:168px;top:17px;font:400 23px/1.15 'JejuMyungjo',serif;color:#f6f2ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .amt{right:20px;top:50%;transform:translateY(-50%);text-align:right;font-size:12.5px;line-height:1.5;color:#e6e3dc}
.strip .amt span{display:block;color:#f6f2ea}
.strip .sub{left:20px;right:20px;bottom:58px;top:auto;text-align:left;font-size:13.5px;animation:settle .3s ease .1s both}
.strip .acts{left:20px;bottom:20px;display:flex;gap:22px;font-size:14px;animation:settle .3s ease .1s both}
.strip .acts button,.strip .acts a{position:relative;box-shadow:inset 0 -1px 0 rgba(244,241,234,.5)}
.strip .acts button::after,.strip .acts a::after{content:"";position:absolute;inset:-14px -6px}
.strip.on{height:300px;cursor:default}
.strip.on>img{filter:contrast(1.12) saturate(.88) brightness(.86)}
.strip.on::after{background:linear-gradient(180deg,rgba(6,8,9,.3),rgba(6,8,9,0) 40%,rgba(6,8,9,.8))}
.strip.on .name{font-size:38px;line-height:1.1;top:20px;right:20px;white-space:normal}
.strip.on .amt{display:none}
.all .bar-b .acts{gap:18px}

/* 밀기: 좌우는 담기와 넘기기, 위아래는 장면 넘기기 */
.reel{touch-action:pan-y;overflow-x:hidden}
.scene.drag{cursor:grabbing;z-index:2;will-change:transform}
.undo{position:absolute;z-index:6;left:50%;bottom:calc(var(--bottom) + 96px);transform:translateX(-50%);font-size:13.5px;color:#e6e3dc;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8),0 1px 14px rgba(0,0,0,.7);animation:settle .25s ease both}
.undo u{margin-left:12px;text-decoration:none;box-shadow:inset 0 -1px 0 currentColor;color:#f6f2ea}
.undo::after{content:"";position:absolute;inset:-14px -10px}
.scene.none .sub button{border-bottom:1px solid #7f8584;padding-bottom:1px}
/* 사진 없는 띠: 빈 장면과 같은 먼 창빛 */
.strip.nophoto{background:radial-gradient(60% 160% at 72% 50%,rgba(232,150,70,.09),transparent 70%),#0b1114}
@media (max-width:1023px){.sheet.cond .go{position:sticky;bottom:0;box-shadow:0 0 0 14px #0d0f10,0 -28px 20px 0 #0d0f10}}

/* 상세 */
.detail .still .base{filter:contrast(1.1) saturate(.8) brightness(.38)}
/* 숙소 사진은 낮 실내가 많아 더 어둡게 가라앉힌다 */
.detail.stays .still .base{filter:contrast(1.05) saturate(.75) brightness(.27)}
.detail .still .hal{opacity:.08}
.detail .steam{height:100%;background:linear-gradient(180deg,rgba(196,206,210,0) 30%,rgba(196,206,210,.08) 100%)}
.detail .fogwrap{mask-image:linear-gradient(180deg,transparent 0%,#000 60%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%)}
.detail .fogimg{filter:blur(4px) brightness(.5) saturate(.7)}
.detail{animation:settle .45s ease both}
@keyframes settle{from{opacity:0}to{opacity:1}}
.credits{position:absolute;inset:var(--top) 0 var(--bottom);overflow-y:auto;scrollbar-width:none;text-align:center;padding:34px 28px 80px;z-index:4}
.credits::-webkit-scrollbar{display:none}
.credits h3{font:400 50px/1.08 'JejuMyungjo',serif;color:#f6f2ea}
.credits .k{font-size:12px;color:#a7aaa8;margin-top:32px}
.credits .v{font-size:17px;font-weight:600;margin-top:6px;line-height:1.5;color:#f6f2ea}
.credits .v.u,.credits .v .u{color:#a9adab;font-weight:500}
.credits .v a{border-bottom:1px solid rgba(246,242,234,.5);position:relative}
.credits .v a::after{content:"";position:absolute;inset:-12px -4px}
.credits .v small{display:block;font-size:13px;font-weight:500;line-height:1.55;color:#a9adab;margin-top:4px}
.credits .v.where{margin-top:14px;font-size:15px;font-weight:500}
.credits .v.big{font-size:24px;line-height:1.3}
.credits .v.big small{margin-top:7px}
.credits .v.long{font-size:14px;font-weight:500;line-height:1.6;color:#d9d6cf}
.credits .foot{font-size:12px;line-height:1.6;color:#a7aaa8;margin-top:32px}
.credits .foot+.foot{margin-top:6px}
.credits .foot a{border-bottom:1px solid rgba(135,140,139,.6)}
.detail .bar-b{font-weight:600;padding-left:16px;padding-right:16px}
.detail .bar-b .acts{gap:16px}

/* 예약 일정 */
.subs{position:absolute;inset:var(--top) 0 var(--bottom);display:flex;flex-direction:column;justify-content:safe center;gap:30px;padding:40px 24px;text-align:center;z-index:2;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.subs::-webkit-scrollbar{display:none}
.subs p{font-size:15px;line-height:1.55;font-weight:500;flex:none}
.subs p b{display:block;font-size:12.5px;color:#a7aaa8;font-weight:500;margin-bottom:4px}
.subs p.past{color:#4c5150}.subs p.past b{color:#3c403f}
.subs p.far{color:#7a7f7e}.subs p.far b{color:#575b5a}
.subs p.big{font:400 28px/1.35 'JejuMyungjo',serif;position:relative}
.subs p.big b{font-family:'AritaDotum'}
.subs p.big::before{content:"";position:absolute;left:50%;top:50%;width:420px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,150,70,.16),transparent);filter:blur(10px);z-index:-1;pointer-events:none}
.subs .empty{color:#7a7f7e}
/* 예약 순서: 담은 식당을 먼저 열리는 순서로. 펼친 한 곳에만 가격 한 줄과 버튼이 나온다. */
.subs .q{flex:none}
.subs .qn{padding:6px 0;position:relative}
.subs .qf{font:500 15px/1.55 'AritaDotum',sans-serif;color:#a7aaa8}
.subs .qacts{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:14px 22px;line-height:1.5;margin-top:14px;font-size:14px;color:#f4f1ea}
.subs .qacts a,.subs .qacts button{position:relative;padding:0 0 2px;box-shadow:inset 0 -1px 0 rgba(244,241,234,.5)}
.subs .qacts a::after,.subs .qacts button::after{content:"";position:absolute;inset:-12px -6px}
.subs .qacts .u{color:#7f8584}
.subs .q.past .qacts,.subs .q.far .qacts{color:#cfd2d0}

/* 조건 바꾸기, 카드 보내기 */
.dim{position:absolute;inset:0;background:rgba(3,4,4,.62);z-index:7;animation:settle .25s ease both}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:8;background:#0d0f10;border-radius:22px 22px 0 0;padding:22px 22px calc(30px + env(safe-area-inset-bottom));max-height:calc(100% - 40px);overflow-y:auto;scrollbar-width:none;animation:rise .32s cubic-bezier(.2,.7,.2,1) both}
.sheet::-webkit-scrollbar{display:none}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-size:15px;color:#f4f1ea;font-weight:normal}
.grp{margin-top:22px}
.grp>p{font-size:12px;color:#7f8584}
/* 선택지는 위아래 여백으로 누르는 높이 44px. 밑줄은 글자 바로 아래에 둔다. */
.opts{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:0}
.opts button{font-size:16px;line-height:24px;color:#6f7574;padding:10px 0;text-underline-offset:6px;text-decoration-thickness:1px}
.opts button.on{color:#f4f1ea;text-decoration-line:underline}
.go{margin-top:28px;height:52px;width:100%;display:flex;align-items:center;justify-content:center;background:#f4f1ea;color:#0d0f10;font-size:15px}
.go:disabled{background:#3a3e3f;color:#7f8584;cursor:default}
.line{display:block;width:100%;margin-top:10px;font:16px 'AritaDotum',sans-serif;color:#f4f1ea;background:none;border:0;border-radius:0;box-shadow:inset 0 -1px 0 #7f8584;padding:2px 0 6px;outline:none}
.line:focus{box-shadow:inset 0 -1px 0 #f4f1ea}
.note{margin-top:14px;font-size:12.5px;line-height:1.6;color:#aeb2b2}
.note .url{display:block;margin-top:6px;color:#7f8584;word-break:break-all;user-select:all}

/* 그날 저녁 */
.eve{position:absolute;inset:var(--top) 0 var(--bottom);overflow-y:auto;scrollbar-width:none;padding:6px 20px 30px}
.eve::-webkit-scrollbar{display:none}
.eve h2{font-size:30px;line-height:1.2;color:#f6f2ea;font-weight:400}
.eve section+section{margin-top:52px}
.eve .when{font-size:13px;color:#8d9190;margin-top:6px;line-height:1.6}
.slot{margin-top:22px}
.slot .lb{font-size:12px;color:#8d9190}
.slot .lb{display:flex;justify-content:space-between;align-items:baseline}
.slot .lb .out{font-size:12.5px;color:#cfd2d0;box-shadow:inset 0 -1px 0 #7f8584}
.outs{display:flex;gap:18px}
.eve .gh{margin-top:34px;font-size:15px;font-weight:500;color:#f4f1ea;display:flex;justify-content:space-between;align-items:baseline}
.eve .gh span{font-size:12px;font-weight:400;color:#8d9190}
.eve .gh+.slot{margin-top:14px}
.eve .said{font-size:30px;line-height:1.25;color:#f6f2ea;margin-bottom:34px}
.names{font-size:16px;line-height:1.6;color:#f4f1ea;margin-top:10px}
.got .slot div.ph{cursor:default}
.slot.kept .ph{height:84px}
.slot.kept .ph .title{font-size:20px;top:12px}
.slot.kept .f{font-size:13px;margin-top:8px;color:#cfd2d0}
.slot .ph{display:block;width:100%;height:150px;position:relative;overflow:hidden;margin-top:8px;text-align:left}
.slot .ph .title{font-size:26px;top:14px;left:16px}
.slot .f{font-size:14px;line-height:1.6;margin-top:10px;color:#e6e3dc}
.slot .f .u{color:#8d9190}
.todo{margin-top:26px;font-size:13.5px;line-height:1.8;color:#cfd2d0}
.todo p:first-child{font-size:12px;color:#8d9190;margin-bottom:2px}

/* 받은 카드 */
.recv{position:absolute;inset:0;padding:var(--top) 20px 0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;scrollbar-width:none}
.recv::-webkit-scrollbar{display:none}
.recv .k{align-self:flex-start;font-size:12.5px;color:#8d9190}
.card{width:335px;max-width:100%;aspect-ratio:335/419;flex:none;position:relative;margin-top:14px;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.card .still{inset:0}
.card canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease;z-index:4}
.hint{margin-top:14px;font-size:12.5px;color:#7f8584;display:flex;gap:14px}
.hint button{color:#cfd2d0;border-bottom:1px solid #7f8584;padding:0 0 1px;position:relative}
.hint button::after{content:"";position:absolute;inset:-14px -8px}
.subs a{display:inline-block;padding:6px 0}
.scene.none .sub button{position:relative}
.scene.none .sub button::after{content:"";position:absolute;inset:-14px -8px}
.after{width:100%;margin-top:20px;padding-bottom:40px;opacity:0;transform:translateY(8px);transition:opacity .5s ease .2s,transform .5s ease .2s}
.after.show{opacity:1;transform:none}
.after h3{font-size:32px;font-weight:normal;color:#f6f2ea}
.after .m{font-size:13.5px;color:#cfd2d0;margin-top:6px;line-height:1.6}
.after .m .u{color:#8d9190}
.answers{display:flex;gap:8px;margin-top:18px}
.answers button{flex:1;height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:inset 0 0 0 1px rgba(244,241,234,.5)}
.answers a{flex:1;height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#f4f1ea;color:#060707}
.answers button:first-child{background:#f4f1ea;color:#060707;box-shadow:none}
.after .note a{border-bottom:1px solid #7f8584}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid #f4f1ea;outline-offset:3px}

/* 밝은 사진 위 글자: 옅은 그림자 (휴대폰, 넓은 화면 공통) */
.credits{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.4)}
.credits .k,.credits .v.u,.credits .v .u,.credits .v small,.credits .foot{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.55)}
.title{text-shadow:0 1px 3px rgba(0,0,0,.35),0 1px 20px rgba(0,0,0,.45)}
.slot .ph .title{text-shadow:0 1px 3px rgba(0,0,0,.5),0 1px 20px rgba(0,0,0,.45)}

/* ---- 넓은 화면 (docs/design/drafts/web2): 장면이 화면 끝까지, 메뉴는 네 모서리에 작게 ---- */
@media (max-width:1023px){.wide-only{display:none!important}}
@media (min-width:1024px){
  body{background:#060707}
  .stage{display:block}
  /* 1440×900 기준 1px. 1280×800은 0.89px, 1920×1080은 1.2px */
  .phone{--px:min(calc(100vw / 1440),calc(100vh / 900));--top:0px;--bottom:0px;width:100vw;height:100dvh;border-radius:0}
  .bar-t,.bar-b{display:none}
  .c{position:absolute;z-index:6;font-size:max(14px,calc(14 * var(--px)));line-height:1.7;color:rgba(244,241,234,.92);text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.5)}
  .c .s,.c.s{color:rgba(244,241,234,.55)}
  .c u{text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
  .c button{text-align:inherit;line-height:inherit;text-shadow:inherit}
  .tl{left:calc(48 * var(--px));top:calc(40 * var(--px));display:flex;gap:calc(26 * var(--px))}
  .tr{right:calc(48 * var(--px));top:calc(40 * var(--px));text-align:right;display:flex;gap:calc(18 * var(--px))}
  .bl{display:flex;gap:calc(30 * var(--px));align-items:baseline}
  .c .dates{gap:calc(18 * var(--px))}
  .c .dates .s{color:rgba(244,241,234,.55)}
  .c .dates button:hover,.c .tabs a:hover,.c a.s:hover{color:rgba(244,241,234,.92)}
  .bl{left:calc(48 * var(--px));bottom:calc(40 * var(--px))}
  .br{right:calc(48 * var(--px));bottom:calc(40 * var(--px));display:flex;gap:calc(30 * var(--px))}
  .dot{width:8px;height:8px;margin-right:8px}

  /* 사진 처리: 휴대폰과 같은 겹, 화면이 커진 만큼 번짐과 김만 넓게 */
  .still .base{filter:contrast(1.12) saturate(.88) brightness(.9);transition:filter .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .still .hal{filter:brightness(.95) contrast(7) blur(18px) sepia(1) saturate(5) hue-rotate(-30deg)}
  .still .shade{background:radial-gradient(120% 110% at 50% 45%,transparent 48%,rgba(4,6,7,.62) 100%),linear-gradient(180deg,rgba(4,6,7,.52),transparent 32%)}
  .fogwrap{mask-image:linear-gradient(180deg,transparent 62%,#000 88%);-webkit-mask-image:linear-gradient(180deg,transparent 62%,#000 88%)}
  .fogimg,.stays .fogimg{filter:blur(14px) brightness(1.06) saturate(.8)}
  .steam,.stays .steam{height:42%;background:linear-gradient(180deg,rgba(6,8,9,0),rgba(6,8,9,.34) 70%,rgba(6,8,9,.5)),linear-gradient(180deg,rgba(196,206,210,0),rgba(206,214,217,.08))}
  .grain{opacity:.14}
  .still.empty .lamp{width:calc(900 * var(--px));height:calc(640 * var(--px))}

  /* 1. 목록: 화면 전체가 장면 하나 */
  .reel{inset:0}
  .c .more{margin-left:calc(22 * var(--px))}
  .strips{inset:0;overflow-x:auto;overflow-y:hidden;display:flex}
  .strip{flex:none;height:100%;width:calc(76 * var(--px));transition:width .45s cubic-bezier(.2,.7,.2,1)}
  .strip.on{height:100%;width:calc(520 * var(--px))}
  .strip::after{background:linear-gradient(180deg,rgba(6,8,9,.6),rgba(6,8,9,.1) 50%,rgba(6,8,9,.6))}
  .strip .name{writing-mode:vertical-rl;left:0;right:0;width:100%;top:calc(110 * var(--px));bottom:calc(330 * var(--px));font-size:calc(30 * var(--px));line-height:calc(76 * var(--px));text-overflow:clip}
  .strip .name .dot{margin:0 0 8px}
  .title .guide{margin-top:calc(20 * var(--px));font-size:max(14px,calc(22 * var(--px)))}
  .strip .amt span{display:inline}
  .strip .amt span::after{content:", "}
  .strip .amt{writing-mode:vertical-rl;left:0;right:0;width:100%;top:auto;transform:none;text-align:left;bottom:calc(96 * var(--px));line-height:calc(76 * var(--px));font-size:max(12px,calc(13 * var(--px)));color:#cfd2d0;white-space:nowrap}
  .strip.on .name{writing-mode:horizontal-tb;font-size:calc(84 * var(--px));line-height:1.05;top:calc(120 * var(--px));left:calc(36 * var(--px));right:calc(30 * var(--px));width:auto;bottom:auto}
  .strip .sub{left:calc(36 * var(--px));right:calc(30 * var(--px));bottom:calc(200 * var(--px));min-width:calc(440 * var(--px));font-size:max(14px,calc(20 * var(--px)))}
  .strip .acts{left:calc(36 * var(--px));bottom:calc(144 * var(--px));white-space:nowrap;gap:calc(30 * var(--px));font-size:max(14px,calc(16 * var(--px)))}
  .undo{font-size:max(16px,calc(22 * var(--px)));bottom:calc(210 * var(--px))}
  .tok.on{box-shadow:inset 0 -1px 0 #f4f1ea}
  .sub .fit{color:#cfd2d0}
  .scene:not(.on) .base{filter:contrast(1.05) saturate(.6) brightness(.7) blur(10px);transform:scale(1.03)}
  .title,.stays .title{left:calc(44 * var(--px));right:calc(108 * var(--px));top:calc(84 * var(--px));font-size:calc(168 * var(--px));line-height:1;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 40px rgba(0,0,0,.4)}
  .sub,.stays .sub{left:calc(96 * var(--px));right:calc(96 * var(--px));bottom:calc(96 * var(--px));font-size:calc(28 * var(--px));line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .next{position:absolute;right:0;top:0;bottom:0;width:64px;z-index:4;overflow:hidden;opacity:.5;pointer-events:none}
  .next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.55) saturate(.6)}

  /* 2. 상세: 같은 장면이 가라앉고 크레디트가 화면 가운데로 */
  .detail .still .base{filter:contrast(1.1) saturate(.75) brightness(.34)}
  .detail.stays .still .base{filter:contrast(1.05) saturate(.7) brightness(.26)}
  .detail .still .hal,.detail .steam,.detail .drip{display:none}
  .detail .fogwrap{mask-image:linear-gradient(180deg,transparent 0%,#000 70%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 70%)}
  .detail .fogimg{filter:blur(6px) brightness(.45) saturate(.7)}
  .credits{inset:0;padding:calc(110 * var(--px)) calc(96 * var(--px)) calc(160 * var(--px))}
  .credits h3{font-size:calc(132 * var(--px));line-height:1}
  .credits .k{font-size:max(14px,calc(17 * var(--px)));margin-top:calc(46 * var(--px))}
  .credits .v{font-size:calc(30 * var(--px));line-height:1.5;margin-top:calc(10 * var(--px));font-weight:500}
  .credits .v small{font-size:max(14px,calc(17 * var(--px)));color:#cdbf9f;margin-top:calc(6 * var(--px))}
  .credits .v.long{font-size:max(15px,calc(19 * var(--px)));max-width:calc(760 * var(--px));margin-left:auto;margin-right:auto}
  .credits .foot{font-size:max(13px,calc(15 * var(--px)));margin-top:calc(46 * var(--px))}
  .credits .foot+.foot{margin-top:calc(8 * var(--px))}
  .credits .two{display:flex;justify-content:center;gap:calc(120 * var(--px))}
  .credits .two>div{flex:0 1 auto;max-width:calc(560 * var(--px))}
  .credits .v.where{font-size:calc(24 * var(--px));margin-top:calc(22 * var(--px))}
  .credits .v.big{font-size:calc(48 * var(--px));line-height:1.25}
  .credits .v.big small{margin-top:calc(12 * var(--px))}
  .credits .row{display:flex;justify-content:center;align-items:flex-start;gap:calc(72 * var(--px))}
  .credits .row>div{flex:0 1 auto;max-width:calc(380 * var(--px))}
  .credits .row .v{font-size:calc(22 * var(--px))}
  .credits .row .v.long{font-size:max(15px,calc(19 * var(--px)))}

  /* 3. 조건 바꾸기, 카드 보내기: 장면을 크게 흐리고 화면 전체가 선택지 */
  .dim{background:#060707}
  .dim .still.blur .base{filter:blur(24px) brightness(.32) saturate(.6)}
  .dim .still.blur .cool,.dim .still.blur .grain{display:none}
  .sheet{inset:0;max-height:none;border-radius:0;background:transparent;padding:calc(130 * var(--px)) calc(96 * var(--px)) calc(200 * var(--px));animation:settle .3s ease both}
  .sheet h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .grp{margin:0 0 calc(42 * var(--px))}
  .grp>p{font-size:max(13px,calc(15 * var(--px)));color:#8d9190;margin-bottom:calc(10 * var(--px))}
  .opts{gap:calc(6 * var(--px)) calc(48 * var(--px));margin-top:0}
  .opts button{font-family:'JejuMyungjo',serif;font-size:calc(52 * var(--px));line-height:1.25;color:rgba(244,241,234,.22);padding:0;transition:color .2s ease;text-decoration-line:none}
  .opts button:hover{color:rgba(244,241,234,.45)}
  .opts button.on{color:#f6f2ea;text-decoration-line:none}
  /* 식당 조건은 여섯 줄이라 한 화면에 들어가도록 작게 */
  .sheet.many{padding-top:calc(96 * var(--px));padding-bottom:calc(110 * var(--px))}
  .sheet.many .grp{margin-bottom:calc(14 * var(--px))}
  .sheet.many .grp>p{margin-bottom:calc(4 * var(--px))}
  .sheet.many .opts{gap:0 calc(30 * var(--px))}
  .sheet.many .opts button{font-size:calc(32 * var(--px))}
  .line{font:calc(52 * var(--px))/1.25 'JejuMyungjo',serif;max-width:calc(900 * var(--px));margin-top:0;padding-bottom:calc(10 * var(--px))}
  .go{position:fixed;right:calc(96 * var(--px));bottom:calc(84 * var(--px));width:auto;height:auto;margin:0;padding:calc(22 * var(--px)) calc(44 * var(--px));font-size:max(15px,calc(22 * var(--px)));z-index:9}
  .note{position:fixed;left:calc(96 * var(--px));bottom:calc(84 * var(--px));max-width:calc(700 * var(--px));margin:0;font-size:max(13px,calc(15 * var(--px)))}

  /* 4. 그날 저녁: 고른 곳마다 한 칸 */
  .halves{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .halves::-webkit-scrollbar{display:none}
  .half{position:relative;flex:1 0 calc(270 * var(--px));min-width:0;overflow:hidden;display:block}
  .half .fill{position:absolute;inset:0;display:block}
  .half .outs{position:absolute;z-index:6;left:0;right:0;justify-content:center;gap:calc(28 * var(--px));bottom:calc(max(112 * var(--px), var(--todo-h, 0px) + 62 * var(--px)))}
  .half .out{position:relative;font-size:max(13px,calc(15 * var(--px)));color:rgba(244,241,234,.7);box-shadow:inset 0 -1px 0 rgba(244,241,234,.45);text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.5)}
  .half .out:hover{color:#f6f2ea}
  .got .half a.out{pointer-events:auto}
  .half+.half::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(244,241,234,.18);z-index:5}
  .half.stay .still .base{filter:contrast(1.1) saturate(.8) brightness(.6)}
  .half .tag{position:absolute;z-index:4;top:calc(112 * var(--px));left:calc(40 * var(--px));font-size:max(13px,calc(16 * var(--px)));color:#f4f1ea;text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.5)}
  .half.kept{flex:.6 0 calc(190 * var(--px))}
  .half.kept .sub{font-size:max(14px,calc(min(22, 130 / var(--n)) * var(--px)))}
  .half.kept .tag{color:rgba(244,241,234,.6)}
  .half.kept .still .base{filter:contrast(1.05) saturate(.6) brightness(.42)}
  .half.kept .title{font-size:calc(max(20, min(64, 170 / var(--n))) * var(--px))}
  .half.kept .title,.half.kept .sub,.half.kept .tag{left:calc(20 * var(--px));right:calc(20 * var(--px))}
  /* 담은 곳이 다섯 곳 이상: 담아둔 곳은 폭 76px 세로 띠. 넓힌 띠 하나만 사실과 버튼이 나온다(전체 보기의 띠와 같다). */
  /* 띠 하나가 넓어져도 화면 밖으로 넘치지 않게 최종 칸이 조금 줄어든다 */
  .halves.many .half.final{flex:1 1 calc(270 * var(--px));min-width:calc(190 * var(--px))}
  .halves.many .half.kept{flex:0 0 calc(76 * var(--px));cursor:pointer;transition:flex-basis .4s cubic-bezier(.2,.7,.2,1)}
  .halves.many .half.kept .title{writing-mode:vertical-rl;left:0;right:0;width:100%;top:calc(150 * var(--px));bottom:calc(max(150 * var(--px), var(--todo-h, 0px) + 100 * var(--px)));font-size:calc(30 * var(--px));line-height:calc(76 * var(--px));white-space:nowrap;overflow:hidden}
  .halves.many .half.kept .tag,.halves.many .half.kept .sub,.halves.many .half.kept .outs{display:none}
  .halves.many .half.kept.on{flex:1 0 calc(340 * var(--px));cursor:auto}
  .halves.many .half.kept.on .still .base{filter:contrast(1.08) saturate(.75) brightness(.6)}
  .halves.many .half.kept.on .title{writing-mode:horizontal-tb;left:calc(28 * var(--px));right:calc(24 * var(--px));width:auto;bottom:auto;font-size:calc(52 * var(--px));line-height:1.1;white-space:normal}
  .halves.many .half.kept.on .tag{display:block;left:calc(28 * var(--px))}
  .halves.many .half.kept.on .sub{display:block;left:calc(28 * var(--px));right:calc(24 * var(--px));font-size:calc(20 * var(--px))}
  .halves.many .half.kept.on .outs{display:flex}
  .names{font:calc(40 * var(--px))/1.35 'JejuMyungjo',serif;max-width:calc(1100 * var(--px));margin-top:0}
  .got .note{left:calc(48 * var(--px));bottom:calc(40 * var(--px));z-index:7;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .half .title{word-break:keep-all;overflow-wrap:anywhere;font-size:calc(min(112, 280 / var(--n)) * var(--px));top:calc(150 * var(--px));left:calc(40 * var(--px));right:calc(40 * var(--px))}
  .halves .half:only-child .title{font-size:calc(168 * var(--px));top:calc(120 * var(--px));left:calc(44 * var(--px))}
  .half .sub{font-size:calc(22 * var(--px));bottom:calc(max(150 * var(--px), var(--todo-h, 0px) + 100 * var(--px)));left:calc(40 * var(--px));right:calc(40 * var(--px))}
  .halves .half:only-child .sub{font-size:calc(28 * var(--px))}
  .evetitle{position:absolute;left:0;right:0;top:calc(36 * var(--px));text-align:center;z-index:6;font-size:calc(22 * var(--px));pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.5)}
  .todo{pointer-events:none;position:absolute;left:calc(200 * var(--px));right:calc(200 * var(--px));bottom:calc(44 * var(--px));margin:0;z-index:6;text-align:center;font-size:max(14px,calc(17 * var(--px)));line-height:1.7;color:#e6e3dc;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .todo b{font-weight:normal;color:#a7aaa8;margin-right:10px}
  .nothing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(18 * var(--px));text-align:center;color:#8d9190;font-size:max(14px,calc(17 * var(--px)))}
  .nothing .name{font-size:calc(76 * var(--px));color:#f6f2ea}

  /* 5. 예약 일정: 가장 가까운 일정의 사진을 아주 어둡게, 그 일정만 크게 */
  .still.deep .base{filter:contrast(1.1) saturate(.7) brightness(.24)}
  .subs{inset:0;gap:calc(34 * var(--px));padding:calc(130 * var(--px)) calc(96 * var(--px))}
  .subs p{font-size:calc(24 * var(--px));line-height:1.55}
  .subs p b{font-size:max(13px,calc(15 * var(--px)));margin-bottom:calc(6 * var(--px))}
  .subs p.big{font-size:calc(76 * var(--px));line-height:1.2}
  .subs p.big b{font-size:max(14px,calc(17 * var(--px)))}
  .subs p.big::before{display:none}
  .subs .qf{font-size:calc(24 * var(--px))}
  .subs .qacts{gap:calc(12 * var(--px)) calc(34 * var(--px));margin-top:calc(22 * var(--px));font-size:max(15px,calc(18 * var(--px)));text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.5)}
  .subs .qn:hover{color:#f6f2ea}

  /* 6. 받은 카드: 화면 전체가 김 서린 창 */
  .recv{padding:0;overflow:hidden}
  .recv .k{display:none}
  .card{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;margin:0}
  .card canvas{transition:opacity .7s ease}
  .hint{position:absolute;left:calc(48 * var(--px));bottom:calc(40 * var(--px));margin:0;z-index:6;font-size:max(13px,calc(15 * var(--px)));color:#1a1d1f;gap:calc(18 * var(--px))}
  .hint button{color:#1a1d1f;border-bottom-color:#1a1d1f}
  .after{position:absolute;left:0;right:0;bottom:calc(96 * var(--px));z-index:5;margin:0;padding:0 calc(96 * var(--px));text-align:center;pointer-events:none;transform:none;transition:opacity .6s ease .2s}
  .after.show{pointer-events:auto}
  .after h3{font-size:calc(120 * var(--px));line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 40px rgba(0,0,0,.4)}
  .after .m{font-size:calc(26 * var(--px));line-height:1.55;margin-top:calc(18 * var(--px));color:#f4f1ea;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .after .m .u{color:#bdbfbd}
  .answers{justify-content:center;gap:12px;margin-top:calc(30 * var(--px))}
  .answers button,.answers a{flex:none;width:max(180px,calc(220 * var(--px)));height:max(48px,calc(58 * var(--px)));font-size:max(14px,calc(18 * var(--px)))}
  .after .note{position:static;max-width:none;margin-top:calc(16 * var(--px));text-shadow:0 1px 4px rgba(0,0,0,.8)}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .still .base,.card canvas,.after{transition:none}
  .scene:not(.on) .base{filter:contrast(1.12) saturate(.88) brightness(.92);transform:none}
  .detail,.dim,.sheet{animation:none}
  .reel{scroll-behavior:auto}
}