/* 두루미 야시장 · 껍데기 스타일 (public/night-market/market.css)
   모바일 우선(375px 기준), 가로 넘침 0, 터치 영역 44px 이상, prefers-reduced-motion 이면 모든 움직임 정지.
   천막 모듈이 쓰는 공용 조각은 맨 아래 '천막 안쪽 공용'에 모아 뒀어요. */
:root{--n0:#0d0b24;--n1:#1b1743;--n2:#2d2266;--n3:#4a3480;--lamp:#ffb347;--gold:#f5c76b;--coral:#ff7a59;--cream:#fff3dc;--ink:#f3ecff;--sub:#dcd3f2;--line:rgba(245,199,107,.28);--card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.11);--red:#e0566b;--r:20px;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--n0);color:var(--ink);font-family:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid #ffd77f;outline-offset:3px}
[hidden]{display:none!important}

/* ---- 밤하늘(고정 배경이라 문서 높이에 영향 없음) ---- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 108%,#5c3260 0,transparent 55%),linear-gradient(180deg,#0d0b24 0%,#1b1743 36%,#33256e 70%,#4a3480 100%)}
.sky::before,.sky::after{content:"";position:absolute;inset:0;background-repeat:repeat;animation:twinkle 7s ease-in-out infinite alternate}
.sky::before{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 70px,#ffe9b8,transparent),radial-gradient(1.5px 1.5px at 150px 20px,#fff,transparent),radial-gradient(1px 1px at 210px 110px,#cfd3ff,transparent),radial-gradient(1px 1px at 60px 150px,#fff,transparent);background-size:240px 190px}
.sky::after{background-image:radial-gradient(1px 1px at 40px 90px,#fff,transparent),radial-gradient(1.5px 1.5px at 130px 130px,#ffe9b8,transparent),radial-gradient(1px 1px at 190px 50px,#fff,transparent);background-size:310px 230px;animation-duration:9s;animation-delay:-3s}
.moon{position:absolute;z-index:-1;pointer-events:none;top:92px;right:9%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fffbe8,#f5dd9b 60%,#d9b86a);box-shadow:0 0 34px 8px rgba(245,221,155,.28)}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}
body.in-tent .moon{display:none}

/* ---- 레이아웃 ---- */
.wrap{width:min(100% - 32px,520px);margin:0 auto;padding:calc(12px + env(safe-area-inset-top,0px)) 0 calc(48px + env(safe-area-inset-bottom,0px));min-height:100vh;min-height:100dvh}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0 14px}
.logo{display:flex;align-items:center;gap:8px;min-width:0;height:44px;overflow:hidden;white-space:nowrap;text-decoration:none;font:20px Jua,sans-serif;color:var(--ink)}   /* 글꼴이 늦게 와도 두 줄로 접혔다 펴지지 않게(헤더 14px 이동 방지) */
.logo-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--gold));font:16px system-ui}
.bar-actions{display:flex;align-items:center;gap:6px}
.snd{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:12px;font-weight:700;white-space:nowrap}
.snd[aria-pressed="true"]{background:rgba(245,199,107,.22);color:var(--gold)}
.home-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:13px;color:var(--sub);text-decoration:none;white-space:nowrap}
.home-link:hover{color:var(--gold)}
.crumb{display:flex;align-items:center;gap:8px;min-height:44px;margin:-8px 0 8px;font-size:13px;color:var(--sub)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px;color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--gold)}
@supports selector(:has(*)){body:has(#v-tent:not([hidden])) .crumb{display:none}}   /* 천막 안에서는 "← 야시장으로" 가 있어서 빵부스러기(두루미 놀이터 › 야시장)는 같은 길을 한 번 더 말해요 — 숨겨서 내용이 40px 위로 올라와요 */
.view{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- 히어로 ---- */
.hero{position:relative;overflow:hidden;padding:46px 20px 22px;border-radius:26px;text-align:center;border:1px solid var(--line);background:linear-gradient(90deg,rgba(11,9,34,.9) 0%,rgba(18,12,45,.72) 48%,rgba(28,16,47,.34) 100%),url('/assets/atelier/night-market-hero.webp') center/cover no-repeat;box-shadow:0 16px 40px rgba(0,0,0,.28)}   /* 코덱스 새 히어로(960×540 · 33KB, 한 파일로 폰·PC 모두) */
/* (예전 폰 720 · PC 1200 두 장 방식은 새 히어로 한 장으로 바뀌었어요 — assets/night-market/night-market-hero-*.webp 는 더는 쓰지 않아요) */
.hero::after{content:"";position:absolute;left:50%;bottom:-60px;width:260px;height:120px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,179,71,.28),transparent 70%);pointer-events:none}
.string{position:absolute;left:0;top:0;width:100%;height:46px}
.lamp rect{fill:#ffb347}
.lamp rect:last-child{fill:#7a4a1c}
.lamp{transform-box:fill-box;transform-origin:50% 0;animation:swing 4.6s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px rgba(255,179,71,.8))}
.lamp.l2{animation-delay:-1.2s}.lamp.l3{animation-delay:-2.1s}.lamp.l4{animation-delay:-3s}.lamp.l5{animation-delay:-.6s}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.mas{position:relative;z-index:1;display:block;margin:0 auto 4px;width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transform-origin:50% 82%}
@keyframes nmMascot{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media (prefers-reduced-motion:no-preference){.mas{animation:nmMascot 4.8s ease-in-out infinite}}
.eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;padding:5px 11px;border:1px solid rgba(245,199,107,.35);border-radius:99px;color:#ffdfa0;background:rgba(245,199,107,.08);font-size:12px;font-weight:700;letter-spacing:.04em}
.hero h1{position:relative;z-index:1;margin:12px 0 8px;font:32px/1.2 Jua,sans-serif;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{position:relative;z-index:1;max-width:340px;margin:0 auto;color:#e3d9ed;font-size:14px;word-break:keep-all}
.hero .greet{margin:10px auto 0;min-height:42px;color:#ffdfa0;font-size:13px;line-height:1.55}

/* ---- 오늘의 등불 ---- */
.today{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;align-items:center;margin-top:14px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.today-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.today-head h2{font:17px Jua,sans-serif}
.today-head b{font:17px Jua,sans-serif;color:var(--gold)}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.slots li{display:grid;place-items:center;aspect-ratio:1;max-width:36px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28);font-size:18px}
.slots li span{filter:grayscale(1) brightness(.6);opacity:.55;transition:filter .4s,opacity .4s,transform .4s}
.slots li.on{border:1.5px solid var(--lamp);background:rgba(255,179,71,.16);box-shadow:0 0 14px rgba(255,179,71,.45)}
.slots li.on span{filter:none;opacity:1;transform:scale(1.08)}
.today-note{margin-top:8px;color:var(--sub);font-size:12px;word-break:keep-all}
.stamp-slot{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28);text-align:center}
.stamp-slot .empty{color:var(--sub);font-size:12px;line-height:1.35}
.stamp{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:3px solid var(--red);color:var(--red);font:900 15px/1.15 'Noto Sans KR',sans-serif;letter-spacing:.04em;text-align:center;transform:rotate(-12deg);background:rgba(224,86,107,.1);box-shadow:inset 0 0 0 3px rgba(224,86,107,.18)}
.stamp small{display:block;font-size:11px;font-weight:700;letter-spacing:0}
.stamp.pop{animation:stampIn .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stampIn{from{opacity:0;transform:rotate(-12deg) scale(1.3)}to{opacity:1;transform:rotate(-12deg) scale(1)}}

/* ---- 천막 ---- */
.sec-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:26px 4px 12px}
.sec-title h2{font:20px Jua,sans-serif}
.sec-title small{color:var(--sub);font-size:12px}
.tents{display:grid;gap:12px}
.tent{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:96px;padding:24px 14px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-align:left;overflow:hidden;transition:transform .15s,background .15s}
.tent::before{content:"";position:absolute;left:0;right:0;top:0;height:11px;background:repeating-linear-gradient(90deg,var(--awn,#ff7a59) 0 18px,var(--cream) 18px 36px)}
.tent::after{content:"";position:absolute;left:0;right:0;top:11px;height:7px;background:repeating-linear-gradient(90deg,var(--awn,#ff7a59) 0 18px,var(--cream) 18px 36px);-webkit-mask:radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) 0 0/18px 7px repeat-x;mask:radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) 0 0/18px 7px repeat-x;opacity:.85}
.tent:active{transform:scale(.985)}
.tent:hover{background:var(--card2)}
.tent .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);font-size:26px}
.tent .tx{display:block;min-width:0}
.tent .tx b{display:block;font:17px Jua,sans-serif}
.tent .tx small{display:block;margin-top:2px;color:#e6defa;font-size:12.5px;line-height:1.45;word-break:keep-all}
.tent .st{display:inline-flex;align-items:center;justify-content:center;width:68px;min-height:26px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:99px;color:var(--sub);font-size:12px;font-weight:700;white-space:nowrap}
.tent .st[data-state="ready"]{color:#ffdfa0;border-color:rgba(245,199,107,.5)}
.tent .st[data-state="done"]{color:#2b1b00;background:var(--gold);border-color:var(--gold)}
.tent .st[data-state="soon"]{opacity:.8}

/* ---- 이번 주 도장 ---- */
.week{margin-top:6px}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.days li{display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:center;min-height:62px;padding:6px 0;border-radius:12px;border:1px dashed rgba(255,255,255,.22);color:var(--sub);font-size:12px}
.days .d{font-weight:700}
.days .m{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:700}
.days li.cnt .m{background:rgba(255,179,71,.2);color:#ffdfa0}
.days li.full{border:1px solid var(--red);background:rgba(224,86,107,.12)}
.days li.full .m{color:#ff8fa0;border:2px solid var(--red);font-weight:900}
.days li.is-today{outline:2px solid var(--gold);outline-offset:2px}
.week-sub{margin-top:10px;color:var(--sub);font-size:12px;text-align:center}
.note{margin-top:22px;padding:12px 14px;border:1px dashed rgba(255,255,255,.2);border-radius:14px;color:var(--sub);font-size:12px;word-break:keep-all}
.foot{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 2px;color:var(--sub);font-size:12px;text-align:center}
.foot a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;text-decoration:underline}

/* ---- 천막 화면 ---- */
.tent-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.tback{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:14px;font-weight:700}
.tlamp{font-size:13px;color:#ffdfa0;font-weight:700}
.tent-title{font:28px/1.25 Jua,sans-serif;margin:8px 4px 4px}
.tent-title:focus{outline:none}
.tent-title:focus-visible{outline:2px solid #ffcf75;outline-offset:4px;border-radius:4px}
.tent-blurb{margin:0 4px 14px;color:var(--sub);font-size:13.5px;word-break:keep-all}
.tent-body{min-height:240px}
.tent-msg{padding:36px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);text-align:center;color:var(--sub);word-break:keep-all}
.tent-msg b{display:block;margin-bottom:6px;font:18px Jua,sans-serif;color:var(--ink)}
.tent-msg .nmbtn{margin-top:14px}

/* ---- 토스트·이펙트 ---- */
.toast{--ty:calc(10px + env(safe-area-inset-top,0px));position:fixed;left:50%;top:0;z-index:70;width:max-content;max-width:min(90vw,420px);padding:9px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(20,17,47,.96);color:var(--ink);font-size:13.5px;text-align:center;opacity:0;transform:translate(-50%,calc(var(--ty) - 10px));transition:opacity .25s,transform .25s;pointer-events:none;word-break:keep-all;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.toast.at-bottom{top:auto;bottom:calc(22px + env(safe-area-inset-bottom,0px));--ty:0;transform:translate(-50%,10px)}
@supports (height:100dvh){.toast.at-bottom{bottom:calc(22px + env(safe-area-inset-bottom,0px))}}
.toast.at-bottom.on{transform:translate(-50%,0)}
.toast.on{opacity:1;transform:translate(-50%,var(--ty))}
.nm-fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.nm-p{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.nm-spark{width:10px;height:10px;color:#ffd77f;font-size:12px;line-height:10px;animation:nmSpark .75s ease-out forwards}
@keyframes nmSpark{0%{opacity:1;transform:translate(var(--x),var(--y)) scale(.6)}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(1.2)}}
.nm-conf{width:8px;height:12px;border-radius:2px;animation:nmFall var(--t,1.5s) ease-in forwards}
@keyframes nmFall{0%{opacity:1;transform:translate(var(--x),-20px) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(100vh + 20px)) rotate(var(--r))}}
.nm-comet{width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff7d6);box-shadow:0 0 12px 3px rgba(255,236,170,.6);animation:nmComet .9s ease-in forwards}
@keyframes nmComet{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(25deg)}15%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) + 260px),calc(var(--y) + 130px)) rotate(25deg)}}

/* ---- 천막 안쪽 공용(모듈이 가져다 써요) ---- */
.nmbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:99px;background:linear-gradient(135deg,#ffd77f,#f5a94a);color:#3a2300;font-size:15px;font-weight:700}
.nmbtn.ghost{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
.nmbtn:disabled{opacity:.5;cursor:default}
.nmcard{padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.06)}

@media (max-width:360px){.wrap{width:min(100% - 24px,520px)}.hero h1{font-size:29px}.snd{padding:0 9px}.today{grid-template-columns:minmax(0,1fr) 80px}.stamp-slot{width:80px;height:80px}.stamp{width:72px;height:72px;font-size:13px}.tent{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}.tent .ico{width:44px;height:44px;font-size:24px}}
@media (max-width:400px){.home-link{display:none}}
@media (min-width:1024px){.wrap{padding-top:28px;width:min(100% - 64px,860px)}.hero{padding-bottom:26px}.tents{grid-template-columns:repeat(2,minmax(0,1fr))}body.in-tent .wrap{width:min(100% - 32px,520px)}}   /* 데스크톱: 허브는 넓게(천막 카드 2열), 천막 안은 읽기 편한 폭 그대로 */
/* 320px: 현재 위치 내비가 홈 이동을 맡으므로 헤더는 로고와 소리 버튼에 집중해요. */
@media (max-width:340px){.bar{gap:4px}.logo{gap:6px;font-size:16px}.logo-mark{width:26px;height:26px;font-size:14px}.snd{padding:0 8px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sky::before,.sky::after{opacity:.85}}

/* ---- 데이터 문구: 마스코트 말풍선 · 이번 주 테마 · 천막 입장 문구 · 도장 이름 ---- */
.mbubble{position:absolute;z-index:2;left:12px;top:50px;width:min(120px,calc(50% - 62px));padding:7px 9px;border-radius:14px 14px 3px 14px;background:var(--cream);color:#3b2a14;font-size:12px;line-height:1.4;text-align:left;word-break:keep-all;box-shadow:0 6px 14px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
.mbubble.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.stamp .sn{font-size:11px;font-weight:700;letter-spacing:0;margin:1px 0}
.wtheme{display:grid;gap:3px;align-content:center;min-height:134px;margin:0 0 12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(157,123,255,.16),rgba(255,179,71,.1))}
.wtheme .wl{font-size:12px;letter-spacing:.08em;color:var(--sub)}
.wtheme b{font:19px/1.3 Jua,sans-serif;color:var(--gold)}
.wtheme p{margin:0;font-size:13px;line-height:1.5;color:#e3d9ed;word-break:keep-all}
.wtheme .wh{font-size:12px;color:#ffdfa0}
.tent-intro{margin:0 4px 10px;min-height:42px;color:#ffdfa0;font-size:13.5px;line-height:1.55;word-break:keep-all}
.tent-say{display:flex;align-items:center;gap:8px;margin:0 4px 14px;min-height:44px}
.tent-say img{width:40px;height:40px;flex:none;object-fit:contain}
.tent-say .sb{position:relative;min-width:0;padding:7px 10px;border-radius:3px 14px 14px 14px;background:var(--cream);color:#3b2a14;font-size:12px;line-height:1.4;word-break:keep-all}
.tent-say .sb:empty{display:none}
@media (prefers-reduced-motion:reduce){.mbubble{transition:none;transform:none}}
.mbubble::after{content:"";position:absolute;right:-5px;bottom:8px;border:6px solid transparent;border-left:7px solid var(--cream);border-right:0}
.coll{margin-top:6px}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0}
.cgrid li{display:grid;place-items:center;min-height:50px;padding:4px;border-radius:14px;border:1px dashed rgba(255,255,255,.22);color:var(--sub);font-size:12px;text-align:center;word-break:keep-all}
.cgrid li.on{border:1.5px solid var(--red);background:rgba(224,86,107,.12);color:#ffb4bf;font-weight:900;transform:rotate(-3deg)}

/* ==== 야시장 보강 (review-127) · 하늘 깊이 · 천막 개성 · 터치 · 태블릿 · 접근성) ====
   기존 규칙을 고치지 않고 뒤에 덧붙여요. 움직임은 전부 prefers-reduced-motion 에서 꺼져요(위의 전역 규칙). 색 변수는 시즌 스킨(season.js)이 바꾸는 --gold/--coral 을 그대로 따라가요. */

/* -- 하늘: 멀리 천막 지붕 실루엣(아래 가장자리) + 가끔 지나가는 별똥별. html 의 가상요소라 .sky 와 시즌 배경을 건드리지 않아요 -- */
html::after{content:"";position:fixed;left:0;right:0;bottom:0;height:min(20vh,132px);z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%2760%27%20viewBox%3D%270%200%20240%2060%27%3E%3Cg%20fill%3D%27%23150f35%27%3E%3Cpath%20d%3D%27M0%2060V44L22%2022l22%2022v16zM64%2060V40L90%2014l26%2026v20zM134%2060V46l18-18%2018%2018v14zM188%2060V42l24-24%2024%2024v18z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23ffb347%27%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2738%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2734%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%2742%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27212%27%20cy%3D%2738%27%20r%3D%271.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left bottom/240px 60px;opacity:.55;-webkit-mask:linear-gradient(0deg,#000 55%,transparent);mask:linear-gradient(0deg,#000 55%,transparent)}
html::before{content:"";position:fixed;top:14vh;left:-12vw;width:96px;height:2px;z-index:-1;pointer-events:none;border-radius:2px;background:linear-gradient(90deg,transparent,#fff6d5);box-shadow:0 0 10px 2px rgba(255,236,170,.45);opacity:0;transform:rotate(17deg);animation:nmShoot 23s linear 6s infinite}
@keyframes nmShoot{0%,93%{opacity:0;transform:translate(0,0) rotate(17deg)}94%{opacity:1}100%{opacity:0;transform:translate(118vw,38vh) rotate(17deg)}}
html:has(body.in-tent)::after{opacity:.4}
.moon{animation:nmMoon 9s ease-in-out infinite alternate}
@keyframes nmMoon{from{box-shadow:0 0 28px 6px rgba(255,226,150,.28)}to{box-shadow:0 0 44px 12px rgba(255,226,150,.42)}}

/* -- 오늘의 등불: 켜진 등불이 숨 쉬듯 -- */
.slots li.on{animation:nmBreath 3.4s ease-in-out infinite alternate}
@keyframes nmBreath{from{box-shadow:0 0 10px rgba(255,179,71,.35)}to{box-shadow:0 0 18px rgba(255,179,71,.6)}}

/* -- 천막마다 다른 빛깔 · 아이콘 움직임(천막 줄무늬 색 --awn 을 따라가요) -- */
.tent{transition:transform .15s,background .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tent .ico{position:relative;background:rgba(255,255,255,.1);background:color-mix(in srgb,var(--awn,#ff7a59) 24%,rgba(255,255,255,.08));box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 16px -5px var(--awn,#ff7a59);transition:box-shadow .25s}
.tent[data-tent="fortune"] .ico{animation:nmSway 5.2s ease-in-out infinite alternate}
.tent[data-tent="taste"] .ico{animation:nmWobble 6s ease-in-out infinite}
.tent[data-tent="lantern"] .ico{animation:nmGlow 3.6s ease-in-out infinite alternate}
.tent[data-tent="photobooth"] .ico{animation:nmFlash 7s ease-in-out infinite}
.tent[data-tent="campfire"] .ico{animation:nmFlicker 2.4s steps(1,end) infinite}
.tent[data-tent="stars"] .ico{animation:nmTwinkle 4.2s ease-in-out infinite alternate}
.tent[data-tent="habit"] .ico{animation:nmGlow 4.4s ease-in-out infinite alternate}
@keyframes nmSway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes nmWobble{0%,86%,100%{transform:none}90%{transform:rotate(-8deg) scale(1.05)}95%{transform:rotate(7deg) scale(1.05)}}
@keyframes nmGlow{from{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 10px -4px var(--awn,#ffb347)}to{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 22px -2px var(--awn,#ffb347)}}
@keyframes nmFlash{0%,90%,100%{filter:none}93%{filter:brightness(1.7)}}
@keyframes nmFlicker{0%{transform:scale(1)}25%{transform:scale(1.05) translateY(-1px)}50%{transform:scale(.98)}75%{transform:scale(1.04) translateY(-1px)}}
@keyframes nmTwinkle{from{filter:brightness(.95)}to{filter:brightness(1.35)}}
.tent:has(.st[data-state="done"]) .ico{box-shadow:0 0 0 1.5px var(--gold),0 0 16px -3px var(--gold)}
.tent:has(.st[data-state="done"])::before{filter:saturate(.75) brightness(.92)}

/* -- 터치 · 포인터 피드백 -- */
.nmbtn,.snd,.tback,.home-link,.foot a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tent:active{box-shadow:inset 0 0 0 2px var(--awn,#ff7a59),0 0 18px -6px var(--awn,#ff7a59)}
.nmbtn{transition:transform .12s,filter .15s}
.nmbtn:active:not(:disabled){transform:translateY(1px) scale(.97);filter:brightness(1.08)}
.snd:active,.tback:active{transform:scale(.96);background:var(--card2)}
@media (hover:hover){.tent:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px var(--awn,#ff7a59)}.nmbtn:hover:not(:disabled){filter:brightness(1.06)}}
.tent:focus-visible{outline-offset:2px;border-radius:18px}

/* -- 태블릿(700~1023px): 읽기 폭을 넓히고 천막은 2열 -- */
@media (min-width:700px) and (max-width:1023px){
  .wrap{width:min(100% - 56px,680px)}
  .hero{padding:56px 32px 30px}.hero h1{font-size:38px}.hero p{max-width:420px;font-size:15px}
  .tents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .today{grid-template-columns:minmax(0,1fr) 110px;padding:20px}
  .stamp-slot{width:104px;height:104px}.stamp{width:96px;height:96px}
  body.in-tent .wrap{width:min(100% - 48px,560px)}
}

/* -- 천막 안쪽: 들어온 천막의 줄무늬 색이 머리글에 이어져요(body[data-tent] 는 market.js 가 붙여요) -- */
body[data-tent]{--tc:#ffb347}
body[data-tent="fortune"]{--tc:#ff7a59}body[data-tent="taste"]{--tc:#f5c76b}body[data-tent="lantern"]{--tc:#ffb347}
body[data-tent="habit"]{--tc:#7fd6c2}body[data-tent="photobooth"]{--tc:#9d7bff}body[data-tent="campfire"]{--tc:#ff6b4a}body[data-tent="stars"]{--tc:#9d7bff}
.tentv{position:relative}
body[data-tent="fortune"] .tentv{padding:18px 14px 22px;border:1px solid rgba(245,199,107,.34);border-radius:22px;background:linear-gradient(180deg,rgba(13,8,29,.58),rgba(13,8,29,.9)),url('/assets/atelier/night-market-fortune.webp') center/cover;box-shadow:0 18px 42px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,223,160,.08)}
body[data-tent="fortune"] .tent-body{min-height:260px}
/* 천막 안쪽 그림(코덱스): 별 천막 · 모닥불 천막 — 그림은 그 천막을 열 때만 받아요(배경 이미지라 lazy). 움직임은 reduced-motion 에서 끄고, 모닥불 불빛은 겹친 면의 opacity 만 움직여요(칠하기 비용 없음) */
body[data-tent="stars"] .tentv{padding:18px 14px 22px;border:1px solid rgba(157,123,255,.38);border-radius:22px;background:linear-gradient(180deg,rgba(7,10,29,.5),rgba(7,10,29,.9)),url('/assets/atelier/night-market-stars.webp') center/cover;box-shadow:0 18px 42px rgba(0,0,0,.26),inset 0 0 0 1px rgba(213,205,255,.08)}
body[data-tent="stars"] .tent-body{min-height:260px}
@keyframes nmStarsDrift{0%,100%{background-position:50% 50%}50%{background-position:50.8% 49.2%}}
body[data-tent="campfire"] .tentv{padding:18px 14px 22px;border:1px solid rgba(255,174,93,.38);border-radius:22px;background:linear-gradient(180deg,rgba(35,10,15,.42),rgba(25,8,12,.9)),url('/assets/atelier/night-market-campfire.webp') center/cover;box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,214,139,.1)}
body[data-tent="campfire"] .tent-body{min-height:260px}
body[data-tent="campfire"] .tentv::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 44px rgba(255,150,64,.26);opacity:0}
@keyframes nmCampfireGlow{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){body[data-tent="stars"] .tentv{animation:nmStarsDrift 16s ease-in-out infinite}body[data-tent="campfire"] .tentv::after{animation:nmCampfireGlow 2.8s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){body[data-tent="campfire"] .tentv::after{opacity:.5}}
.tentv::before{content:"";position:absolute;left:0;right:0;top:-12px;height:8px;border-radius:0 0 12px 12px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--tc,#ffb347) 0 18px,var(--cream) 18px 36px);opacity:.92}
.tent-title::after{content:"";display:block;width:52px;height:3px;margin-top:8px;border-radius:3px;background:var(--tc,#ffb347)}
@media (forced-colors:active){.tentv::before,.tent-title::after{background:CanvasText}}

/* -- 접근성: 고대비 · 강제 색상 · 투명도 줄이기 -- */
@media (prefers-contrast:more){
  :root{--line:rgba(255,226,160,.62);--sub:#f1ebff}
  .tent,.nmcard,.today,.wtheme,.tent-msg{border-color:rgba(255,226,160,.7)}
  .tent .tx small,.tent-blurb,.today-note,.week-sub,.note,.foot{color:#f6f1ff}
  html::after{opacity:.25}
}
@media (prefers-reduced-transparency:reduce){.snd,.tback,.today,.tent,.wtheme,.nmcard{backdrop-filter:none}html::after{display:none}}
@media (forced-colors:active){
  html::before,html::after,.sky,.moon,.hero::after{display:none}
  .tent,.today,.wtheme,.nmcard,.tent-msg,.note,.snd,.tback,.nmbtn,.days li,.cgrid li,.slots li{border:1px solid CanvasText}
  .tent .st,.tent .ico{border:1px solid CanvasText;box-shadow:none}
  .tent .st[data-state="done"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .tent:focus-visible,.nmbtn:focus-visible,.tback:focus-visible,.snd:focus-visible{outline:3px solid Highlight}
}