/* 잉크 — DICE의 검정·노랑 문법에 티켓 캐릭터의 붓 선을 입힌다. 모든 화면의 마지막 스타일 계층.
   손그림 선: 테두리는 ::before에 그리고 index.html의 #ink 필터로 흔든다(글자는 흔들리지 않는다).
   티켓: 반원 홈은 mask, 절취선은 점선. 노랑은 선택·가격·최저가에만. */
:root{
  --ink-line:#6b7260;
  --wob:15px 6px 13px 7px/7px 13px 6px 15px;
  --wob-b:6px 14px 7px 15px/14px 6px 15px 7px;
  --wob-pill:255px 22px 225px 24px/24px 225px 22px 255px;
  --wob-blob:58% 42% 55% 45%/48% 56% 44% 52%;
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C17 2.4 31 6.6 49 4.3S83 2.4 99 4.9s16 .8 20-1.5' fill='none' stroke='%23ecf226' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C40 1.8 70 4.6 118 3.1s86-1.6 120 .4 48 .9 61-.6' fill='none' stroke='%23444940' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.ink-defs{position:absolute;width:0;height:0;overflow:hidden}

/* 아이콘은 모두 조금 떨리는 펜 선 */
svg[viewBox="0 0 24 24"]{filter:url(#ink-fine)}

/* 캐릭터: 노랗게 칠한 한 장(assets/mascot-yellow.png). 예전 색 반전 필터는 끈다. */
.mascot,.blank-mascot{filter:none!important}
.mascot{width:62px;height:auto;transform:rotate(-7deg)}

/* ── 손그림 상자 ─────────────────────────────── */
:is(.date-rail button,.session-grid button,.follow-button,.more,.my-rating,.rerun-banner,
   .reel-film-actions>button,.film-actions>*,.my-stats,.map-zoom button,.expand-theater,.quick-sessions button,.offer-times button,
   .filter-chip,.review-form textarea,.reopen-line,.alert-explainer,.subscription-list>article){
  position:relative;isolation:isolate;border-color:transparent!important;background-color:transparent!important;border-radius:var(--wob)}
:is(.date-rail button,.session-grid button,.follow-button,.more,.my-rating,.rerun-banner,
   .reel-film-actions>button,.film-actions>*,.my-stats,.map-zoom button,.expand-theater,.quick-sessions button,.offer-times button,
   .filter-chip,.reopen-line,.alert-explainer,.subscription-list>article)::before{
  content:'';position:absolute;inset:0;z-index:-1;border:1.5px solid var(--ink-line);border-radius:inherit;background:var(--fill,transparent);filter:url(#ink);pointer-events:none}
.more,.follow-button,.film-actions>*,.reel-film-actions>button{border-radius:var(--wob-pill)}
.follow-button.following{--ink-line:var(--yellow)}
.search-box input:focus-visible{outline:none}
.review-form textarea{border:1.5px solid var(--ink-line)!important;border-radius:var(--wob-b)}

/* 노란 버튼: 붓으로 칠한 알약 */
.primary{position:relative;isolation:isolate;background:transparent!important;border-color:transparent!important;color:var(--bg)!important}
.primary::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--yellow);border-radius:var(--wob-pill);filter:url(#ink)}
.primary:disabled::before{background:#4a4f41}
.primary:disabled{color:#9aa18f!important}

/* ── 탭: 손으로 그은 밑줄 ───────────────────── */
:is(.screening-tabs,.detail-tabs,.explore-tabs){border-bottom:0!important;background:var(--rule) left bottom/100% 6px no-repeat}
:is(.screening-tabs,.detail-tabs,.explore-tabs) button{position:relative;border-bottom:0!important;box-shadow:none!important}
:is(.screening-tabs,.detail-tabs,.explore-tabs) [aria-pressed=true]::after{content:'';position:absolute;left:-3px;right:-3px;bottom:-3px;height:8px;background:var(--squiggle) center/100% 100% no-repeat}
.collection-switch{margin:-4px 0 18px}

/* ── 시간대: DICE 카테고리 줄 ─────────────────── */
:is(.screening-bands,.time-filters){display:flex;justify-content:space-between;gap:2px;overflow-x:auto;scrollbar-width:none;padding:18px 0 6px;max-width:460px}
:is(.screening-bands,.time-filters) button{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:58px;min-height:0;padding:0 2px!important;border:0!important;background:none!important;color:var(--muted);font-size:12px}
:is(.screening-bands,.time-filters) button svg{width:24px;height:24px;padding:10px;box-sizing:content-box}
:is(.screening-bands,.time-filters) button::before{content:'';position:absolute;top:0;left:50%;width:44px;height:44px;translate:-50% 0;z-index:-1;border:1.5px solid #4a5043;border-radius:var(--wob-blob);filter:url(#ink);transition:background .2s,border-color .2s}
:is(.screening-bands,.time-filters) [aria-pressed=true]{color:var(--ink);font-weight:600}
:is(.screening-bands,.time-filters) [aria-pressed=true]::before{background:var(--yellow);border-color:var(--yellow)}
:is(.screening-bands,.time-filters) [aria-pressed=true] svg{color:var(--bg)}

/* ── 날짜: 세로 티켓 ─────────────────────────── */
.date-rail button{--notch:radial-gradient(circle 6px at 50% 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 6px at 50% 100%,#0000 95%,#000) bottom/100% 51% no-repeat;-webkit-mask:var(--notch);mask:var(--notch)}
.date-rail button:focus-visible{outline-offset:-5px}
.date-rail span{font-size:11px;font-weight:600}
.date-rail [aria-pressed=true]{--fill:var(--yellow);--ink-line:var(--yellow);background:transparent!important;color:var(--bg)}

/* ── 회차: 절취선이 있는 티켓 ─────────────────── */
.session-grid{gap:10px}
.session-grid button{--fill:#1b1e19;--notch:radial-gradient(circle 5px at 0 46%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 46%,#0000 95%,#000) right/51% 100% no-repeat;
  -webkit-mask:var(--notch);mask:var(--notch);gap:0;padding:12px 12px 10px;transition:transform .18s}
.session-grid button:nth-child(3n+1){transform:rotate(-.7deg)}
.session-grid button:nth-child(3n+2){transform:rotate(.45deg)}
.session-grid button:hover{transform:translateY(-2px)}
.session-grid button:focus-visible{outline-offset:-5px}
.session-grid button{text-align:left;align-items:flex-start}
.session-grid button>strong{align-self:stretch;margin-top:9px;padding-top:8px;border-top:1.5px dashed #4b5143;color:var(--ink)}
.session-grid button>small{margin-top:4px}
.session-grid .lowest-session{--fill:var(--yellow);--ink-line:var(--yellow);color:var(--bg)}
.session-grid .lowest-session>strong{color:var(--bg);border-top-color:#1113}
.session-grid .lowest-session>small{color:#2e3325}
.session-grid .lowest-session>b::after{content:'최저';font-size:10px;font-weight:700;margin-left:0;padding:1px 5px;border-radius:var(--wob-pill);background:var(--bg);color:var(--yellow);vertical-align:3px}
.screening-theater{border-bottom:0!important;background:var(--rule) left bottom/100% 6px no-repeat}
.expand-theater{margin-top:12px;padding:9px 14px;border-radius:var(--wob-pill)}

/* 시간순·상세 목록 */
.reel-time-row,.time-row,.offer{border-bottom:0!important;background:var(--rule) left bottom/100% 6px no-repeat}
:is(.reel-timeline,.timeline)>h3{font-size:13px;font-weight:650;color:var(--yellow)}

/* ── 상영 홈 ─────────────────────────────────── */
.poster-reel [aria-selected=true] .poster{outline-color:transparent!important}
.poster-reel .poster{position:relative}
.poster-reel [aria-selected=true] .poster::after{content:'';position:absolute;inset:3px;border:3px solid var(--yellow);border-radius:var(--wob);filter:url(#ink);pointer-events:none}
.reel-selected-mark{border-radius:var(--wob-blob)!important}
.section-title{font-weight:650}

.rerelease-status{font-size:10px;font-weight:600;border-radius:var(--wob-pill)}

/* ── 하단 내비게이션: 양옆이 파인 티켓 ─────────── */
.bottom-nav{background:transparent!important;border:0!important;box-shadow:none!important;isolation:isolate}
.bottom-nav::before{content:'';position:absolute;inset:0;z-index:-1;background:#1a1d18;border:1.5px solid #5d6453;border-radius:18px 11px 20px 12px/12px 20px 11px 18px;filter:url(#ink);
  --notch:radial-gradient(circle 9px at 0 50%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 95%,#000) right/51% 100% no-repeat;-webkit-mask:var(--notch);mask:var(--notch)}
.bottom-nav a{width:20%!important;position:relative;isolation:isolate}
.bottom-nav a[aria-current=page]::before{content:'';position:absolute;top:3px;left:50%;width:42px;height:31px;translate:-50% 0;z-index:-1;background:var(--yellow);border-radius:var(--wob-blob);filter:url(#ink)}
.bottom-nav a[aria-current=page] svg{color:var(--bg)}
.bottom-nav a[aria-current=page] span{color:var(--yellow)}

/* ── 서울 지도 ────────────────────────────────── */
.region-dialog{background:#141613!important;color:var(--ink)!important}
.region-dialog h2{color:var(--ink)}
.region-dialog .eyebrow{color:var(--muted)!important}
.region-dialog .close-dialog{background:transparent!important;color:var(--ink)!important;border-radius:var(--wob-blob)!important;border:1.5px solid #5d6453!important}
.map-stage{position:relative;border-radius:var(--wob);margin-top:6px}
.map-scroll{overflow:auto;max-height:52dvh;scrollbar-width:thin}
.map-zoom{position:absolute;right:6px;bottom:6px;display:flex;gap:8px}
.map-zoom button{--fill:#141613;width:42px;min-height:42px;border-radius:var(--wob-blob);display:grid;place-items:center;color:var(--ink)}
.map-zoom svg{width:18px}
.map-range{position:relative;margin:4px 0 0;padding-bottom:40px}
.map-range input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:48px;margin:0;background:transparent;cursor:pointer}
.map-range input::-webkit-slider-runnable-track{height:8px;background:var(--squiggle) center/100% 100% no-repeat}
.map-range input::-moz-range-track{height:8px;background:var(--squiggle) center/100% 100% no-repeat}
.map-range input::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:38px;margin-top:-17px;border:0;background:url(assets/mascot-yellow.png) center/contain no-repeat;transition:transform .2s,opacity .2s}
.map-range input::-moz-range-thumb{width:56px;height:38px;border:0;background:url(assets/mascot-yellow.png) center/contain no-repeat}
.map-range input:active::-webkit-slider-thumb{transform:translateY(-4px) rotate(-8deg)}
.map-range input:focus-visible{outline-offset:2px}
.map-range input:disabled{opacity:.3;cursor:default}
.map-range.is-custom input::-webkit-slider-thumb{opacity:.35}
.map-range.is-custom input::-moz-range-thumb{opacity:.35}
.range-stops{position:absolute;left:0;right:0;bottom:0;height:40px}
.range-stops button{position:absolute;top:0;left:calc(28px + (100% - 56px) * var(--i) / 3);translate:-50% 0;white-space:nowrap;font-size:12px;font-weight:600;color:var(--muted);min-height:40px;padding:0 4px}
.range-stops button:first-child{translate:-28px 0}
.range-stops button:last-child{translate:calc(-100% + 28px) 0}
.range-stops i{display:block;width:6px;height:6px;margin:0 auto 3px;border-radius:50%;background:currentColor}
.range-stops button:first-child i{margin-left:25px}
.range-stops button:last-child i{margin-right:25px}
.range-stops [aria-pressed=true]{color:var(--yellow)}
.range-stops button:disabled{opacity:.35}
.map-apply{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 24px;font-size:16px;font-weight:650}
.map-footnote{font-size:11px;color:var(--muted);line-height:1.7;margin-top:14px;text-align:center}
.map-footnote a{text-decoration:underline;text-underline-offset:3px}

/* 목록 구분선도 손으로 그은 선 */
:is(.kobis-row,.movie-row,.saved-list>article,.news-list>article,.reel-search-result,.film-information){border-bottom:0!important;background:var(--rule) left bottom/100% 6px no-repeat}

/* ── 평점: 별 대신 티켓 다섯 장 ─────────────── */
.rate-control{display:inline-flex;align-items:center;gap:1px}
.rate-control svg{width:24px;height:24px}
.rate-control.mini svg{width:19px;height:19px}
/* 티켓 한 칸 = 빈 티켓 위에 노란 티켓을 --fill(0·50·100%)만큼 잘라 겹친다. 누르는 곳은 왼쪽 반(0.5점)·오른쪽 반(1점) 두 개. */
.rate-slot{position:relative;display:inline-grid;place-items:center;flex-shrink:0}
.rate-fill{position:absolute;inset:0;display:grid;place-items:center;color:var(--yellow);clip-path:inset(-2px calc(100% - var(--fill)) -2px -2px);pointer-events:none}
.rate-fill .tix{fill:var(--yellow)}
.rate-fill .tix-perf{stroke:var(--bg)}
.rate-control .rate-slot{width:34px;height:34px;color:#6b7260;transition:transform .15s}
.rate-control .rate-slot:nth-child(odd){transform:rotate(-4deg)}
.rate-control .rate-slot:nth-child(even){transform:rotate(3deg)}
.rate-control .rate-slot:hover{transform:translateY(-2px) rotate(0)}
.rate-control.mini .rate-slot{width:26px;height:30px}
.rate-control .rate-slot button{position:absolute;top:0;bottom:0;width:50%;min-width:0;min-height:0;padding:0;background:none;border:0;transform:none}
.rate-control .rate-slot button:first-of-type{left:0}
.rate-control .rate-slot button:last-of-type{right:0}
.rate-control .rate-slot button:focus-visible{outline:2px solid var(--yellow);outline-offset:1px;border-radius:4px}
.rate-marks{display:inline-flex;gap:1px;margin:4px 0 2px;color:#5b6150}
.rate-marks svg{width:15px;height:15px}
.rate-marks>span:nth-child(odd){transform:rotate(-4deg)}
.memory-ticket .rate-marks{color:#b4b8a6}
.memory-ticket .rate-marks .rate-fill{color:#586232}
.memory-ticket .rate-marks .rate-fill .tix{fill:#586232}
.memory-ticket .rate-marks .rate-fill .tix-perf{stroke:var(--paper)}
.my-rating .rate-control{flex:1;justify-content:center}

/* ── 보고 싶어요: 하트 대신 티켓 홈이 난 책갈피 ── */
.save-button.is-saved{color:var(--yellow)}
.save-button.is-saved .pop{fill:var(--yellow)}

/* ── 카드·검색 결과에서 바로: 평점과 재개봉 알림 ── */
.card-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-top:8px}
.reopen-quick{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:5px 11px;font-size:11px;font-weight:600;color:var(--ink);border-radius:var(--wob-pill);white-space:nowrap}
.reopen-quick::before{content:'';position:absolute;inset:0;z-index:-1;border:1.5px solid var(--ink-line);border-radius:inherit;filter:url(#ink)}
.reopen-quick svg{width:14px;height:14px}
.reopen-quick.following{color:var(--bg)}
.reopen-quick.following::before{background:var(--yellow);border-color:var(--yellow)}
.kobis-row{display:grid!important;grid-template-columns:1fr;gap:6px;padding:14px 0 12px!important}
.kobis-main{display:flex;align-items:center;gap:14px;min-width:0}
.kobis-main .poster{width:46px;flex-shrink:0}
.kobis-main>div{min-width:0}
.kobis-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:60px}

/* 포스터가 없을 때: hidden이 다른 display 규칙에 밀리지 않게 하고, 작은 자리에는 티켓 윤곽만 */
.poster img[hidden]{display:none!important}
.kobis-main .poster{aspect-ratio:2/3;display:grid;place-items:center}
.kobis-main .poster.missing::before,.kobis-main .poster.missing::after{content:none!important}
.kobis-main .poster.missing{background:#1b1e19 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7260' stroke-width='1.6'%3E%3Cpath d='M3 7.5h18v3.1a1.9 1.9 0 0 0 0 3.8v3.1H3v-3.1a1.9 1.9 0 0 0 0-3.8Z'/%3E%3C/svg%3E") center/22px no-repeat}

/* ── 오픈마켓 예매권: 절취선 오른쪽에 사러 가는 버튼이 붙은 티켓(종이색 시트 위) ── */
.voucher-card{--cut:116px;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr var(--cut);margin:16px 0 6px;color:#1b2117}
.voucher-card::before{content:'';position:absolute;inset:0;z-index:-1;background:#fffdf3;border:1.5px solid #1b2117;border-radius:var(--wob);filter:url(#ink);
  --notch:radial-gradient(circle 7px at calc(100% - var(--cut)) 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at calc(100% - var(--cut)) 100%,#0000 95%,#000) bottom/100% 51% no-repeat;-webkit-mask:var(--notch);mask:var(--notch)}
.voucher-copy{min-width:0;padding:14px 12px 12px 16px}
.voucher-copy small{display:block;font-size:11px;color:#5d6652}
.voucher-copy small b{font-weight:700;color:#1b2117;background:var(--yellow);padding:0 4px;border-radius:var(--wob-pill)}
.voucher-copy strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px;margin:5px 0 3px}
.voucher-copy strong span{font-size:11px;font-weight:500;color:#5d6652;margin-left:6px}
.voucher-copy p{font-size:12px;line-height:1.5;color:#2c3326;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.voucher-copy .voucher-terms{font-size:11px;color:#6f7766;margin-top:5px;-webkit-line-clamp:unset}
.voucher-link{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 10px;border-left:1.5px dashed #1b211770;font-size:12px;font-weight:650;line-height:1.35;text-align:center;color:var(--yellow)}
.voucher-link::before{content:'';position:absolute;inset:calc(50% - 36px) 9px;z-index:-1;background:#171a16;border-radius:var(--wob-pill);filter:url(#ink);transition:transform .18s}
.voucher-link:hover::before{transform:rotate(-2deg) scale(1.04)}
.voucher-link span{display:block;font-size:13px;font-weight:700}
.voucher-link svg{width:18px;height:18px}
.voucher-note{display:block;font-size:11px;line-height:1.6;color:#8b9282;margin-top:6px}
.voucher-list h3{font-size:15px;font-weight:650;margin:22px 0 2px}
.voucher-list h3 span{color:#6f7766;font-weight:500;margin-left:4px}

/* ── 헤더: 이름, 불러오는 동안만 걷는 캐릭터, 작은 서울 지도 ── */
.brand-walker{display:block;width:60px;flex-shrink:0;transform:rotate(-4deg)}
.brand-walker .walker{width:100%;height:auto;margin:0}
/* 로고 캐릭터는 늘 가만히 있다. 불러오는 동안 움직이는 건 화면 안의 캐릭터 하나뿐. */
.brand-walker .walker *{animation:none!important}
.brand{flex-direction:column;align-items:center;gap:0}
.brand-name{font-size:15px;margin-top:5px;transform:rotate(-3deg)}
@media (min-width:768px){.brand-name{font-size:17px}.brand-walker{width:66px}}
.header-region{display:flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0!important}
.header-map{display:block;width:40px;transition:transform .2s}
.header-region:hover .header-map{transform:rotate(-4deg) scale(1.06)}
.header-map svg{width:100%!important;height:auto}

/* ── 검색창: 브라우저 기본 입력 그대로, 모양만 단정하게 ── */
.search-box{border:1px solid #3a4035!important;background:#1c1f1a!important;border-radius:12px!important}
.search-box:focus-within{border-color:var(--yellow)!important}
.search-box input::-webkit-search-cancel-button{cursor:pointer}

/* ── 날짜 옆 내 할인(예전 장식 문구 자리) ── */
.rail-benefits{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:56px;min-height:77px;margin-left:auto;font-size:11px;color:var(--yellow)}
.rail-benefits svg{width:20px;height:20px}
.rail-benefits b{font-size:10px;font-weight:600;color:var(--ink)}

/* ── 서울 지도: 배경색 틈으로 나뉜 타일. 중심은 노랑, 포함 범위는 올리브, 나머지는 어둡게. 이름은 작게. ── */
.seoul-map .map-fill{fill:#3d4336;stroke:#111311;stroke-width:2.2px;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:url(#ink-fine);transition:fill .2s}
.seoul-map .selected .map-fill{fill:#5b6127}
.seoul-map .home .map-fill{fill:var(--yellow)}
.seoul-map text{font:600 10.5px var(--sans);letter-spacing:-.4px;fill:#8c9382;pointer-events:none;paint-order:stroke;stroke:#23261f;stroke-width:3px;stroke-linejoin:round}
.seoul-map text.selected{fill:#eef0e4;stroke:#5b6127}
.seoul-map text.home{fill:var(--bg);stroke:var(--yellow);font-weight:800}
.seoul-map.is-picking text{fill:#b6bcaa}
.interactive-map .map-district{cursor:pointer;outline:none}
.interactive-map .map-district:hover .map-fill{fill:#4c5236}
.interactive-map .selected:hover .map-fill{fill:#6d7430}
.interactive-map .home:hover .map-fill{fill:var(--yellow)}
.interactive-map .map-district:focus-visible .map-fill{fill:#4a5030}
/* 예전 지도(dice.css)의 흰 테두리 강조는 이웃 구에 반쯤 덮여 보였다. 강조는 면 색으로만 한다. */
.seoul-map .map-district path.map-fill{stroke:#111311;stroke-width:2.2px;filter:url(#ink-fine)}
/* 헤더의 작은 지도: 40px라 경계선이 면을 덮는다. 선은 가늘게, 고르지 않은 구도 바탕(#111311)과 구별되는 올리브로 */
.mini-map .map-fill{stroke-width:.6px}
.mini-map .map-district:not(.selected):not(.home) .map-fill{fill:#6a7358}
.map-instruction{font-size:17px;line-height:1.45;font-weight:600;letter-spacing:-.4px;color:var(--ink);margin:14px 0 4px}
.map-instruction b{color:var(--yellow);font-weight:700}
.map-result{font-size:12px;color:var(--muted);margin:0 0 16px}
/* 확대 버튼이 지도를 가리지 않게 지도 아래로 */
.map-zoom{position:static!important;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.map-zoom button{width:36px!important;min-height:36px!important}
/* 날짜가 KOBIS에 올라온 만큼(최대 8일) 늘어나므로 옆으로 넘긴다. 내 할인은 오른쪽 끝에 붙여 둔다. */
.date-rail{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:6px 0}
.date-rail::-webkit-scrollbar{display:none}
.date-rail>button{flex-shrink:0}
.date-rail .rail-benefits{position:sticky;right:0;z-index:1;background-color:var(--bg)!important;box-shadow:-12px 0 12px var(--bg)}

/* 목록의 평점·저장(바로 누름)과 평점 뒤에 열리는 한 줄 입력 */
.quick-actions{display:flex;align-items:center;gap:2px}
.quick-actions .save-button{display:grid;place-items:center;min-width:34px;min-height:34px;padding:0;color:#6b7260}
.quick-actions .save-button svg{width:20px;height:20px}
.quick-actions .save-button.is-saved{color:var(--yellow)}
.review-form.quick{margin:2px 0 0;padding-left:60px}
.card-actions+.review-form.quick{padding-left:0}
.review-form.quick input{flex:1;min-width:0;height:38px;padding:0 12px;background:var(--panel);border:1.5px solid var(--ink-line);border-radius:var(--wob-b);color:var(--ink);font:inherit;font-size:13px}
.review-form.quick input:focus{outline:none;border-color:var(--yellow)}
.slide-down{animation:slide-down .38s cubic-bezier(.2,.7,.2,1) both;overflow:hidden}
@keyframes slide-down{from{opacity:0;max-height:0;transform:translateY(-8px);filter:blur(4px)}to{opacity:1;max-height:220px;transform:none;filter:none}}

/* 영화 상세: 정보는 펼쳐 두고, 내 기록은 한 장에 작게 */
.film-information.open{padding:4px 0 18px;margin-bottom:6px}
.film-information.open h2{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.film-information.open p{font-size:14px;line-height:1.7;color:var(--ink)}
.film-information.open small,.film-information.open a{display:inline-block;margin:8px 10px 0 0;font-size:11px;color:var(--muted)}
.my-record{position:relative;isolation:isolate;display:grid;gap:10px;padding:12px 14px;margin:0 auto 16px;max-width:760px}
.my-record::before{content:'';position:absolute;inset:0;z-index:-1;border:1.5px solid var(--ink-line);border-radius:var(--wob);filter:url(#ink)}
.record-head{display:flex;align-items:center;gap:10px}
.record-head>span{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.record-head .rate-control{flex:1}
.record-head>b{font-size:15px;color:var(--yellow);min-width:28px;text-align:right}
.my-record .review-form{margin:0}
.my-record .review-form textarea{min-height:48px}
.my-record>.text-button{justify-self:start;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.record-ticket{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);padding:4px 0}
.record-ticket svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.slide-down{animation:none}}

/* 로그인: 각 회사 안내에 맞춘 버튼(구글 흰 바탕·G, 네이버 초록·N, 애플 흰 바탕·검은 사과). 계정 줄은 마이 맨 위. */
.login-buttons{display:grid;gap:10px;margin-top:20px}
.login-buttons a{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none}
.login-buttons svg{width:20px;height:20px;flex-shrink:0}
.login-google{background:#fff;color:#1f1f1f;border:1px solid #dadce0}
.login-naver{background:#03c75a;color:#fff}
.login-apple{background:#fff;color:#000}
.account-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;font-size:13px}
.account-bar span{display:flex;align-items:center;gap:8px}
.account-bar span svg{width:18px;height:18px;border-radius:4px}
.account-bar a{font-size:12px;color:var(--muted)}
.account-bar.is-guest{position:relative;isolation:isolate;padding:14px 16px;max-width:760px}
.account-bar.is-guest::before{content:'';position:absolute;inset:0;z-index:-1;border:1.5px solid var(--ink-line);border-radius:var(--wob);filter:url(#ink)}
.account-bar.is-guest p{font-size:13px;line-height:1.5;color:var(--muted)}
.account-bar.is-guest p{flex:1;min-width:0}
.account-bar.is-guest .primary{flex:0 0 auto;width:auto;min-height:38px;padding:8px 18px;justify-content:center}
.account-bar svg path[fill="#fff"]{fill:#03c75a}

/* 헤더 계정: 로그인 전 '로그인', 뒤에는 프로필 포스터 동그라미 */
.account-slot{display:flex}
/* 버그 신고 — 동글한 노란 무당벌레(다리 없이, 마스코트처럼 귀엽게) */
.bug-button{height:44px;min-width:40px;display:grid;place-items:center;transform:rotate(-8deg)}
.bug-button:hover{transform:rotate(4deg) scale(1.06)}
/* 마이 화면에는 본문에 로그인 카드가 있어 머리의 로그인 버튼을 숨긴다(로그인 두 개 방지) */
[data-tab=my] .account-button.is-guest{display:none}
.account-button{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;color:var(--ink);text-decoration:none}
.account-button img{width:100%;height:100%;object-fit:cover}
.account-button b{font-size:14px;font-weight:800;color:var(--bg);background:var(--yellow);width:100%;height:100%;display:grid;place-items:center}
.account-button::after{content:'';position:absolute;inset:0;border:1.5px solid var(--yellow);border-radius:50%;filter:url(#ink-fine);pointer-events:none}
.account-button.is-guest{width:auto;height:auto;padding:6px 12px;border-radius:var(--wob-pill);font-size:12px;font-weight:650;overflow:visible}
.account-button.is-guest::after{border-color:var(--ink-line);border-radius:var(--wob-pill);filter:url(#ink)}

/* 첫 화면(랜딩) */
.welcome{max-width:560px;margin:0 auto;padding:28px 0 40px}
.welcome-hero{text-align:center;padding:12px 0 26px}
.welcome-hero .walker{width:120px;height:93px;margin:0 auto 22px}
.welcome-hero h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;font-weight:800}
.welcome-hero p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}
.welcome-points{display:grid;gap:10px;margin:6px 0 24px}
.welcome-points article{position:relative;isolation:isolate;display:grid;grid-template-columns:28px 1fr;gap:2px 12px;align-items:center;padding:14px 18px;animation:reveal .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--n)*90ms);-webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.welcome-points article::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--panel);border-radius:var(--wob)}
.welcome-points svg{grid-row:span 2;width:24px;height:24px;color:var(--yellow)}
.welcome-points b{font-size:15px}
.welcome-points small{font-size:12px;color:var(--muted)}
.welcome-login .login-buttons{margin-top:0}
.welcome-skip{display:flex;align-items:center;gap:6px;margin:18px auto 0;font-size:13px;color:var(--muted)}

/* 프로필 입력 */
/* 칸 하나짜리 grid도 열을 minmax(0,1fr)로 둔다. 기본(auto) 열은 WebKit(iOS)에서 안의 최소 폭(영화 3편 나란히)만큼 넓어져 화면 오른쪽이 잘렸다. */
.profile-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.profile-form .eyebrow{text-align:center}
.profile-form .field{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;font-size:12px;font-weight:600;color:var(--muted);border:0;padding:0;margin:0}
.profile-form :is(legend,.legend){padding:0;margin:0 0 8px}
.profile-form :is(legend,.legend) small{display:block;margin-top:3px;font-weight:400}
.profile-form :is(legend,.legend) b,#fav-count b{color:var(--yellow)}
.profile-form input,.profile-form select{height:46px;padding:0 14px;background:var(--panel);border:1.5px solid var(--ink-line);border-radius:var(--wob-b);color:var(--ink);font:inherit;font-size:15px;font-weight:500}
.profile-form input:focus,.profile-form select:focus{outline:none;border-color:var(--yellow)}
.profile-form .birth{grid-template-columns:1fr 1fr}
.profile-form .birth legend{grid-column:1/-1}
.fav-picked{display:flex;gap:10px;min-height:118px;overflow-x:auto;padding:4px 2px 8px}
.fav-empty{font-size:12px;font-weight:400;color:var(--muted);align-self:center}
.fav-item{position:relative;flex:0 0 76px}
.profile-save{justify-content:center}

/* 마이: 프로필 카드와 계정 삭제 */
.profile-card{position:relative;isolation:isolate;display:grid;grid-template-columns:72px 1fr;gap:14px 16px;align-items:center;padding:16px;margin:0 0 18px;max-width:680px}
.profile-card::before{content:'';position:absolute;inset:0;z-index:-1;border:1.5px solid var(--ink-line);border-radius:var(--wob);filter:url(#ink)}
.profile-copy h2{font-size:20px;font-weight:800;letter-spacing:-.5px}
.profile-copy small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.profile-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.profile-actions .text-button{font-size:12px;font-weight:650;color:var(--yellow)}
.profile-actions a{color:var(--muted)}
.account-footer{max-width:680px;margin:48px auto 0;padding-top:16px;border-top:1px dashed var(--line);text-align:right}
.danger-link{font-size:11px;color:#8a8f84;text-decoration:underline;text-underline-offset:3px}
.delete-form{display:grid;gap:14px;margin-top:18px}
.delete-form .field{display:grid;gap:8px;font-size:13px}
.delete-form .field b{padding:0 4px;background:var(--yellow);color:#171a16;border-radius:3px}
.delete-form input[name=confirm]{height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
.delete-form .check{display:flex;align-items:center;gap:8px;font-size:13px}
.danger{height:46px;border-radius:10px;background:#c8412f;color:#fff;font-weight:700}
.danger:disabled{background:#8a8f84;opacity:.5}

/* 상영 화면: 저장은 제목 바로 옆(한 칸 띄움) 티켓 아이콘 하나. 테두리·글자 없이 크고 또렷하게. */
.selected-film-title{display:flex;align-items:center;gap:.35em}
.selected-film-title h2{min-width:0}
.selected-film-title .save-button{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;padding:0;color:var(--ink)}
.selected-film-title .save-button svg{width:30px;height:30px}
.selected-film-title .save-button.is-saved{color:var(--yellow)}
.selected-film-title .save-button.is-saved .pop{fill:var(--yellow)}
.selected-film .review-form.quick{padding-left:0;margin-top:8px}

/* 커뮤니티 제보(판매 여부 모름)는 흐리게 */
.voucher-list.is-reported .voucher-card{opacity:.72}
.voucher-card .voucher-terms b{color:var(--yellow);font-weight:700}
dialog .voucher-card .voucher-terms b{color:#586232}
.voucher-exclusions{border-top:1px dashed #a2aa91;margin-top:20px;padding-top:16px;font-size:12px;line-height:1.7;color:#535d45}
.voucher-exclusions h3{font-size:13px;margin-bottom:10px;color:#253019}
.voucher-exclusions p{margin:10px 0}.voucher-exclusions a{text-decoration:underline;text-underline-offset:3px}
[data-booking-link][aria-disabled=true]{opacity:.55;cursor:wait}

/* 프로필 2단계: 인생 영화 미리보기, 영화 고르기(제목·연도·국가), 동그란 ✕ */
.fav-search{display:flex;align-items:center;gap:10px}
.fav-search input{flex:1;min-width:0}
.fav-search .text-button svg{width:14px;height:14px}
.fav-picked{padding:10px 8px 8px}
.fav-remove{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:22px;height:22px;min-width:0;min-height:0;padding:0;border-radius:50%;background:var(--yellow);border:2px solid var(--bg);color:var(--bg)}
.fav-remove svg{width:11px;height:11px;stroke-width:3}
.profile-steps{display:flex;align-items:center;gap:14px}
.profile-steps .primary{flex:1}
.profile-steps .text-button{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.profile-steps .text-button svg{width:14px;height:14px}

/* 마이 프로필 카드: 레벨과 취향 */
.profile-stats{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-stats>div{display:grid;gap:4px;align-content:start;padding:12px;border-radius:10px;background:var(--panel)}
.profile-stats b{font-size:15px;font-weight:800;letter-spacing:-.3px}
.profile-stats small{font-size:11px;color:var(--muted)}
.badge{justify-self:start;padding:2px 8px;border-radius:var(--wob-pill);background:var(--yellow);color:var(--bg);font-size:10px;font-weight:800}
.badge.ghost{background:none;color:var(--yellow);border:1px solid var(--yellow)}
.level-bar{display:block;height:5px;margin-top:4px;border-radius:3px;background:#2d3129;overflow:hidden}
.level-bar i{display:block;height:100%;background:var(--yellow);border-radius:inherit}
@media (max-width:420px){.profile-stats{grid-template-columns:1fr}}
.account-footer p{font-size:11px;color:#6f7468;margin-bottom:6px}
.welcome .account-footer{max-width:560px}

/* 외부 평점 한 줄 */
.score-line{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 8px;font-size:12px;color:var(--muted)}
.score-line a,.score-line span{color:inherit;text-decoration:none;white-space:nowrap}
.score-line b{color:var(--ink);font-weight:700}
.score-line a:hover b{color:var(--yellow)}

/* 날짜 티켓: 문화가 있는 날(둘째·마지막 수요일 17~21시 1만 원)은 달 자리에 '문화의 날' */
.date-rail button.is-culture small{font-size:8px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;color:var(--yellow)}
.date-rail button.is-culture[aria-pressed=true] small{color:inherit}
/* 격자 안에서는 aspect-ratio만으로 행 높이가 잡히지 않아 포스터 높이를 padding으로 준다(가로의 150%). */

/* 티켓 모음: 평점 남긴 영화마다 한 장. 포스터 → 절취선(양옆 홈) → 제목·평점·한줄평·날짜.
   등급: 4.5↑ 금박(반짝임), 3.5↑ 노랑, 그 밖 기본. 번호는 모은 순서. */
.c-summary{display:flex;gap:18px;margin:4px 0 14px;font-size:12px;color:var(--muted)}
.c-summary b{font-size:16px;color:var(--ink);margin-right:2px}
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px;margin-bottom:30px}
/* 한 장 보기 */
.c-detail{display:grid;place-items:center;padding:10px 0 4px}
/* 마티네 평점: 외부 점수보다 앞, 노랑 */
.score-line .matinee{display:inline-flex;align-items:baseline;gap:4px;color:var(--yellow);font-weight:700}
.score-line .matinee b{color:var(--yellow);font-size:14px}
.score-line .matinee small{font-size:10px;font-weight:500;color:var(--muted)}
.m-inline{color:var(--yellow);font-weight:700}
.quiet-loading{color:var(--muted);font-size:13px}

/* 구독 OTT 줄: 로고 + 이름, 끝에 JustWatch 출처 */
.watch-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:.8rem}
.watch-line>span{font-weight:700}
.watch-line a{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 3px;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none}
.watch-line img{width:20px;height:20px;border-radius:50%}
.watch-line small{opacity:.55;font-size:.68rem}

/* 검색창 아래 OTT 고르기(모양은 .home-filters): 누르면 그 서비스에 있는 영화만 */
.ott-filter{margin:-8px 0 4px}

/* ── 영화 상세 모달: 영화 정보가 주인공, 내 기록·알림은 작게 ── */
.film-modal{width:min(1080px,calc(100% - 64px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0 20px 24px;overflow:auto;background:var(--bg);color:var(--ink);border:1.5px solid var(--ink-line);border-radius:14px;overscroll-behavior:contain}
.film-modal::backdrop{background:#000b;backdrop-filter:blur(3px)}
.film-modal .subnav{position:sticky;top:0;z-index:3;background:var(--bg);margin:0 -20px;padding:10px 20px 8px}
.film-modal .movie-detail-top{margin-top:8px}
.film-modal .film-information{margin-top:4px}
.film-modal .my-record{padding:8px 12px;gap:6px;margin-bottom:12px}
.film-modal .record-head>span{font-size:11px}
.film-modal .my-record .rate-control .rate-slot{width:26px;height:28px}
.film-modal .my-record .review-form textarea{min-height:36px;font-size:13px}
.film-modal .film-actions{margin-bottom:12px}
.film-modal .film-actions>*{flex:0 0 auto;min-height:32px;padding:4px 12px;font-size:11px}
.film-modal .reopen-line{padding:8px 12px;font-size:11px}
.film-modal .reopen-line .follow-button{min-height:30px;padding:3px 10px;font-size:11px}
.film-modal .reopen-line svg,.film-modal .film-actions svg{width:14px;height:14px}
.film-modal .film-actions>:not(.following){color:var(--ink)!important;background:transparent!important;font-weight:500}
.film-modal .my-record>.text-button{min-height:26px;padding:0}

/* 모달: 웹은 넓게(포스터 크게), 모바일은 화면 가득 */
@media (min-width:760px){.film-modal{padding:0 36px 32px}.film-modal .subnav{margin:0 -36px;padding:14px 36px 10px}.film-modal .movie-detail-top{gap:32px}.film-modal .movie-detail-top>.poster{width:200px}.film-modal .movie-detail-top h1{font-size:34px}.film-modal .film-information p{font-size:14px}}
@media (max-width:640px){.film-modal{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}}

/* 상영 알림·재개봉 알림을 한 줄에: 버튼 + 짧은 설명 */
.film-modal .alert-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 18px}
.film-modal .alert-row .film-actions{margin:0}
.film-modal .alert-row .reopen-line{display:flex;align-items:center;gap:8px;flex-direction:row-reverse;margin:0;padding:0;background:none;border:0}
.film-modal .alert-row .reopen-line::before{display:none}
.film-modal .alert-row .reopen-line>span{font-size:11px;color:var(--muted)}
.film-modal .alert-row .reopen-line>span svg{display:none}
.film-modal .alert-row .reopen-line strong{font-weight:400}
.film-modal :is(.movie-detail-top,.film-information,.my-record,.alert-row,.offers,.timeline){max-width:none;margin-left:0;margin-right:0}

/* 알림 신청됨: 노랑으로 채워 한눈에 */
.follow-button.following,.film-modal .film-actions>.following,.reopen-quick.following{background:var(--yellow)!important;color:#171b10!important;border-color:var(--yellow)!important;font-weight:700}
.follow-button.following svg,.reopen-quick.following svg{fill:#171b10}

/* 검색 결과: 제목 바로 옆 저장 버튼 */
.title-save{display:flex;align-items:center;gap:6px;min-width:0}
.title-save>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.title-save .save-button{flex-shrink:0;width:30px;min-height:30px;padding:4px}
.title-save .save-button svg{width:18px;height:18px}

/* 평점 칩: 띠 전체를 사이트 색으로, 사이트 표시와 점수를 나란히 */
.score-line{gap:6px}
.sc{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:5px;font-size:11px;line-height:1;white-space:nowrap;text-decoration:none!important;background:#2f342c;color:var(--ink)}
.sc i{display:flex;align-items:center;font-style:normal;font-weight:800;letter-spacing:-.2px;color:inherit!important}
.sc b{font-size:12px;font-weight:800;color:inherit!important}
.sc.sc-matinee{background:var(--yellow);color:#171b10}
.sc.sc-aud{background:#2f342c;color:var(--ink)}
.sc.sc-imdb{background:#f5c518;color:#000}
.sc.sc-tmdb{background:#0d253f;color:#fff}
.sc.sc-tmdb i{background:linear-gradient(90deg,#90cea1,#01b4e4);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.sc.sc-rt{background:#fa320a;color:#fff}
.rt-icon{width:13px;height:13px}
.sc.sc-lb{background:#14181c;color:#fff;border:1px solid #2c3440}
.lb-dots{display:inline-block;width:16px;height:6px;background:radial-gradient(circle at 3px 3px,#ff8000 2.6px,#0000 3px),radial-gradient(circle at 8px 3px,#00e054 2.6px,#0000 3px),radial-gradient(circle at 13px 3px,#40bcf4 2.6px,#0000 3px)}
.sc.sc-mc{color:#000}.sc.sc-mc.good{background:#66cc33}.sc.sc-mc.mixed{background:#ffcc33}.sc.sc-mc.bad{background:#ff0000;color:#fff}
.mc-m{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#000;color:#fff!important;-webkit-text-fill-color:#fff;font:800 9px/1 Arial,sans-serif}
.mini-scores{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mini-scores .sc{height:19px;padding:0 6px;font-size:10px}
.mini-scores .sc b{font-size:11px}
.m-logo{height:13px;width:auto;transform:rotate(-6deg)}
.mini-scores .m-logo{height:11px}

/* ── 마이: 미니멀. 내 정보 한 줄 → 탭 → 나중에 볼 영화 격자 ── */
.me-line{display:flex;align-items:center;gap:12px;padding:22px 0 16px}
.me-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel);display:grid;place-items:center}
.me-avatar img{width:100%;height:100%;object-fit:cover}
.me-avatar b{font-size:15px;color:var(--yellow)}
.me-copy{display:grid;gap:3px;min-width:0}
.me-copy b{font-size:15px;font-weight:700}
.me-copy small{font-size:11px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.me-acts{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);flex-shrink:0}
.me-acts .text-button,.me-acts a{font-size:11px;color:var(--muted);min-height:32px;padding:0;text-decoration:none}
.me-acts .primary{min-height:34px;padding:0 14px;font-size:12px}
.my-tabs{margin-bottom:14px}
.my-tabs small{font-size:11px;color:var(--muted);margin-left:2px;font-weight:500}
.later-tools{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.later-tools .home-filters{flex:1;min-width:0}
.later-tools .home-filters button{min-height:32px;padding:5px 11px;font-size:11px}
.later-now{flex-shrink:0;min-height:32px;padding:5px 11px;font-size:11px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}
.later-now[aria-pressed=true]{border-color:var(--yellow);color:var(--yellow)}
.later-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
@media (min-width:760px){.later-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 16px}}
.later-card{display:block;min-width:0;color:inherit;text-decoration:none}
.later-card .poster{border-radius:6px}
.later-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:600;line-height:1.35;margin-top:8px}
.later-card small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
/* 종합 점수: 흰 띠 · 마티네: 검정 띠에 형광 캐릭터 */
.sc.sc-all{background:var(--ink);color:#141615}
.sc.sc-all i{font-weight:800}
.sc.sc-matinee{background:#000;color:var(--yellow);border:1px solid #2c3029}
.sc.sc-matinee .m-logo{filter:drop-shadow(0 0 3px #ecf22699)}
/* 마이 내 정보 카드(작게): 포스터 · 이름+등급 · 등급 막대 · 취향 */
.me-card{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:20px 0 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.me-card .me-avatar{width:56px;height:56px}
.me-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.me-name b{font-size:17px;font-weight:700;letter-spacing:-.4px}
.me-lv{font:400 10px 'Archivo Black',sans-serif;background:var(--yellow);color:#171b10;padding:3px 6px;border-radius:4px}
.me-lv-name{font-size:12px;font-weight:600;color:var(--yellow)}
.me-level{display:flex;align-items:center;gap:8px;margin-top:7px}
.me-bar{width:110px;height:4px;border-radius:2px;background:#2f342c;overflow:hidden}
.me-bar i{display:block;height:100%;background:var(--yellow)}
.me-level small,.me-taste small{font-size:10.5px;color:var(--muted)}
.me-taste{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.me-taste span{font-size:9.5px;font-weight:700;border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--muted)}
.me-taste b{font-size:12px;font-weight:700}
.me-card .me-acts{flex-direction:column;align-items:flex-end;gap:2px;margin:0}
.me-card .me-acts .text-button{color:var(--ink);font-weight:600}
@media (max-width:520px){.me-card{grid-template-columns:48px 1fr}.me-card .me-avatar{width:48px;height:48px}.me-card .me-acts{grid-column:1/-1;flex-direction:row;justify-content:flex-end;gap:16px}}
/* 탐색 첫 화면: 포스터 자리 뼈대 → 도착하면 순서대로 흐림에서 선명하게(.reveal) */
.later-card.skeleton .poster{display:block;background:#20231f;border-radius:6px;animation:sk-pulse 1.4s ease-in-out infinite}
.later-card.skeleton b{height:12px;width:70%;background:#20231f;border-radius:3px;margin-top:9px}
.later-card.skeleton small{height:9px;width:40%;background:#1b1e1a;border-radius:3px;margin-top:6px}
@keyframes sk-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.later-card.skeleton .poster{animation:none}}
/* 로튼 토마토: 평론가 🍅 + 관객 🍿 한 띠 */
.sc.sc-rt i+b{margin-right:2px}
.sc.sc-rt b+i{margin-left:4px;padding-left:6px;border-left:1px solid #ffffff55}
.sc.sc-matinee small{font-size:9px;opacity:.7;margin-left:-1px}

/* ── 탐색 카드 격자(무작위·검색 결과): 포스터 위 저장·알림, 아래 제목·점수·바로 평점 ── */
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;margin-top:6px}
@media (min-width:600px){.film-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.film-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 16px}}
.film-card{min-width:0;display:flex;flex-direction:column}
.fc-cover{position:relative}
.fc-cover .poster{border-radius:7px}
.fc-cover .save-button{position:absolute;top:6px;width:32px;height:32px;min-height:32px;padding:0;display:grid;place-items:center;border-radius:50%;background:#0d0f0dc2;color:#e8ebe2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fc-cover .save-button{right:6px}

.fc-cover .save-button svg{width:16px;height:16px}
.fc-cover .save-button.is-saved{color:var(--yellow)}
.fc-title{display:block;margin-top:9px;color:inherit;text-decoration:none;min-width:0}
.fc-title b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.35;letter-spacing:-.3px}
.fc-title small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.fc-scores{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.fc-scores .sc{height:19px;padding:0 6px;font-size:10px}
.fc-scores .sc b{font-size:11px}
.sc.sc-pred{background:transparent;color:var(--yellow);border:1px solid #ecf22666}
.film-card .review-form.quick{padding-left:0;margin-top:6px}
/* AI 영화: 기준 한 줄과 근거 목록 */
.ai-rule{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.ai-rule span{white-space:nowrap;opacity:.7}
.honors{list-style:none;margin:0 0 10px;padding:0;font-size:13px;line-height:1.8}
.honors a{color:var(--yellow);text-underline-offset:3px}
.grid-cover .save-button{height:36px;padding:0}
.poster.ai-cover{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px 14px 52px;text-align:left;background:linear-gradient(160deg,#2b3027,#191c18);border:1px solid var(--line)}
.poster.ai-cover small{font-size:10px;letter-spacing:.08em;color:var(--yellow);text-transform:uppercase}
.poster.ai-cover b{font-size:19px;line-height:1.25;font-weight:700;color:var(--ink);word-break:keep-all}
.poster.ai-cover i{font-style:normal;font-size:11px;color:var(--muted)}
.ai-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.ai-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;font-size:13px;color:var(--ink);text-decoration:none}
.ai-links a:first-child{background:var(--yellow);border-color:var(--yellow);color:#141615;font-weight:600}
/* 프로필 사진 영역 맞추기 */
.account-button,.me-avatar{overflow:hidden}
/* 랜딩 2단계: 평점 매기기 */
.ticket-view{margin:0 0 14px;align-items:center}
/* 상세의 AI 영화 링크: 영화 정보 안의 일반 링크 규칙(작은 글씨·위 여백)을 받지 않게 한다 */
.film-information.open .honors a{display:inline;margin:0;font-size:13px}
.film-information.open p.ai-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
.film-information.open .ai-links a{display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:36px;padding:0 16px;line-height:1;font-size:13px;color:var(--ink);text-decoration:none;border:1.5px solid #5d6453;border-radius:var(--wob-pill)}
.film-information.open .ai-links a:first-child{background:var(--yellow);border-color:var(--yellow);color:#141615;font-weight:650}
.film-information.open>div{padding-bottom:6px}
/* 화면 전체를 기다리게 하는 로딩은 가운데에 둔다(목록 위에 붙는 작은 로딩은 그대로) */
.loading:not(.compact):last-child{min-height:calc(100dvh - 300px);display:grid;place-content:center;justify-items:center;padding-block:0}
/* 로그인 창: 앱과 같은 어두운 바탕, 손그림 테두리 */
.login-dialog{background:#141613!important;color:var(--ink)!important;text-align:center;border:1.5px solid #3a3f35}
.login-dialog .walker{display:block;width:92px;height:72px;margin:4px auto 14px}
.login-dialog .eyebrow{color:var(--yellow)!important}
.login-dialog h2{color:var(--ink)}
.login-dialog .dialog-meta,.login-dialog .dialog-note{color:var(--muted)}
.login-dialog .close-dialog{background:transparent!important;color:var(--ink)!important;border-radius:var(--wob-blob)!important;border:1.5px solid #5d6453!important}
.login-dialog .login-buttons{margin-top:24px;gap:12px}
.login-dialog .login-buttons a{height:50px;background:transparent;color:var(--ink);border:1.5px solid #5d6453;border-radius:var(--wob-pill);font-weight:650}
.login-dialog .login-buttons a:nth-child(even){border-radius:var(--wob)}
.login-dialog .login-buttons a:hover{border-color:var(--yellow)}
.login-dialog .login-apple svg{fill:currentColor}
.login-dialog .login-naver{color:#03c75a}
/* 랜딩 2단계: 영화마다 카드로 나눠 경계를 분명히 하고, 평점 칸은 카드 너비 안에 맞춘다 */
/* 스크롤바: 얇고 어둡게, 앱 바탕에 묻히게 */
*{scrollbar-width:thin;scrollbar-color:#4a5043 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#4a5043;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#ecf226;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* 티켓 = 시안 2번 '흐림 이음' 그대로(app/ticket-lab.html의 .bl 값). 더한 것은 평점을 누르는 티켓 다섯 칸 한 줄뿐이라 꼬리표가 30px 길다. */
.c-grid{grid-template-columns:repeat(auto-fill,150px);gap:16px;justify-content:start}
.bl-shadow{filter:drop-shadow(0 14px 24px #000a);animation:reveal .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--i,0),12)*50ms)}
.c-ticket.bl{width:150px;height:316px;--cut:216px;--deep-a:#1d201bcc;border-radius:10px;overflow:hidden;position:relative;color:#fff;-webkit-mask:radial-gradient(circle 9px at 0 var(--cut),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% var(--cut),#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 var(--cut),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% var(--cut),#0000 98%,#000) right/51% 100% no-repeat}
.bl .art{position:absolute;inset:0 0 auto;height:225px;display:grid;place-items:center;padding:0 12px;text-align:center;font-size:13px;font-weight:700;color:#fff;text-decoration:none;background:var(--panel)}
.bl .art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.bl .glow{position:absolute;inset:0;background-size:cover;background-position:center 85%;filter:blur(16px) saturate(1.3);transform:scale(1.3)}
.bl .glow::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 60%,#0006)}
.bl .fade{position:absolute;left:0;right:0;top:170px;height:56px;background:linear-gradient(#0000,var(--deep-a));pointer-events:none}
.bl .info{position:absolute;left:0;right:0;bottom:0;height:100px;padding:10px 11px;border-top:1.5px dashed #ffffff55}
.bl .t{display:block;font-size:13px;font-weight:800;letter-spacing:-.4px;color:#fff;text-decoration:none;text-shadow:0 1px 8px #0006;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bl .row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px;font-size:9px;line-height:1.45}
.bl .row>span:first-child{opacity:.85}
.bl .num{font:800 21px/1 'Archivo',sans-serif;font-stretch:75%}
.bl .c-rate{display:flex;width:100%;justify-content:space-between;gap:0;margin-top:6px}
.bl .c-rate .rate-slot{flex:1;width:auto;min-width:0;height:24px;color:#ffffff66}
.c-detail .bl-shadow{zoom:1.8;animation:none}
@media (prefers-reduced-motion:reduce){.bl-shadow{animation:none}}/* 내 예상 평점: 숫자 하나와 근거 한 줄 */
.predict-line{display:flex;align-items:baseline;gap:8px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.predict-line b{font-size:18px;font-weight:800;color:var(--yellow);letter-spacing:-.3px}
.predict-line small{font-size:12px;color:var(--ink);opacity:.85}
.predict-note{margin:0 0 14px;font-size:12px;color:var(--muted)}
.predict-note b{color:var(--yellow)}
.predict-note small{display:block;margin-top:2px;font-size:11px;opacity:.8}
/* 탐색의 영화 목록은 창 너비와 상관없이 한 줄에 5편. 좁아지면 카드 안쪽을 줄여 맞춘다. */
.film-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:899px){
 .film-grid{gap:22px 10px}
 .fc-cover .save-button{top:4px;width:26px;height:26px;min-height:26px}
 .fc-cover .save-button{right:4px}
 .fc-cover .save-button svg{width:13px;height:13px}
 .fc-title b{font-size:12.5px}
}
@media (max-width:599px){
 .film-grid{gap:16px 6px}
 .fc-cover .poster{border-radius:5px}
 .fc-cover .save-button{width:20px;height:20px;min-height:20px;top:3px}
 .fc-cover .save-button{right:3px}
 .fc-cover .save-button svg{width:11px;height:11px}
 .fc-title{margin-top:6px}
 .fc-title b{font-size:10.5px;line-height:1.3;letter-spacing:-.4px}
 .fc-title small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .fc-scores{gap:2px;margin-top:5px}
 .fc-scores .sc{height:15px;padding:0 3px;font-size:8px;gap:2px}
 .fc-scores .sc b{font-size:9px}
}

/* 알림함의 받을 소식 스위치 */
.topic-switches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}

/* 가격 숫자 굴리기(app/roll.js) */
.roll{font-variant-numeric:tabular-nums}
.roll-col{display:inline-block;height:1lh;overflow:hidden;vertical-align:bottom}
.roll-strip{display:block;transition:transform .7s cubic-bezier(.2,.9,.25,1)}

/* 영화제 카드는 포스터 카드(gridCard)와 같다. 그림은 틀 없이(세로 포스터 또는 가로 그림 제 비율), 상태 칩은 그림 왼쪽 위. */
.fest-chip{position:absolute;top:6px;left:6px;padding:3px 8px;border-radius:99px;background:#111d;font-size:11px;color:var(--yellow);white-space:nowrap}
.fest-chip.now{background:var(--yellow);color:#141615;font-weight:700}
.fest-chip.past,.fest-chip.tbd{color:#cfd3c8}
img.fest-wide{display:block;width:100%;height:auto;border-radius:3px}
.movie-detail-top.fest-detail.no-art,.movie-detail-top.fest-detail.wide-art{display:block}
.movie-detail-top.fest-detail.wide-art img.fest-wide{max-width:420px;margin-bottom:18px}

/* 영화제: 진행 중·곧 열림 구획은 크게, 지난 것·미정은 조용하게 */
.fest-heading{display:flex;align-items:center;gap:10px;margin:34px 0 4px;font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.fest-heading span{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.fest-heading i{width:11px;height:11px;border-radius:50%;border:2px solid var(--yellow);flex:none}
.fest-heading.now{color:var(--yellow)}
.fest-heading.now i{background:var(--yellow);animation:fest-live 1.6s ease-out infinite}
@keyframes fest-live{0%{box-shadow:0 0 0 0 #ecf22699}100%{box-shadow:0 0 0 12px #ecf22600}}
@media(prefers-reduced-motion:reduce){.fest-heading.now i{animation:none}}
.fest-grid.past,.fest-grid.tbd{opacity:.82}

/* 알림 종: 포스터 오른쪽 아래, 저장 버튼 바로 왼쪽. 탐색·독립·AI·영화제 카드가 모두 같은 모양 */
.bell-button{display:grid;place-items:center;padding:0;border-radius:50%;background:#111d;border:1px solid #eee4;color:#fff;cursor:pointer}
.bell-button svg{width:17px;height:17px;transform-origin:50% 15%}
.bell-button.is-on{background:var(--yellow);border-color:var(--yellow);color:#141615}
.grid-cover .bell-button{position:absolute;bottom:7px;right:49px;width:36px;height:36px;min-height:36px}
.fc-cover .save-button{top:auto;bottom:6px}
.fc-cover .bell-button{position:absolute;bottom:6px;right:44px;width:32px;height:32px;min-height:32px;background:#0d0f0dc2;border:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fc-cover .bell-button svg{width:16px;height:16px}
.fc-cover .bell-button.is-on{background:var(--yellow)}
@media (max-width:899px){.fc-cover .save-button{top:auto;bottom:4px}.fc-cover .bell-button{bottom:4px;right:34px;width:26px;height:26px;min-height:26px}.fc-cover .bell-button svg{width:13px;height:13px}}
@media (max-width:599px){.fc-cover .save-button{top:auto;bottom:3px}.fc-cover .bell-button{bottom:3px;right:26px;width:20px;height:20px;min-height:20px}.fc-cover .bell-button svg{width:11px;height:11px}}

/* 재개봉 배너: 신청 전에는 설명과 버튼, 신청하면 '알림 받는 중' 한 줄로 접힌다(높이 변화는 app/main.js ring) */
.rerun-banner{overflow:hidden}
.rerun-banner.compact{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:0}
.rerun-banner.compact>*{margin:0;grid-column:auto}
.rerun-banner.compact .text-button{min-height:0;padding:6px 2px}
.rerun-banner.compact .replay-mark{color:var(--yellow);display:grid;place-items:center}
.rerun-banner.compact .replay-mark svg{width:20px;height:20px;transform-origin:50% 15%}
.rerun-banner.compact strong{flex:1;font-size:14px;font-weight:600}
.rerun-banner.compact .text-button{font-size:12px;color:var(--muted)}
.follow-button svg,.topic-switches svg{transform-origin:50% 15%}

/* 알림 받는 중: 노랑으로 채워 확실히 보이게(접힌 재개봉 배너, 켠 종) */
.rerun-banner.compact{background:var(--yellow)!important;color:#171b10;--ink-line:var(--yellow)}
.rerun-banner.compact .replay-mark,.rerun-banner.compact strong{color:#171b10}
.rerun-banner.compact .replay-mark svg,.bell-button.is-on svg{fill:currentColor}
.rerun-banner.compact .text-button{color:#171b10;opacity:.7}

/* 탐색 목록: 모바일은 한 줄 3개(5개는 너무 작다). 버튼도 그만큼 키운다 */
@media (max-width:599px){
 .film-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
 .fc-cover .save-button,.fc-cover .bell-button{width:26px;height:26px;min-height:26px;bottom:4px}
 .fc-cover .save-button{right:4px}.fc-cover .bell-button{right:34px}
 .fc-cover .save-button svg,.fc-cover .bell-button svg{width:13px;height:13px}
 .fc-title b{font-size:13px}
}

/* 티켓 모음: 모바일은 한 줄 4장. 티켓은 시안 값(150×316)을 그대로 두고 통째로 줄인다(--s배).
   zoom은 쓰지 않는다: iOS(WebKit)에서 zoom 안의 글자가 덜 줄어 티켓 아래(평점 줄)가 잘렸다. 칸은 줄인 크기로 잡고 그림은 transform으로 줄인다.
   4×150×--s가 화면 폭 - 여백 46px에 들어가게. */
.c-grid .bl-shadow{--s:1;width:calc(150px*var(--s));height:calc(316px*var(--s))}
.c-grid .bl-shadow>.c-ticket{transform:scale(var(--s));transform-origin:0 0}
@media (max-width:599px){
 .c-grid{grid-template-columns:repeat(4,minmax(0,1fr));justify-items:start;gap:12px 0}
 .c-grid .bl-shadow{--s:.6}
}
@media (max-width:429px){.c-grid .bl-shadow{--s:.56}}
@media (max-width:389px){.c-grid .bl-shadow{--s:.53}}
@media (max-width:359px){.c-grid .bl-shadow{--s:.48}}
.row-info p .by{font-weight:600;color:var(--ink)}

/* 영화 검색 버튼(탐색·프로필). 입력 중에는 찾지 않고 이 버튼이나 엔터로 찾는다. */
.search-box .search-go{flex-shrink:0;min-height:40px;padding:0 14px;border-radius:17px;background:var(--yellow);color:#171b10;font-size:13px;font-weight:650}

/* 포스터 카드 목록(.explore-grid: 독립·AI·재개봉·영화제·탐색 검색·영화제 상영작)은 모바일에서 한 줄 3편. */
@media (max-width:599px){
 .fest-chip{top:4px;left:4px;padding:2px 6px;font-size:9.5px}
 .explore-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
 .explore-grid h2{font-size:12.5px;margin:8px 0 3px}
 .explore-grid b{font-size:13px}
 .explore-grid .grid-cover :is(.save-button,.bell-button){width:26px;height:26px;min-height:26px;bottom:4px}
 .explore-grid .grid-cover .save-button{right:4px}
 .explore-grid .grid-cover .bell-button{right:34px}
 .explore-grid .grid-cover :is(.save-button,.bell-button) svg{width:13px;height:13px}
}

/* 티켓 정렬: 보기 방식 줄 오른쪽 끝의 작은 선택 상자 */
.sort-select{position:relative;display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0}
.sort-select select{appearance:none;-webkit-appearance:none;min-height:36px;padding:0 28px 0 12px;border:1px solid var(--line);border-radius:18px;background:transparent;color:var(--ink);font-size:12px;cursor:pointer}
.sort-select svg{position:absolute;right:10px;width:13px;height:13px;pointer-events:none;color:var(--muted)}

/* 상영 탭 맨 위 영화제 띠: 가로로 길게, 누르면 영화제 탭 */
.fest-banner{display:flex;align-items:center;gap:14px;margin:6px 0 18px;padding:12px 14px 12px 18px;border:1.5px solid var(--yellow);border-radius:14px;background:#1c1f17;color:var(--ink);text-decoration:none;overflow:hidden}
.fest-banner-copy{display:grid;gap:3px;flex:1;min-width:0}
.fest-banner-copy small{font-size:11px;font-weight:700;color:var(--yellow)}
.fest-banner-copy b{font-size:16px;font-weight:700;letter-spacing:-.3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fest-banner-copy span{font-size:11.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fest-banner-art{display:flex;flex-shrink:0}
.fest-banner-art img{width:38px;height:56px;object-fit:cover;border-radius:4px;box-shadow:0 4px 10px #0008;transform:rotate(-4deg)}
.fest-banner-art img+img{margin-left:-14px;transform:rotate(3deg)}
.fest-banner>svg{width:18px;height:18px;flex-shrink:0;color:var(--yellow)}
@media (min-width:768px){.fest-banner{padding:14px 18px 14px 24px}.fest-banner-copy b{font-size:19px}.fest-banner-art img{width:48px;height:70px}}

/* 평점 줄은 옆으로 밀어서도 매긴다(main.js slide). 세로 스크롤만 브라우저에 맡긴다 */
.rate-control{touch-action:pan-y}
/* iOS가 좁은 칸의 글자를 제멋대로 키우지 않게 한다. 키우면 높이가 고정된 티켓(316px) 아래가 잘린다 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 화면 고정: 확대·축소(index.html viewport)와 좌우 흔들림을 막는다. 가로로 넘치는 것은 잘라 내고(clip은 sticky를 깨지 않는다), 가로 튕김도 끈다.
   가로로 넘기는 목록(포스터 줄·필터 칩)은 자기 안에서만 넘긴다. */
html,body{overflow-x:clip;overscroll-behavior-x:none}
html{touch-action:pan-x pan-y}

/* 랜딩 영화 칸: 탐색 카드(.film-card) 그대로, 한 줄 3편. 따로 스크롤하지 않고 페이지째 넘어가며, 끝이 보이면 더 불러온다(main.js moreFavs). */
.fav-list.film-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px;padding:4px 2px}
.fav-list .fav-empty{grid-column:1/-1}

/* 평점 티켓: 누르기 쉽게 카드 폭을 다 쓰고 칸을 키운다(옆으로 밀어서도 매긴다). */
:is(.film-card,.explore-grid) .rate-control.mini{display:flex;width:100%;max-width:none;margin-top:6px}
:is(.film-card,.explore-grid) .rate-control.mini{gap:0}
:is(.film-card,.explore-grid) .rate-control.mini .rate-slot{flex:1;width:auto;min-width:0;height:32px}
:is(.film-card,.explore-grid) .rate-control.mini svg{width:100%;height:auto;max-width:24px}


/* 한줄평 칸: 제목 한 줄, 입력, 아래 오른쪽에 나중에 · 남기기. 카드 격자에서는 그 줄 아래로 나와 한 줄을 다 쓴다(.row-wide, main.js). */
.review-form.quick{display:grid;grid-template-columns:1fr;gap:8px}
.review-form.quick .qr-title{font-size:12px;font-weight:650;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.review-form.quick .qr-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.review-form.quick.row-wide{grid-column:1/-1;position:relative;margin:-6px 0 4px;padding:12px;border:1.5px solid var(--yellow);border-radius:var(--wob);background:#1c1f17}
.review-form.quick.row-wide:before{content:'';position:absolute;top:-8px;left:calc(var(--tip,50%) - 8px);width:14px;height:14px;background:#1c1f17;border-left:1.5px solid var(--yellow);border-top:1.5px solid var(--yellow);transform:rotate(45deg)}
.review-form.quick.row-wide input{height:44px;font-size:15px;animation:qr-glow 1.4s ease-out .35s 2}
/* 펼치는 움직임은 높이로 한다(main.js → motion.js slideOpen). 아래 내용이 한 번에 튀지 않고 같이 밀린다. */
@keyframes qr-glow{0%{box-shadow:0 0 0 0 #ecf22699}100%{box-shadow:0 0 0 10px #ecf22600}}
@media (prefers-reduced-motion:reduce){.review-form.quick.row-wide input{animation:none}}

/* 랜딩: 하단 메뉴를 숨기고, 저장·시작 버튼은 화면 아래에 붙어 있다(목록이 끝없이 이어져도 늘 보인다). */
body[data-tab=welcome] .bottom-nav{display:none}
.profile-form>.profile-save,.profile-form>.profile-steps{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 10px 28px #000c}

/* 회차 버튼(한 줄 3칸): 글자가 커져도(안드로이드 글자 크기 설정 등) 칸 밖으로 나가지 않게, 시간과 '최저' 표시는 줄을 바꿔 쌓는다. */
.session-grid button{min-width:0;overflow-wrap:anywhere}
.session-grid button>b{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;max-width:100%}

/* 별명이 겹칠 때 입력칸 아래 안내 */
.field-error{font-size:12px;font-weight:600;color:#ff8a7a}
.profile-form .birth legend small{display:block;margin-top:3px;font-weight:400;color:var(--yellow)}

/* ── 한 줄에 놓인 조작 요소는 높이·글자 크기·가운데를 맞춘다 ──
   --ctl: 입력칸과 그 옆 버튼의 높이. 글자 버튼(.text-button)은 공통 위 여백(style.css의 margin-top:20px)이 줄 안에서 아래로 밀어내서 0으로 두고,
   혼자 놓이는 곳(빈 화면 안내, 등급 보기, 다시 찾기)만 따로 띄운다. */
:root{--ctl:44px}
.text-button{margin-top:0}
.blank .text-button{margin-top:20px}
.quiet-empty .text-button{margin-top:8px}
.grade-all{margin-top:12px}
/* 랜딩 검색 줄: 입력 · 검색 · 다른 영화 */
.fav-search input{height:var(--ctl)}
.fav-search .search-go{flex-shrink:0;min-height:var(--ctl);padding:0 18px;border-radius:calc(var(--ctl)/2);background:var(--yellow);color:#171b10;font-size:14px;font-weight:650}
.fav-search .text-button{flex-shrink:0;min-height:var(--ctl);gap:4px;font-size:14px;color:var(--muted)}
/* 한줄평 칸: 나중에 · 남기기는 같은 높이·같은 글자 크기의 알약 두 개 */
.review-form.quick .qr-actions :is(.text-button,[data-review-save]){flex-shrink:0;min-height:40px;padding:0 18px;border-radius:20px;font-size:14px;font-weight:650}
.review-form.quick .qr-actions .text-button{background:none;border:1.5px solid var(--line);color:var(--muted)}
/* 카드 한 줄: 종합 점수 스티커가 있든 없든, 제목이 한 줄이든 두 줄이든 평점 줄은 카드 맨 아래에 맞춘다 */
.explore-grid>article{display:flex;flex-direction:column}
.explore-grid>article>.card-actions,.film-card>.rate-control.mini{margin-top:auto;padding-top:6px}
/* 화면 아래 붙은 버튼은 비활성이어도 비치지 않게(공통 button:disabled의 투명도를 뺀다) */
.primary:disabled{opacity:1}

/* ── 움직임(motion.js와 짝) ── 동작 줄이기 설정이면 모두 멈춘다 */
/* 시트: 아래에서 올라오고 뒤는 서서히 어두워진다(닫힐 때는 motion.js) */
dialog[open]{animation:sheet-in .3s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:dim-in .3s ease}
@keyframes sheet-in{from{opacity:0;transform:translateY(32px)}}
@keyframes dim-in{from{opacity:0}}
/* 알림 문구: 아래에서 떠오른다 */
#toast:not([hidden]){animation:toast-in .26s cubic-bezier(.2,.8,.2,1)}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}}
/* 평점: 새로 칠한 티켓이 왼쪽부터 차례로 채워진다 */
.just-rated .rate-fill{animation:fill-in .32s cubic-bezier(.2,.8,.2,1) both}
.just-rated .rate-slot:nth-child(2) .rate-fill{animation-delay:.04s}
.just-rated .rate-slot:nth-child(3) .rate-fill{animation-delay:.08s}
.just-rated .rate-slot:nth-child(4) .rate-fill{animation-delay:.12s}
.just-rated .rate-slot:nth-child(5) .rate-fill{animation-delay:.16s}
@keyframes fill-in{from{clip-path:inset(-2px 100% -2px -2px)}}
/* 누르면 살짝 줄었다 돌아온다(scale은 각자 가진 transform·rotate와 겹치지 않는다) */
:is(button,a.primary,.more,[role=button]){transition:scale .12s ease}
:is(button,a.primary,.more,[role=button]):active{scale:.97}
.rate-control button:active{scale:1}
@media (prefers-reduced-motion:reduce){
 dialog[open],dialog[open]::backdrop,#toast:not([hidden]),.just-rated .rate-fill{animation:none}
 :is(button,a.primary,.more,[role=button]):active{scale:1}
}

/* ── 마이 목록 구간 머리말(5.0점, 2020년대 …) ── */
.sort-band{display:flex;align-items:baseline;gap:8px;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:15px;font-weight:750;letter-spacing:-.3px;color:var(--ink)}
.sort-band span{font-size:11.5px;font-weight:500;color:var(--muted)}
.sort-band+:is(.c-grid,.explore-grid){margin-top:0}
.later-tools .sort-select,.ticket-view .sort-select{margin-left:auto}
.bl-shadow.seen{animation:none}
/* 티켓: 제목 아래 종합 점수 한 줄 */
.bl .all{font-size:10px;font-weight:700;color:#fff}

/* ── 종합 점수 ? 단추와 설명 시트 ── */
/* 종합 칩 오른쪽 위 모서리에 붙는 작은 ? (누르는 자리는 보이는 것보다 조금 넓게) */
.sc-all{position:relative;overflow:visible}
.score-help{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:13px;height:13px;min-height:0;padding:0;border-radius:50%;background:var(--bg);border:1px solid #c9cdbf;color:#c9cdbf;font-size:8.5px;font-weight:800;line-height:1}
.score-help::after{content:'';position:absolute;inset:-8px}
.score-steps{display:grid;gap:12px;margin:16px 0 18px;padding-left:20px;font-size:13px;line-height:1.55}
.score-steps b{display:block;font-size:14px;margin-bottom:2px}
.score-steps span{color:#4d5346}
.score-table{width:100%;border-collapse:collapse;font-size:13px}
.score-table caption{text-align:left;font-size:12px;font-weight:700;margin-bottom:8px;color:#4d5346}
.score-table :is(th,td){padding:8px 4px;border-bottom:1px solid #0000001a;text-align:right;font-variant-numeric:tabular-nums}
.score-table :is(thead th,tbody th,tfoot th){text-align:left}
.score-table thead th{font-size:11px;font-weight:600;color:#6b7163;text-align:right}
.score-table thead th:first-child{text-align:left}
.score-table td small{font-size:10px;color:#6b7163}
.score-table tfoot :is(th,td){border:0;padding-top:12px;font-size:15px}
.score-table tfoot b{font-size:20px}

/* ── 프로필 사진은 등급 배지 ── */
.account-button .lv-badge{width:30px;height:30px;color:var(--yellow)}
.account-button{background:var(--panel)}
.me-avatar{--lv-hole:var(--panel);color:var(--yellow)}
.me-avatar .lv-badge{width:72%;height:72%}

/* ── 포스터 카드 아래 정보: 제목(두 줄까지) · 한 줄 정보 · 상영/가격 · 점수 스티커 · 평점 줄을 같은 간격으로 ── */
.explore-grid>article>a:not(.grid-cover){display:grid;gap:3px;margin-top:10px;text-decoration:none}
.explore-grid>article h2{margin:0;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.explore-grid>article p{margin:0;font-size:11.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explore-grid>article a>:is(b,small){margin:2px 0 0;line-height:1.35}
.explore-grid>article a>small{font-size:11px;color:#a4ad98}
.explore-grid>article>.fc-scores{margin-top:8px}
.explore-grid>article>.card-actions{padding-top:10px}
@media (max-width:599px){
 .explore-grid>article>a:not(.grid-cover){margin-top:8px;gap:2px}
 .explore-grid>article h2{font-size:12.5px}
 .explore-grid>article p{font-size:10.5px}
 .explore-grid>article a>small{font-size:10px}
 .explore-grid>article>.fc-scores{margin-top:6px}
 .explore-grid>article>.card-actions{padding-top:8px}
}

/* 화면 이름은 슬로건이 아니라 이름(현재 상영작, 영화 찾기 …). 크기도 이름답게. */
.page-heading{padding:18px 0 10px}
.page-heading h1,.reel-heading h1{font-size:22px;line-height:1.3;letter-spacing:-.4px}
@media (min-width:768px){.page-heading h1,.reel-heading h1{font-size:26px}}