/* =========================================================
   EXNOR — site styles (main · about · class · archive · login)
   ========================================================= */
:root {
  --y: #FFC72C;
  --bg: #050505;
  --ink: #F2EFE8;
  --line: rgba(255, 199, 44, .3);
  --pad: clamp(20px, 4vw, 56px);
  --font: 'EX Helvetica', 'Pretendard Variable', Pretendard, 'Helvetica Neue', Helvetica, Arial, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;   /* 영문 · 숫자는 헬베티카 (사이트 느낌), 한글은 Pretendard */
  --font-ext: 'EX Helvetica Ext', 'EX Helvetica', 'Pretendard Variable', Pretendard, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;   /* 관리자 · 입력 칸: 영문까지 Pretendard 하나로 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.is-preview { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--y); font-family: var(--font); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a:hover { color: #fff; }
img, svg { display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
html.tx-pick [data-text] { cursor: pointer; border-radius: 3px; }   /* 관리자 › 문구 미리보기: 글자를 누르면 그 칸으로 */
html.tx-pick [data-text]:hover { outline: 1px dashed rgba(255,199,44,.8); outline-offset: 3px; }
html.tx-pick [data-text].tx-hl { outline: 2px solid var(--y); outline-offset: 3px; }
.is-live [data-sample] { visibility: hidden; }

/* ---------- page texture (silk + grain) ---------- */
.page { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; }
.page::before, .page::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.page::before { z-index: -2; background: url(../img/silk.webp) center top / 100% auto repeat-y; opacity: .6; }
.page::after { z-index: -1; background: url(../img/grain.png) 0 0 / 128px 128px; mix-blend-mode: overlay; opacity: .35; }
.page.has-fill::before { background: var(--pg-fill, #050505); opacity: 1; }   /* 관리자 › 배경 › 페이지 바탕: 단색 · 그라데이션 (질감은 그대로 위에) */
/* 페이지 바탕 사진 (관리자 › 배경 › 페이지 바탕) — 맨 위 한 화면, 아래로 실크 무늬에 스며들어요 */
.page-bg { position: absolute; top: 0; left: 0; right: 0; z-index: -2; height: min(100vh, 1100px); min-height: 560px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.page-bg .bg { opacity: .85; }
.page-bg.has-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,5,5,.45), rgba(5,5,5,.25) 40%, rgba(5,5,5,.55)); }
@supports (height: 100svh) { .page-bg { height: min(100svh, 1100px); } }

/* ---------- type ---------- */
.kicker, .num, .more, .pill { font-family: var(--font-ext); font-weight: 700; text-transform: uppercase; }
.kicker { font-size: 10px; line-height: 1.8; letter-spacing: .22em; }
.num { font-size: 10px; letter-spacing: .22em; }
.display { font-size: clamp(52px, 8.6vw, 128px); font-weight: 300; line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.title-xl { margin-top: 14px; font-size: clamp(56px, 8vw, 116px); font-weight: 300; line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.lead { margin-top: 26px; font-size: 15px; line-height: 1.8; }
.more { display: inline-flex; align-items: flex-end; min-height: 44px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 10px; letter-spacing: .16em; text-decoration: none; }
button.more { padding: 0 0 6px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: none; color: inherit; cursor: pointer; }
button.more:hover { color: #fff; }

/* ---------- header: logo left · menu centered · login right ---------- */
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: 20px var(--pad); }
.brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 96px; height: auto; }
.gnb { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.gnb a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.gnb a:hover::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); }
.login { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.login[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* class dropdown — hover (mouse) or keyboard focus */
.has-sub { position: relative; display: flex; }
.sub { position: absolute; z-index: 30; top: 100%; left: 50%; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.sub-in { display: flex; gap: 22px; white-space: nowrap; }
.gnb .sub a { min-height: 34px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.gnb .sub a::after { bottom: 6px; }
.gnb .sub a:hover, .gnb .sub a:focus-visible { color: #fff; }
.has-sub:has(:focus-visible) .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.has-sub:has(:focus-visible) > a::after { transform: scaleX(1); }
@media (hover: hover) {
  .has-sub:hover .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .has-sub:hover > a::after { transform: scaleX(1); }
}

/* ---------- full-bleed photo sections ---------- */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.bg.is-loading, .bg.is-broken { opacity: 0 !important; }
.hero, .feature { position: relative; overflow: hidden; }
.hero { height: clamp(640px, 62vw, 900px); }
.hero .bg { object-position: 50% 20%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,5,5,.6) 0%, rgba(5,5,5,0) 24%, rgba(5,5,5,0) 48%, rgba(5,5,5,.92) 100%); }
.hero-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) 52px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

.feature { height: clamp(560px, 50vw, 720px); }
.feature .bg { opacity: .85; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.6) 40%, rgba(5,5,5,0) 72%), linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 82%, #050505 100%); }
.feature--right .bg { opacity: .9; object-position: 40% 60%; }
.feature--right::after { background: linear-gradient(270deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.6) 40%, rgba(5,5,5,0) 72%), linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 82%, #050505 100%); }
.feature-copy { position: absolute; z-index: 1; inset: 0; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.feature--right .feature-copy { align-items: flex-end; text-align: right; }

/* main · class section: three classes, row fills on hover */
.feature--class { height: auto; min-height: clamp(560px, 50vw, 720px); display: flex; }
.feature--class .feature-copy { position: relative; inset: auto; flex: 1; padding-top: 96px; padding-bottom: 96px; }
.cls-links { width: min(560px, 100%); margin-top: 36px; border-top: 1px solid var(--line); }
.cls-links li { border-bottom: 1px solid var(--line); }
.cls-links a { display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 15px 0; text-decoration: none; transition: background-color .35s ease, color .35s ease, padding .35s ease; }
.cls-links .n { font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.cls-links .t { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; letter-spacing: -.02em; text-transform: uppercase; }
.cls-links .t b { display: inline-block; min-width: 5.6em; font-weight: inherit; }   /* 영어 이름 칸을 같은 폭으로 → 한글이 한 줄로 맞아요 */
.cls-links .t small { margin-left: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.cls-links svg { opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .35s ease; }
.cls-links a:hover, .cls-links a:focus-visible { background: var(--y); color: #050505; padding-left: 14px; padding-right: 14px; }
.cls-links a:hover svg, .cls-links a:focus-visible svg { opacity: 1; transform: none; }

/* ---------- text blocks ---------- */
.block { position: relative; isolation: isolate; padding: 120px var(--pad); }
.block > .bg { z-index: -1; }
/* 폰: 관리자에서 모바일 중심 · 확대를 따로 정한 배경 (안 정하면 웹 중심 그대로) */
@media (max-width: 720px) {
  img.bg.has-m { object-position: var(--bg-mx, 50%) var(--bg-my, 50%) !important; transform: scale(var(--bg-mz, 1)); transform-origin: var(--bg-mx, 50%) var(--bg-my, 50%); }
}
.block.has-bg { overflow: hidden; }
.block.has-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,.72) 22%, rgba(5,5,5,.78) 78%, #050505 100%); }
.block--tight { padding-top: 40px; }
.block-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.block-head > p { max-width: 320px; font-size: 15px; line-height: 1.8; }

/* schedule list — hover fills the row (메인: 다가오는 일정 넷 · View all 누르면 주간 · 월간 달력) */
.sched { margin-top: 56px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.sched li { border-bottom: 1px solid var(--line); }
.sched a { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) 28px; align-items: center; gap: 16px; padding: 22px 0; text-decoration: none; transition: background-color .35s ease, color .35s ease, padding .35s ease; }
.sched .d { font-size: clamp(30px, 3.4vw, 48px); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.sched .t { font-size: clamp(18px, 1.8vw, 26px); font-weight: 300; letter-spacing: -.03em; text-transform: uppercase; }
.sched .w { font-size: clamp(18px, 1.8vw, 26px); font-weight: 300; letter-spacing: -.03em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.sched svg { opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .35s ease; }
.sched a:hover, .sched a:focus-visible { background: var(--y); color: #050505; padding-left: 24px; padding-right: 24px; }
.sched a:hover svg, .sched a:focus-visible svg { opacity: 1; transform: none; }
.sched-note { padding: 26px 0; font-size: 14px; }
.sched-note:only-child { border-bottom: 1px solid var(--line); }

/* archive tiles — zoom + yellow tint on hover */
.tiles { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.tile { display: block; text-decoration: none; }
.tile-media { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; background: #0b0b0b; }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.tile-tint { position: absolute; inset: 0; background: var(--y); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s ease; }
.tile-cap { position: relative; display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-bottom: 8px; font-size: 11px; text-transform: uppercase; }
.tile-cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--y); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.tile:hover .tile-media img, .tile:focus-visible .tile-media img { transform: scale(1.07) translateX(-2%); filter: grayscale(0); }
.tile:hover .tile-cap::after, .tile:focus-visible .tile-cap::after { transform: scaleX(1); }
.tile-media img.is-broken { opacity: 0; }
/* 메인 아카이브의 릴스 칸 — 왼쪽 아래 ▶ 길이 (아카이브 REEL 격자와 같은 표시) */
.tile-len { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--y); font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .16em; line-height: 1; text-shadow: 0 1px 6px rgba(0,0,0,.7); pointer-events: none; }
.tile-len svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.tiles--bento .tile.is-reel .tile-len { top: 14px; bottom: auto; }
/* 메인 페이지 아카이브: 아래 글자 없이, 마우스를 올리면 검정 75% + 가운데 노란 날짜 · 제목 (영상은 오른쪽 위 재생 표시) */
.tile-hov { display: none; }
@media (hover: hover) {
  .tiles--hov .tile-cap { display: none; }
  .tiles--hov .tile-hov { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; background: rgba(5,5,5,.75); color: var(--y); text-align: center; opacity: 0; transition: opacity .35s ease; }
  .tiles--hov .tile:hover .tile-hov, .tiles--hov .tile:focus-visible .tile-hov { opacity: 1; }
  .tiles--hov .tile:hover .tile-media img, .tiles--hov .tile:focus-visible .tile-media img { filter: grayscale(1); }
  .tile-hov-d { font-family: var(--font-ext); font-weight: 700; font-size: 11px; letter-spacing: .22em; }
  .tile-hov-t { max-width: 300px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; word-break: keep-all; }
  .tile-play { position: absolute; top: 22px; right: 22px; width: 26px; height: 26px; }
  .tiles--hov.tiles--bento .tile-media::after { display: none; }
  .tiles--hov.tiles--bento .tile--lead .tile-hov-t { max-width: 520px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 400; letter-spacing: -.03em; }
}
.tile-sub { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .04em; color: rgba(255,199,44,.72); }
/* 아카이브 페이지 목록 — 날짜 · 제목 · 사진 수 · 작가를 섬네일 안 아래에, 뒤에는 살짝 어두운 그라데이션 */
.tile-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 72px 20px 18px; background: linear-gradient(to top, rgba(5,5,5,.74) 0%, rgba(5,5,5,.46) 42%, rgba(5,5,5,0) 100%); pointer-events: none; }
.tile-info .tile-cap { flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; font-size: 16px; line-height: 1.3; text-transform: none; word-break: keep-all; }
.tile-info .tile-cap::after { display: none; }
.tile-info .tile-cap > span:first-child { font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .22em; }
.tile-info .tile-sub { margin: 0; }
.tiles-note { grid-column: 1 / -1; padding: 40px 0; font-size: 14px; }
/* 메인 아카이브 — 가로 필름 · 크게 하나 + 넷 (관리자 › 아카이브에서 골라요) */
.arch-head-r { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; }
.arch-head-r > p { max-width: 320px; font-size: 15px; line-height: 1.8; }
.arch-nav { display: flex; gap: 8px; }
.arch-nav[hidden] { display: none; }
.arch-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid rgba(255,199,44,.5); border-radius: 50%; background: transparent; color: var(--y); cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.arch-nav button:hover:not(:disabled), .arch-nav button:focus-visible { background: var(--y); color: #050505; }
.arch-nav button:disabled { opacity: .3; cursor: default; }
.tiles--film { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad) 4px; scrollbar-width: none; }
.tiles--film::-webkit-scrollbar { display: none; }
.tiles--film > .tile { flex: 0 0 clamp(240px, 26vw, 380px); scroll-snap-align: start; }
.tiles--film > .tiles-note { flex: 1 1 auto; }
.tiles--film .tile, .tiles--film .tile img { -webkit-user-drag: none; }
.tiles--film.is-gliding { scroll-snap-type: none; }                 /* 마우스로 끄는 동안 · 미끄러지는 동안 */
.tiles--film.is-dragging, .tiles--film.is-dragging .tile { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.tiles--hov.tiles--film.is-dragging .tile-hov { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .tiles--film, .tiles--film .tile { cursor: grab; } }
.tiles--bento { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: clamp(200px, 18vw, 270px); }
.tiles--bento > .tile { position: relative; overflow: hidden; }
.tiles--bento > .tile--lead { grid-row: span 2; }
.tiles--bento.n1 > .tile--lead { grid-column: 1 / -1; }
.tiles--bento.n2 > .tile:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.tiles--bento.n3 > .tile:nth-child(n+2) { grid-column: span 2; }
.tiles--bento.n4 > .tile:nth-child(2) { grid-column: span 2; }
.tiles--bento .tile-media { position: absolute; inset: 0; aspect-ratio: auto; }
.tiles--bento .tile-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5,5,5,.82), rgba(5,5,5,0) 55%); pointer-events: none; }
.tiles--bento .tile-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; font-size: 15px; line-height: 1.3; text-transform: none; }
.tiles--bento .tile-cap::after { display: none; }
.tiles--bento .tile-cap > span:first-child { font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .22em; }
.tiles--bento .tile--lead .tile-cap { left: 24px; right: 24px; bottom: 22px; gap: 10px; font-size: clamp(28px, 3.2vw, 44px); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.tiles--bento .tile--lead .tile-cap > span:first-child { font-size: 11px; letter-spacing: .22em; }
.tile.is-skeleton .tile-media { background: linear-gradient(100deg, #0b0b0b 30%, #1a1814 50%, #0b0b0b 70%) 0 0 / 220% 100%; animation: exShimmer 1.4s linear infinite; }

/* 마라톤 — 대회 로고(노랑 한 색)를 정가운데 + 사진 살짝 어둡게 */
.tile-shade { position: absolute; inset: 0; z-index: 1; background: rgba(5,5,5,.45); pointer-events: none; }
.tile-logo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile .tile-media .tile-logo img { position: static; inset: auto; width: 56%; height: 30%; object-fit: contain; filter: none !important; transform: none !important; transition: none; }

/* 가로 필름 끝 — 나머지 앨범 표지 넷 + '+21 · 전체 기록 보기' */
.tile--more .tile-media { background: #0B0A08; }
.more-mos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; transition: filter .4s ease; }
.more-mos.m1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.more-mos.m2 { grid-template-rows: 1fr; }
.more-mos.m3 > img:first-child { grid-row: span 2; }
.tile .tile-media .more-mos img { position: static; inset: auto; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: grayscale(1) brightness(.5) !important; transform: none !important; }
.more-in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: var(--y); text-align: center; }
.more-n { font-size: clamp(64px, 7.4vw, 110px); font-weight: 300; line-height: .9; letter-spacing: -.05em; }
.more-go { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid transparent; font-size: 15px; transition: border-color .3s ease; }
.more-go svg { transition: transform .3s ease; }
.tile--more:hover .more-mos, .tile--more:focus-visible .more-mos { filter: brightness(1.3); }
.tile--more:hover .more-go, .tile--more:focus-visible .more-go { border-color: currentColor; }
.tile--more:hover .more-go svg, .tile--more:focus-visible .more-go svg { transform: translateX(4px); }
@keyframes exShimmer { to { background-position: -220% 0; } }

/* ---------- archive page ---------- */
.page-head { padding: 180px var(--pad) 0; }
.page-head .lead { max-width: 420px; }
.album-list { padding: 56px var(--pad) 120px; }
.album-list .tiles { margin-top: 0; }
.sched-page { padding: 56px var(--pad) 120px; }                  /* 일정 페이지 (schedule.html) — 메인 일정의 View all */
.sched-page .cal { margin-top: 0; }
.album-view { padding: 150px var(--pad) 120px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; letter-spacing: .06em; text-decoration: none; }
.album-head { margin-top: 28px; }
.album-title { margin-top: 14px; font-size: clamp(36px, 5vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -.05em; }
.album-meta { margin-top: 16px; font-size: 13px; }
.gallery { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 0; background: #0b0b0b; color: #fff; overflow: hidden; cursor: zoom-in; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.shot img.is-broken { opacity: 0; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); filter: grayscale(0); }
.shot.is-video { cursor: pointer; }
.shot .play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; color: var(--y); filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.shot .play svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {      /* 마우스: 올렸을 때만 노란 재생 표시 (폰은 늘 보여요) */
  .shot .play { opacity: 0; transform: scale(.85); }
  .shot:hover .play, .shot:focus-visible .play { opacity: 1; transform: none; }
}
.gallery-more { min-height: 1px; margin-top: 32px; display: flex; justify-content: center; }

/* archive filters — 사진 · 영상 / 전체 · 클래스 · 마라톤 */
.ar-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ar-type { display: flex; gap: 28px; }
.ar-type button { padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255,199,44,.42); font-size: clamp(26px, 2.6vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -.04em; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.ar-type button:hover { color: var(--y); }
.ar-type button[aria-pressed="true"] { color: var(--y); border-bottom-color: var(--y); }
.ar-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-cats button { min-height: 38px; padding: 0 18px; border: 1px solid rgba(255,199,44,.45); border-radius: 999px; background: transparent; color: var(--y); font-size: 13px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ar-cats button:hover { border-color: var(--y); }
.ar-cats button[aria-pressed="true"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.album-bar { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.album-bar .album-meta { margin-top: 0; }
.album-type { display: inline-flex; padding: 3px; border: 1px solid rgba(255,199,44,.35); border-radius: 999px; }
.album-type button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--y); font-size: 13px; cursor: pointer; }
.album-type button span { margin-left: 2px; opacity: .7; }
.album-type button[aria-pressed="true"] { background: var(--y); color: #050505; font-weight: 500; }
.dl-all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1.5px solid var(--y); border-radius: 999px; background: transparent; color: var(--y); font-size: 13px; font-weight: 500; letter-spacing: .02em; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.dl-all:hover:not(:disabled), .dl-all:focus-visible { background: var(--y); color: #050505; }
.dl-all:disabled { opacity: .45; cursor: default; }
.dl-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 32px)); padding: 14px 14px 16px 20px; overflow: hidden; border: 1px solid rgba(255,199,44,.4); border-radius: 16px; background: rgba(10,9,8,.96); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.5); transform: translateX(-50%); }
.dl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,199,44,.15); }
.dl-bar span { display: block; width: 0; height: 100%; background: var(--y); transition: width .3s ease; }
.dl-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; }
.dl-cancel { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(242,239,232,.25); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; }
.dl-cancel:hover { border-color: var(--y); color: var(--y); }

/* lightbox */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(5,5,5,.97); color: var(--y); overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.7); }
.lb-stage { position: absolute; inset: 64px 80px 56px; margin: 0; display: flex; align-items: center; justify-content: center; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; }
.lb-stage > * { will-change: transform; }   /* 폰: 손가락으로 밀면 사진이 따라와요 → 이전 · 다음 */
.lb-stage img.is-broken { display: none; }
.lb-stage iframe { width: 100%; max-width: 1280px; max-height: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.lb-stage video { max-width: 100%; max-height: 100%; background: #000; object-fit: contain; }   /* 칸 크기는 영상 모양대로 미리 정해 둬요 (재생해도 크기 그대로) */
.lb-stage video:focus, .lb-stage video:focus-visible, .lb-stage iframe:focus, .lb-stage iframe:focus-visible { outline: none; }   /* 노란 테두리 없이 */
.lb-note { display: grid; justify-items: center; gap: 18px; max-height: 100%; text-align: center; font-size: 14px; line-height: 1.7; }
.lb-note img { max-width: min(720px, 100%); max-height: 56vh; object-fit: contain; opacity: .5; }
.lb-note a, .album-meta a { text-underline-offset: 4px; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,199,44,.35); border-radius: 50%; background: rgba(5,5,5,.6); color: var(--y); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.lb-btn:hover, .lb-btn:focus-visible { background: var(--y); color: #050505; }
.lb-close { top: 14px; right: 14px; }
.lb-dl { top: 14px; right: 74px; }
.lb-dl.is-busy svg { animation: exPulse 1s ease-in-out infinite; }
.lb-msg { position: absolute; right: 24px; bottom: 16px; max-width: min(420px, 45%); font-size: 12px; line-height: 1.5; text-align: right; color: var(--ink); }
.lb-msg a { color: var(--y); text-underline-offset: 3px; }
@keyframes exPulse { 50% { opacity: .3; } }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; letter-spacing: .12em; }
.lb-credit { position: absolute; left: 24px; bottom: 18px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- footer (centered) ---------- */
.site-footer { position: relative; isolation: isolate; }
.site-footer > .bg { z-index: -1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }   /* 위쪽은 바탕 무늬로 스며들게 */
.site-footer.has-bg { overflow: hidden; }    /* 관리자 › 섹션 배경 › 하단 — 사진 위를 어둡게 덮어 글자가 잘 보여요 */
.site-footer.has-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, rgba(5,5,5,.7) 30%, rgba(5,5,5,.78) 80%, rgba(5,5,5,.94) 100%); }
.cta { max-width: 880px; margin: 0 auto; padding: 150px 24px 96px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border: 1.5px solid var(--y); border-radius: 999px; font-size: 10px; letter-spacing: .16em; }
.cta h2 { margin-top: 44px; font-size: 38px; font-weight: 500; line-height: 1; letter-spacing: -.5px; text-transform: uppercase; }
.cta h2 + p { margin-top: 36px; font-size: 15px; line-height: 1.9; }
.cta p + p { margin-top: 18px; font-size: 15px; line-height: 1.5; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-width: 148px; min-height: 48px; padding: 0 34px; border: 1.5px solid var(--y); border-radius: 999px; background: transparent; color: var(--y); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.btn-line:hover, .btn-line:focus-visible { background: var(--y); color: #050505; }
.cta .btn-line { margin-top: 48px; }
.social { margin-top: 24px; display: flex; justify-content: center; gap: 4px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.copyright { max-width: 1360px; margin: 0 auto; padding: 18px 24px 28px; border-top: 1px solid rgba(255,199,44,.22); text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- about ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; padding: 140px var(--pad) 120px; }
.statement > .num { grid-column: span 3; padding-top: 14px; }
.statement-body { grid-column: 4 / span 8; }
.statement-body h2 { font-size: clamp(32px, 3.8vw, 56px); font-weight: 300; line-height: 1.15; letter-spacing: -.04em; }
.statement-body p { max-width: 560px; margin-top: 20px; font-size: 15px; line-height: 1.9; }
.statement-body h2 + p { margin-top: 40px; }
.pillars { margin: 0 var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar { padding: 28px 28px 44px 0; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar h3 { margin-top: 56px; font-size: clamp(32px, 3.4vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.pillar p { margin-top: 16px; font-size: 14px; line-height: 1.8; }
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.steps li { padding-top: 24px; border-top: 1px solid var(--y); }
.steps h3 { margin-top: 40px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.steps p { margin-top: 10px; font-size: 14px; line-height: 1.7; }
.info-list { margin-top: 56px; border-top: 1px solid var(--line); }
.info-list > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.info-list dt { padding-top: 5px; font-family: var(--font-ext); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }   /* 장소 · 시간 · 대상 · 문의 (10px → 14px) */
.info-list dd { font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; letter-spacing: -.02em; }
.info-list dd a { text-underline-offset: 4px; }

/* ---------- class page ---------- */
.cls-jump { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.cls-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.cls-jump span { font-family: var(--font-ext); font-weight: 700; font-size: 9px; letter-spacing: .18em; }
.cls-jump a:hover, .cls-jump a:focus-visible { border-color: var(--y); background: var(--y); color: #050505; }
.cls { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; align-items: center; padding: 120px var(--pad) 0; }
.cls-media { grid-column: 1 / span 6; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0b; }
.cls-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); filter: grayscale(1); transition: transform 1s cubic-bezier(.2,.7,.2,1); }   /* --fx · --fy · --z: 관리자 › 클래스 › 사진 좌우 · 위아래 · 크기 */
.cls:hover .cls-media img { transform: scale(calc(var(--z, 1) * 1.04)); }
.cls-body { grid-column: 8 / span 5; }
.cls--rev .cls-media { grid-column: 7 / span 6; grid-row: 1; }
.cls--rev .cls-body { grid-column: 1 / span 5; grid-row: 1; }
.cls-title { margin-top: 18px; font-size: clamp(48px, 6.4vw, 96px); font-weight: 300; line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.cls-season { margin-top: 20px; font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.cls-event { margin-top: 24px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 18px; border-radius: 999px; background: var(--y); color: #050505; font-size: 13px; font-weight: 500; line-height: 1; }   /* line-height 1: 한글 글꼴이 줄 높이를 키워서 라벨과 날짜가 어긋나지 않게 */
.cls-event { animation: clsGlow 3.2s ease-in-out infinite; }   /* 노란 배지 — 천천히 은은하게 빛나요 */
@keyframes clsGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,199,44,0), 0 0 12px 0 rgba(255,199,44,.18); } 50% { box-shadow: 0 0 0 5px rgba(255,199,44,.18), 0 0 42px 10px rgba(255,199,44,.55); } }
@media (prefers-reduced-motion: reduce) { .cls-event { animation: none; box-shadow: 0 0 18px rgba(255,199,44,.3); } }
.cls-event b { font-family: var(--font-ext); font-weight: 700; font-size: 9px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.cls-lead { margin-top: 28px; max-width: 440px; font-size: 15px; line-height: 1.8; }
.cls-info { margin-top: 32px; border-top: 1px solid var(--line); }
.cls-info > div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cls-info dt { padding-top: 4px; font-size: 13px; font-weight: 500; }
.cls-info dd { font-size: clamp(17px, 1.6vw, 21px); font-weight: 300; letter-spacing: -.02em; }
.cls-buy { display: inline-flex; align-items: center; margin-top: 24px; min-height: 38px; padding: 0 18px; border: 1px solid var(--y); border-radius: 999px; background: transparent; color: var(--y); font-size: 13.5px; font-weight: 500; line-height: 1; text-decoration: none; transition: background .2s, color .2s; }   /* 수강권 구매 — 투명 · 노란 테두리 · 노란 글씨 → 올리면 노란 면 · 검정 글씨 */
.cls-buy:hover, .cls-buy:focus-visible { background: var(--y); color: #050505; text-decoration: none; }
@media (max-width: 760px) { .cls-buy { margin-top: 20px; min-height: 36px; padding: 0 16px; font-size: 13px; } }
.cls-buy:focus { outline: none; }
.cls-buy:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
.cls-note { padding: 120px var(--pad) 0; text-align: center; font-size: 14px; }
.cls-note a { text-underline-offset: 4px; }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 120px 20px 80px; }
.auth-card { width: min(380px, 100%); }
.auth-logo { width: 120px; height: auto; }
.auth-title { margin-top: 40px; font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.field { display: block; margin-top: 28px; }
.field span { display: block; font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.field input { display: block; width: 100%; margin-top: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.field input:focus { outline: none; border-bottom-color: var(--y); }
.auth .btn-line { width: 100%; margin-top: 40px; }
.form-msg { min-height: 22px; margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.auth-foot { margin-top: 24px; font-size: 13px; }
.auth-foot a { text-underline-offset: 4px; }
@media (max-width: 640px) {          /* 폰: 로그인 작게 — 폭을 다 쓰지 않고 가운데 좁게 */
  .auth { padding: 96px 24px 64px; }
  .auth-card { width: min(264px, 100%); }
  .auth-title { margin-top: 0; font-size: 26px; }
  .field { margin-top: 20px; }
  .field span { font-size: 9px; }
  .field input { margin-top: 6px; padding: 9px 0; }
  .auth .btn-line { min-width: 0; min-height: 40px; margin-top: 26px; font-size: 11.5px; }
  .form-msg { margin-top: 12px; font-size: 12px; }
  .auth-foot { margin-top: 14px; font-size: 12px; }
}

/* ---------- schedule popup (C — 노란 포스터 카드) ---------- */
html.sp-open { overflow: hidden; }
.sp { width: min(880px, calc(100% - 48px)); max-width: none; max-height: calc(100% - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 4px; background: var(--y); color: #050505; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.sp.is-single { width: min(520px, calc(100% - 48px)); }
.sp::backdrop { background: rgba(3,3,3,.78); }
.sp[open] { animation: spIn .3s cubic-bezier(.2,.7,.2,1); }
@keyframes spIn { from { opacity: 0; transform: translateY(14px); } }
.sp a { color: inherit; }
.sp-in { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.sp-in.is-single { grid-template-columns: minmax(0, 1fr); }
.sp-x { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #050505; color: var(--y); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.sp-x:hover, .sp-x:focus-visible { background: #fff; color: #050505; }
.sp-l { display: flex; flex-direction: column; padding: 36px 32px 32px; border-right: 1.5px solid #050505; }
.sp-in.is-single .sp-l { border-right: 0; }
.sp-kick { padding-right: 56px; min-height: 12px; }
.sp-when { margin-top: 18px; }
.sp-date { font-size: 104px; font-weight: 200; line-height: .82; letter-spacing: -.06em; }
.sp-time { margin-top: 14px; font-size: 40px; font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.sp-title { margin-top: 26px; padding-top: 18px; border-top: 1.5px solid #050505; font-size: 30px; font-weight: 400; line-height: 1.04; letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; }
.sp-meet { margin-top: 22px; }   /* 왼쪽: 집결지 */
.sp-meet-1 { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sp-meet-2 { margin-top: 4px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.sp-pills { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pills span { padding: 7px 13px; border: 1.5px solid #050505; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.sp-note { margin-top: 14px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sp-rows dd .sp-pills { margin-top: 0; }
.sp-cta { margin-top: auto; padding-top: 26px; }
.sp-map { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 1.5px solid #050505; border-radius: 999px; background: #050505; color: var(--y) !important; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.sp-map:hover, .sp-map:focus-visible { background: #fff; color: #050505 !important; }
.sp-r { padding: 36px 32px 32px; }
.sp-label { padding-right: 56px; }
.sp-imgs { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-imgs.is-one { grid-template-columns: minmax(0, 1fr); }
.sp-imgs a, .sp-imgs span { display: block; }
.sp-imgs img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: rgba(5,5,5,.12); transition: opacity .2s ease; }
.sp-imgs.is-one img { aspect-ratio: 16 / 9; }
.sp-imgs a:hover img { opacity: .85; }
.sp-imgs img.is-broken { opacity: .2; }
.sp-rows { margin-top: 20px; }
.sp-rows > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1.5px solid #050505; }
.sp-rows > div:last-child { border-bottom: 1.5px solid #050505; }
.sp-rows dt { padding-top: 4px; }
.sp-rows dd { font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.sp-rows strong { font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .feature::after, .feature--right::after { background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,.55) 26%, rgba(5,5,5,.55) 74%, #050505 100%); }
  .feature--right .feature-copy { align-items: flex-start; text-align: left; }
  .block { padding-top: 88px; padding-bottom: 88px; }
  .block--tight { padding-top: 24px; }
  .sched a { grid-template-columns: 72px minmax(0,1fr) 24px; }
  .sched .w { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile-info { gap: 6px; padding: 52px 12px 12px; }
  .tile-info .tile-cap { gap: 5px; font-size: 13.5px; }
  .tile-info .tile-cap > span:first-child { font-size: 9px; letter-spacing: .18em; }
  .tile-info .tile-sub { font-size: 10.5px; letter-spacing: .02em; }
  .tiles--film > .tile { flex-basis: clamp(220px, 62vw, 360px); }
  .arch-nav { display: none; }
  .tiles--bento { grid-auto-rows: clamp(150px, 40vw, 300px); }
  .tiles--bento > .tile--lead { grid-column: 1 / -1; grid-row: span 2; }
  .tiles--bento > .tile:not(.tile--lead), .tiles--bento.n2 > .tile:nth-child(2), .tiles--bento.n3 > .tile:nth-child(n+2), .tiles--bento.n4 > .tile:nth-child(2) { grid-column: auto; grid-row: auto; }
  .tiles--bento > .tile:not(.tile--lead):last-child:nth-child(even) { grid-column: 1 / -1; }
  .tiles--bento .tile--lead .tile-cap { font-size: 30px; }
  .cta { padding-top: 110px; padding-bottom: 80px; }
  .statement { grid-template-columns: 1fr; padding-top: 96px; padding-bottom: 88px; }
  .statement > .num, .statement-body { grid-column: auto; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 24px 0 32px; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); }
  .pillar h3 { margin-top: 24px; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  .info-list > div { grid-template-columns: 1fr; gap: 6px; }
  .gallery { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; margin-top: 28px; }   /* 인스타그램처럼 한 줄에 셋 · 3:4 */
  .shot { aspect-ratio: 3 / 4; }
  .shot .play { left: auto; top: 8px; right: 8px; width: 22px; height: 22px; margin: 0; }      /* 영상: 오른쪽 위 작은 재생 표시 */
  .feature--class .feature-copy { padding-top: 72px; padding-bottom: 72px; }
  .cls { grid-template-columns: 1fr; gap: 28px; padding-top: 88px; }
  .cls-media, .cls-body, .cls--rev .cls-media, .cls--rev .cls-body { grid-column: auto; grid-row: auto; }
  .cls-note { padding-top: 88px; }
}
@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; padding-top: 12px; }
  .brand img { width: 84px; }
  .gnb { grid-column: 1 / -1; order: 3; justify-content: space-between; gap: 8px; font-size: 11px; }
  .cta h2 { font-size: 30px; line-height: 1.1; }
  .page-head { padding-top: 150px; }
  .album-view { padding-top: 130px; }
  .gallery { gap: 2px; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }   /* 폰: 화면 끝까지 · 얇은 틈 (인스타그램 프로필 격자) */
  .lb-stage { inset: 64px 8px 76px; }
  .lb-stage iframe { height: 100%; aspect-ratio: auto; }   /* 폰: 드라이브 영상 칸이 위아래를 다 써요 (세로 영상 · 재생 메뉴가 잘리지 않게) */
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb-count { bottom: 28px; }
  .lb-credit { top: 28px; bottom: auto; left: 16px; max-width: 60%; }
  .lb-msg { top: 70px; bottom: auto; left: 16px; right: 16px; max-width: none; text-align: center; }
  .ar-type { gap: 22px; }
  .dl-all { margin-left: 0; }
  .dl-toast { bottom: 16px; }
  .sp, .sp.is-single { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }
  .sp-in, .sp-in.is-single { display: flex; flex-direction: column; min-height: 100%; }
  .sp-l, .sp-r { display: contents; }
  .sp-x { position: fixed; top: 14px; right: 14px; }
  .sp-head { order: 1; padding: 28px 20px 0; }
  .sp-meet { order: 2; margin: 18px 20px 0; }
  .sp-meet-1 { font-size: 18px; }
  .sp-cta { order: 3; margin-top: 0; padding: 18px 20px 0; }   /* 지도 버튼: 집결지 바로 아래 */
  .sp-label { order: 4; padding: 26px 20px 0; }
  .sp-imgs { order: 5; margin: 12px 20px 0; gap: 6px; }
  .sp-rows { order: 6; margin: 12px 20px 0; }
  .sp-note { order: 7; margin: 14px 20px 0; }
  .sp-edit { order: 8; margin: 18px 20px 0; }
  .sp-in, .sp-in.is-single { padding-bottom: 28px; }
  .sp-when { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; }
  .sp-date { font-size: 84px; }
  .sp-time { margin-top: 0; padding-bottom: 4px; font-size: 28px; }
  .sp-title { margin-top: 18px; padding-top: 14px; font-size: 24px; }
  .sp-rows > div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 11px 0; }
  .sp-rows dd { font-size: 14px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 아카이브 페이지 — 오른쪽 위 폴더 목록 (누르면 그 폴더 앨범만) ---------- */
.page-head.has-folders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 56px; align-items: start; }
.page-head.has-folders > * { grid-column: 1; }
.page-head.has-folders > .ar-folders { grid-column: 2; grid-row: 1 / span 3; align-self: start; padding-top: 4px; }
.ar-folders .num { margin-bottom: 10px; }
.ar-flist { margin: 0; padding: 0; list-style: none; }
.ar-flist a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; border-bottom: 1px solid rgba(255,199,44,.22); color: var(--y); font-size: 14px; text-decoration: none; transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.ar-flist .f-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ar-flist .f-name svg { flex: none; }
.ar-flist .f-name b { overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.ar-flist small { flex: none; font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .18em; color: rgba(255,199,44,.7); }
.ar-flist a.is-empty { color: rgba(255,199,44,.45); }
.ar-flist a:hover:not([aria-current]), .ar-flist a:focus-visible:not([aria-current]) { border-bottom-color: var(--y); }
.ar-flist a:focus-visible { outline: 1px solid var(--y); outline-offset: 2px; }
.ar-flist a[aria-current] { margin: 0 -12px; padding: 0 12px; border-bottom-color: transparent; background: var(--y); color: #050505; }
.ar-flist a[aria-current] small { color: rgba(5,5,5,.7); }
@media (max-width: 860px) {
  .page-head.has-folders { display: block; }
  .page-head.has-folders > .ar-folders { margin-top: 44px; padding-top: 0; }
}

/* ---------- 앨범 — 인물 (A안: 알약 → 얼굴 줄 → 누르면 그 사람이 나온 사진만) ---------- */
.ppl-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px 0 9px; border: 1px solid rgba(255,199,44,.55); border-radius: 999px; background: transparent; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ppl-pill small { font-size: 13px; opacity: .7; }
.ppl-pill:hover { border-color: var(--y); }
.ppl-pill[aria-expanded="true"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.ppl-pill[hidden] { display: none; }
.ppl-stk { display: inline-flex; margin-right: 1px; }
.ppl-stk img { width: 22px; height: 22px; margin-left: -7px; border: 1.5px solid #050505; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.ppl-stk img:first-child { margin-left: 0; }
.ppl-strip { display: flex; gap: 18px; margin-top: 26px; padding: 18px 2px 16px; overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid rgba(255,199,44,.22); border-bottom: 1px solid rgba(255,199,44,.22); scrollbar-width: none; }
.ppl-strip::-webkit-scrollbar { display: none; }
.ppl-strip[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .ppl-strip, .ppl-strip .ppl-face { cursor: grab; } }   /* 마우스로 끌어서 옆으로 */
.ppl-strip.is-dragging, .ppl-strip.is-dragging .ppl-face { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ppl-strip.is-dragging .ppl-face:not([aria-pressed="true"]) img, .ppl-strip.is-gliding .ppl-face:not([aria-pressed="true"]) img { filter: grayscale(1); }   /* 움직이는 동안 지나가는 얼굴은 흑백 그대로 */
.ppl-face { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; padding: 4px 0 0; border: 0; background: none; color: var(--y); font: inherit; cursor: pointer; }
.ppl-face .c { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: #141210; box-shadow: 0 0 0 1px rgba(255,199,44,.25); transition: box-shadow .2s ease; }
.ppl-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s ease; -webkit-user-drag: none; }
.ppl-face small { font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .16em; line-height: 1.6; color: rgba(255,199,44,.75); }
.ppl-face:hover img, .ppl-face:focus-visible img { filter: none; }
.ppl-face:focus-visible { outline: none; }
.ppl-face:focus-visible .c { box-shadow: 0 0 0 2px var(--y); }
.ppl-face[aria-pressed="true"]:not(.is-all) .c { box-shadow: 0 0 0 3px #050505, 0 0 0 5px var(--y); }
.ppl-face[aria-pressed="true"]:not(.is-all) img { filter: none; }
.ppl-face[aria-pressed="true"]:not(.is-all) small { padding: 0 8px; border-radius: 999px; background: var(--y); color: #050505; }
.ppl-face.is-all .c { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,199,44,.45); color: var(--y); }
.ppl-face.is-all[aria-pressed="true"] .c { box-shadow: inset 0 0 0 1.5px var(--y); }
.ppl-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; }
.ppl-who[hidden] { display: none; }
.ppl-who .c { flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; }
.ppl-who .c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ppl-who b { font-weight: 500; }
.ppl-who .note { margin-left: 4px; font-size: 12px; color: rgba(255,199,44,.62); }
.ppl-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.ppl-all:hover { color: #fff; }
@media (max-width: 720px) {
  .ppl-strip { gap: 12px; margin: 20px calc(var(--pad) * -1) 0; padding: 14px var(--pad) 12px; }
  .ppl-face { width: 64px; }
  .ppl-face .c { width: 60px; height: 60px; }
  .ppl-who { margin-top: 16px; font-size: 13px; }
  .ppl-who .c { width: 28px; height: 28px; }
  .ppl-who .note { display: none; }
}

/* =========================================================
   REEL — 아카이브 세 번째 탭 (드라이브 세로 영상, B안: 5열 · 폰 3열)
   ========================================================= */
.ar-type .lat { position: relative; display: inline-block; font-size: 1.15em; line-height: .87; }   /* REEL — 대문자는 한글보다 작아 보여서 1.15배: 사진 · 영상과 위 끝이 맞아요 (구글 Noto Sans KR 로 재서 맞춤) */
.ar-catsel { position: relative; display: none; flex: none; align-items: center; color: var(--y); }
.ar-catsel select { -webkit-appearance: none; appearance: none; min-height: 36px; margin: 0; padding: 0 34px 0 16px; border: 1px solid rgba(255,199,44,.5); border-radius: 999px; background: transparent; color: var(--y); font: inherit; font-size: 12.5px; cursor: pointer; }
.ar-catsel select:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.ar-catsel select option { background: #111; color: var(--y); }
.ar-catsel svg { position: absolute; right: 13px; pointer-events: none; }
.ar-catsel.is-on select { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.ar-catsel.is-on svg { color: #050505; }

.tiles--reel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.reel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #0b0b0b; color: var(--y); font: inherit; text-align: center; cursor: pointer; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.reel img.is-broken { display: none; }
.reel-len { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ext); font-weight: 700; font-size: 10px; letter-spacing: .16em; line-height: 1; text-shadow: 0 1px 6px rgba(0,0,0,.7); transition: opacity .25s ease; }
.reel-len svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.reel-hov { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 18px; background: rgba(5,5,5,.75); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.reel-hov .num { font-size: 10px; }
.reel-hov b { max-width: 100%; font-size: clamp(15px, 1.3vw, 19px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
.reel-hov .rh-len { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .reel:hover .reel-hov, .reel:focus-visible .reel-hov { opacity: 1; }
  .reel:hover .reel-len, .reel:focus-visible .reel-len { opacity: 0; }
}
.reel:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.reel-more { min-height: 1px; display: flex; justify-content: center; }

/* 플레이어 — 동그라미 없이 기호만 */
.reel-dlg { --rp-h: min(86vh, 860px); position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(5,5,5,.85); color: var(--y); overflow: hidden; touch-action: none; overscroll-behavior: contain; }
.reel-dlg::backdrop { background: transparent; }   /* 뒤 페이지가 살짝 비쳐요 */
.reel-dlg button { color: var(--y); }
.rp-frame { position: absolute; left: 50%; top: 50%; width: calc(var(--rp-h) * 9 / 16); height: var(--rp-h); overflow: hidden; background: #000; transform: translate(-50%, -50%); }
.rp-stage { position: absolute; inset: 0; }
.rp-stage > img, .rp-stage > video, .rp-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rp-stage > img { object-fit: cover; }
.rp-stage > img.is-broken { display: none; }
.rp-stage > video { object-fit: contain; background: #000; opacity: 0; transition: opacity .25s ease; }
.rp-stage > video.is-on { opacity: 1; }
.rp-stage > video.rp-native { opacity: 1; }   /* R2 영상 — 기본 재생기 (아이폰에서 눌러서 재생) */
.rp-stage > iframe { background: #000; }
.rp-warm { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: 0; pointer-events: none; }   /* 다음 · 이전 영상 재생기 자리 — 안 보여요 (미리 받아 두기) */
.rp-warm > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-awake { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }   /* 아이폰 · 소리 끈 채 볼 때 화면 꺼짐 막기용 무음 영상 (안 보여요) */
.rp-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)); opacity: 0; pointer-events: none; transition: opacity .2s ease; cursor: pointer; }
.reel-dlg.is-paused .rp-play { opacity: 1; pointer-events: auto; }
.rp-sound { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); cursor: pointer; }
.rp-sound [data-rp-mute] { display: none; }                 /* 소리 켜짐: 스피커 + 물결 */
.rp-sound.is-muted [data-rp-mute] { display: inline; }      /* 소리 꺼짐: 스피커 + 대각선 */
.rp-sound.is-muted [data-rp-wave] { display: none; }
.rp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 22px; cursor: pointer; touch-action: none; }
.rp-bar::before, .rp-bar i { content: ""; position: absolute; left: 14px; bottom: 10px; height: 3px; }
.rp-bar::before { right: 14px; background: rgba(255,199,44,.25); }
.rp-bar i { width: 0; max-width: calc(100% - 28px); background: var(--y); }
.reel-dlg.is-frame .rp-play, .reel-dlg.is-frame .rp-sound, .reel-dlg.is-frame .rp-bar,
.reel-dlg.is-still .rp-play, .reel-dlg.is-still .rp-sound, .reel-dlg.is-still .rp-bar { display: none; }
.rp-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; background: none; transform: translateY(-50%); cursor: pointer; transition: color .2s ease; }
.rp-nav:hover, .rp-close:hover { color: #fff; }
.rp-nav:focus-visible, .rp-close:focus-visible, .lb-btn:focus-visible { outline: none; }   /* 네모 테두리 없이 — 글자색 · 배경으로만 */
.rp-nav:focus-visible, .rp-close:focus-visible { color: #fff; }
.rp-prev { right: calc(50% + var(--rp-h) * 9 / 32 + 20px); }
.rp-next { left: calc(50% + var(--rp-h) * 9 / 32 + 20px); }
.rp-close { position: absolute; right: 28px; top: 22px; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.rp-count { position: absolute; left: var(--pad); bottom: 28px; z-index: 3; font-size: 11px; color: rgba(255,199,44,.72); }
.rp-info { position: absolute; left: var(--pad); bottom: 64px; z-index: 3; width: min(340px, calc(50vw - var(--rp-h) * 9 / 32 - var(--pad) - 96px)); }
.rp-info .num { font-size: 11px; }
.rp-title { margin-top: 12px; font-size: clamp(20px, 2vw, 28px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere; }
.rp-meta { margin-top: 12px; font-size: 13px; color: rgba(255,199,44,.78); }
.rp-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.rp-hint { display: none; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 11px; color: rgba(255,199,44,.75); }

@media (max-width: 1099px) {         /* 태블릿: 플레이어 위 · 글은 아래 */
  .reel-dlg { --rp-h: min(calc(100vh - 210px), calc(100vw * 16 / 9)); }
  @supports (height: 100dvh) { .reel-dlg { --rp-h: min(calc(100dvh - 210px), calc(100vw * 16 / 9)); } }
  .rp-frame { top: 64px; transform: translateX(-50%); }
  .rp-info { left: 50%; bottom: auto; top: calc(64px + var(--rp-h) + 16px); width: min(560px, 100%); padding: 0 20px; transform: translateX(-50%); }
  .rp-title { margin-top: 8px; font-size: 20px; }
  .rp-meta { margin-top: 8px; }
  .rp-count { left: auto; right: var(--pad); top: 26px; bottom: auto; }
  .rp-close { left: 8px; right: auto; top: 6px; }
  .rp-nav { top: calc(64px + var(--rp-h) / 2); }
  .rp-prev { left: 8px; right: auto; }
  .rp-next { right: 8px; left: auto; }
}
@media (max-width: 720px) {          /* 폰: 화면 가득 · 글은 영상 위 아래쪽 · 위아래로 밀어서 넘기기 */
  .tiles--reel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
  .tiles--reel > .tiles-note { padding-left: var(--pad); padding-right: var(--pad); }
  .reel-len { left: 8px; bottom: 8px; gap: 4px; font-size: 9px; letter-spacing: .12em; }
  .ar-filter { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; }
  .ar-type { gap: 16px; }
  .ar-type button { padding-bottom: 6px; font-size: 21px; letter-spacing: -.02em; }
  .ar-cats { display: none; }
  .ar-catsel { display: inline-flex; }
  .reel-dlg { --rp-h: min(calc(100vh - 56px), calc(100vw * 16 / 9)); background: #000; }
  @supports (height: 100dvh) { .reel-dlg { --rp-h: min(calc(100dvh - 56px), calc(100vw * 16 / 9)); } }
  .rp-frame { top: 56px; }
  .rp-info { left: 0; right: 0; top: auto; bottom: calc(100vh - 56px - var(--rp-h) + 24px); width: auto; padding: 64px 20px 8px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); transform: none; pointer-events: none; }
  @supports (height: 100dvh) { .rp-info { bottom: calc(100dvh - 56px - var(--rp-h) + 24px); } }
  .rp-info .rp-note { pointer-events: auto; }
  .rp-hint { display: flex; }
  .rp-title { font-size: 21px; }
  .rp-count { top: 22px; right: 20px; }
  .rp-close { left: 4px; top: 4px; }
  .rp-nav { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rp-bar { z-index: 4; }
  .reel-dlg.is-frame .rp-info { display: none; }
  /* 폰 피드 — 인스타 릴스처럼 위아래로 스르륵 (칸마다 표지 · 제목, 보이는 칸에서 재생) */
  .reel-dlg.is-feed { touch-action: pan-y; background: #000; }
  .rp-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; }
  .rp-feed::-webkit-scrollbar { display: none; }
  .rp-slide { position: relative; height: 100%; overflow: hidden; background: #000; scroll-snap-align: start; scroll-snap-stop: always; }
  .rp-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .reel-dlg.is-feed .rp-frame { left: 0; top: 0; width: 100%; height: 100%; transform: none; background: transparent; }
  .reel-dlg.is-feed .rp-stage > img { object-fit: cover; }
  .reel-dlg.is-feed .rp-stage > video { background: transparent; }
  .reel-dlg.is-feed .rp-stage > video.is-tall { object-fit: cover; }
  .reel-dlg.is-feed .rp-info, .reel-dlg.is-feed .rp-hint { display: none; }
  .rp-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 80px 20px var(--rp-cap-b, calc(36px + env(safe-area-inset-bottom))); background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); color: var(--y); pointer-events: none; transition: padding-bottom .2s ease; }
  .rp-cap .num { font-size: 10px; }
  .rp-cap .rp-title { margin-top: 6px; font-size: 17px; }
  .rp-cap .rp-meta { margin-top: 5px; font-size: 12px; }
  .rp-cap .rp-note { pointer-events: auto; }
  /* 사파리 아래 막대가 접혀 있으면(is-bars-off) 화면 맨 아래 누름은 사파리가 가져가요 → 재생 막대 · 글을 위로 */
  .reel-dlg.is-feed { --rp-bar-b: calc(2px + env(safe-area-inset-bottom)); --rp-cap-b: calc(36px + env(safe-area-inset-bottom)); }
  .reel-dlg.is-feed.is-bars-off { --rp-bar-b: max(92px, calc(58px + env(safe-area-inset-bottom))); --rp-cap-b: max(124px, calc(90px + env(safe-area-inset-bottom))); }   /* 막대 선이 화면 아래 102px — 사파리 막대가 접혀 있을 때 맨 아래 80px 쯤은 사파리가 가져가요 (누르면 막대가 다시 나와요) */
  .reel-dlg.is-feed .rp-bar { bottom: var(--rp-bar-b); height: 52px; transition: bottom .2s ease; }   /* 누르는 칸은 선 위로 넓게 (사파리가 가져가는 맨 아래를 피해서) */
  .reel-dlg.is-feed .rp-sound { top: 54px; right: 10px; }
  .reel-dlg.is-feed .rp-close, .reel-dlg.is-feed .rp-count { z-index: 5; filter: drop-shadow(0 1px 6px rgba(0,0,0,.7)); }
}
@media (max-width: 374px) {          /* 작은 폰: 사진 · 영상 · REEL · ETC + 전체 ▾ 가 한 줄에 들어가게 */
  .ar-type { gap: 13px; }
  .ar-type button { font-size: 19px; }
}
@media (max-width: 340px) {
  .ar-filter { gap: 8px; }
  .ar-type { gap: 10px; }
  .ar-type button { font-size: 17px; }
  .ar-catsel select { padding: 0 28px 0 12px; }
  .ar-catsel svg { right: 10px; }
}

/* =========================================================
   일정 — 주간 · 월간 보기 (메인 페이지, 시안대로)
   ========================================================= */
.cal { margin-top: 56px; scroll-margin-top: 24px; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cal-l { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cal-seg { display: inline-flex; padding: 4px; border: 1px solid rgba(255,199,44,.35); border-radius: 999px; }
.cal-seg button { min-height: 36px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cal-seg button[aria-pressed="true"] { background: var(--y); color: #050505; font-weight: 500; }
.cal-nav { display: inline-flex; align-items: center; gap: 2px; }
.cal-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--y); cursor: pointer; }
.cal-arrow:hover { color: #fff; }
.cal-range { min-width: 200px; font-size: 16px; letter-spacing: .02em; text-align: center; }
.cal.is-month .cal-range { min-width: 96px; }
.cal-today { min-height: 32px; padding: 0 14px; border: 1px solid rgba(255,199,44,.35); border-radius: 999px; background: transparent; color: var(--y); font: inherit; font-size: 12px; cursor: pointer; }
.cal-today:hover { border-color: var(--y); }
.cal-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-kinds button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,199,44,.3); border-radius: 999px; background: transparent; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.cal-kinds button:hover { border-color: var(--y); }
.cal-kinds button[aria-pressed="true"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.cal-kinds button[aria-pressed="true"] .dot { border-color: #050505; }
.cal-kinds button[aria-pressed="true"] .d-int { background: #050505; }
.dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.d-int { background: var(--y); }
.d-mar { border: 1.5px solid var(--y); }
.d-baro { border: 1.5px solid var(--ink); }
.d-etc { border: 1px solid rgba(255,199,44,.55); }
.k-int { background: var(--y); color: #050505; border: 1px solid var(--y); }
.k-mar { background: rgba(5,5,5,.4); color: var(--y); border: 1px solid var(--y); }
.k-baro { background: rgba(5,5,5,.4); color: var(--ink); border: 1px solid var(--ink); }
.k-etc { background: rgba(5,5,5,.4); color: var(--y); border: 1px solid rgba(255,199,44,.35); }
.cal .num { letter-spacing: .12em; }                 /* 달력 영어 (요일 · MARATHON · INTERVAL …) — 사이트 기본 .22em 보다 촘촘하게 */
.cal-empty { padding: 26px 0; font-size: 14px; }
.cal-body:focus { outline: none; }

/* 웹 · 주간: 요일 7칸 — 오늘은 머리를 노란 띠로 (TODAY 글자 없이), 같은 줄 카드는 아래 끝까지 높이를 맞춰요 */
.cw { margin-top: 20px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.cw-col { --pt: 14px; --px: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 440px; padding: var(--pt) var(--px) 16px; border: 1px solid rgba(255,199,44,.16); border-radius: 14px; background: rgba(5,5,5,.35); }
.cw-col.is-today { border-color: var(--y); background: rgba(255,199,44,.07); }
.cw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: calc(var(--pt) * -1) calc(var(--px) * -1) 0; padding: var(--pt) var(--px) 12px; border-radius: 13px 13px 0 0; }
.cw-col.is-today .cw-head { background: var(--y); color: #050505; }
.cw-date { font-size: clamp(22px, 2.1vw, 30px); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.cw-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0; padding: 14px 14px 16px; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; transition: transform .3s ease; }
@supports (grid-template-rows: subgrid) {           /* 요일 칸이 줄을 나눠 써요 → n번째 카드끼리 높이가 같아요 */
  .cw { grid-template-rows: auto repeat(var(--rows, 1), auto) 1fr; min-height: 440px; }
  .cw-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 10px; min-height: 0; }
  .cw-card { align-self: stretch; }
}
.cw-card:hover, .cw-card:focus-visible { transform: translateY(-3px); }
.cw-card:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
.cw-time { font-size: clamp(20px, 1.9vw, 28px); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.cw-kind { margin-top: 14px; }
.cw-title { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.cw-place { margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: .85; overflow-wrap: anywhere; }

/* 월간: 달력 + 고른 날 */
.cm-heads, .cm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 8px; }
.cm-heads { margin-top: 18px; }
.cm-heads .num { padding: 10px 6px; }
.cm-cell { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; min-height: 124px; margin: 0; padding: 10px 6px 12px; border: 0; border-top: 1px solid rgba(255,199,44,.18); border-radius: 0; background: transparent; color: var(--y); font: inherit; text-align: left; cursor: pointer; }
.cm-cell:hover { background: rgba(255,199,44,.04); }
.cm-cell.is-out { opacity: .35; cursor: default; }
.cm-cell.is-ed:not(.is-out):hover::after { content: '+ 일정 추가'; margin-top: auto; font-size: 11.5px; color: rgba(255,199,44,.7); }   /* 운영진: 빈 곳을 누르면 일정 추가 */
.cm-cell.is-sel { outline: 1.5px solid var(--y); outline-offset: -1px; background: rgba(255,199,44,.06); }
.cm-cell:focus-visible { outline: 2px solid var(--y); outline-offset: -2px; }
.cm-day { font-size: 20px; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.cm-cell.is-today .cm-day { display: inline-grid; place-items: center; align-self: flex-start; min-width: 30px; height: 30px; margin: -5px 0 0 -6px; padding: 0 6px; border-radius: 999px; background: var(--y); color: #050505; font-weight: 400; }
.cm-pill { display: block; padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pill { cursor: pointer; transition: filter .15s, transform .15s; }   /* 누르면 안내 창 */
.cm-pill:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cm-more { font-size: 11px; opacity: .8; }
.cm-pick { margin-top: 48px; }
.cm-rows { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cm-rows li { border-bottom: 1px solid var(--line); }
.cm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) 28px; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 22px 0; border: 0; background: transparent; color: var(--y); font: inherit; text-align: left; cursor: pointer; transition: background-color .35s ease, color .35s ease, padding .35s ease; }
.cm-row svg { opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .35s ease; }
.cm-row:hover, .cm-row:focus-visible { background: var(--y); color: #050505; padding-left: 24px; padding-right: 24px; }
.cm-row:hover svg, .cm-row:focus-visible svg { opacity: 1; transform: none; }
.cm-time { font-size: clamp(32px, 3.2vw, 44px); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.cm-name { font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; letter-spacing: -.03em; text-transform: uppercase; }
.cm-place { font-size: 13px; text-align: right; }

/* 폰 · 주간: 요일 줄 + 카드 / 월간: 작은 달력 + 카드 */
.cal-dots { display: flex; justify-content: center; gap: 3px; height: 6px; }
.cal-dots .dot { width: 6px; height: 6px; }
.cal-dots .d-mar, .cal-dots .d-baro { border-width: 1.2px; }
.pw-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pw-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 8px 0 10px; border: 1px solid rgba(255,199,44,.16); border-radius: 12px; background: rgba(5,5,5,.35); color: var(--y); font: inherit; cursor: pointer; }
.pw-day.is-today { border-color: var(--y); background: rgba(255,199,44,.07); }
.pw-day.is-sel { border-color: var(--y); background: var(--y); color: #050505; }
.pw-day.is-sel .dot { border-color: #050505; }
.pw-day.is-sel .d-int { background: #050505; }
.pw-dow { font-size: 10px; opacity: .8; }
.pw-num { font-size: 18px; font-weight: 300; line-height: 1; }
.pw-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pw-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px 16px; border-radius: 14px; font: inherit; text-align: left; cursor: pointer; }
.pw-when { display: grid; gap: 4px; }
.pw-when .num { font-size: 9px; white-space: nowrap; }
.pw-time { font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.pw-txt { display: grid; gap: 3px; min-width: 0; }
.pw-txt b { font-size: 14px; font-weight: 500; }
.pw-txt span { font-size: 12px; opacity: .85; overflow-wrap: anywhere; }
.cm-grid.is-small { gap: 2px; }
.cm-grid.is-small .cm-cell { align-items: center; gap: 5px; height: 50px; min-height: 0; padding: 7px 0 0; border: 0; border-radius: 10px; text-align: center; }
.cm-grid.is-small .cm-cell.is-sel { outline: 0; border: 1px solid var(--y); background: rgba(255,199,44,.07); }
.cm-grid.is-small .cm-day { font-size: 15px; }
.cm-grid.is-small .cm-cell.is-today .cm-day { min-width: 24px; height: 24px; margin: -4px 0 0; padding: 0 5px; font-size: 13px; align-self: center; }
.cm-heads span { padding: 6px 0; font-size: 11px; text-align: center; opacity: .7; }
.cal-legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 8px; height: 8px; }

@media (max-width: 1100px) {
  .cw { gap: 6px; }
  .cw { min-height: 380px; }
  .cw-col { --pt: 12px; --px: 8px; padding-bottom: 14px; min-height: 380px; }
  .cw-card { padding: 12px 10px 14px; }
  .cal-range { min-width: 170px; }
}
@media (max-width: 720px) {
  .cal { margin-top: 32px; }
  .cal-bar { flex-wrap: nowrap; padding-bottom: 0; border-bottom: 0; }
  .cal-l { flex: 1 1 auto; flex-wrap: nowrap; justify-content: space-between; }
  .cal-today, .cal-kinds { display: none; }
  .cal-range { min-width: 104px; font-size: 15px; white-space: nowrap; }   /* '10.25 — 10.31' 한 줄로 */
  .cal-seg button { padding: 0 16px; }
  .cal.is-month .cal-range { min-width: 84px; }
  .cm-heads { margin-top: 14px; }
  .cm-pick { margin-top: 18px; }
  .cm-pick .pw-list { margin-top: 10px; gap: 8px; }
  .cm-pick .pw-card { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 360px) {                                   /* 아주 좁은 폰 — 주간/월간 · 날짜 범위가 한 줄에 */
  .cal-seg button { padding: 0 12px; }
  .cal-arrow { width: 32px; }
  .cal-range { min-width: 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cw-card, .cm-row { transition: none; } }

/* 폰 · 태블릿 (마우스를 올려 볼 수 없는 화면): 사진 · 얼굴은 컬러로. 컴퓨터는 흑백 → 마우스를 올리면 컬러 그대로 */
@media (hover: none) {
  .tile-media img, .shot img, .reel img, .ppl-face img, .ppl-stk img { filter: none; }
  .ppl-strip.is-dragging .ppl-face:not([aria-pressed="true"]) img, .ppl-strip.is-gliding .ppl-face:not([aria-pressed="true"]) img { filter: none; }
}

/* =========================================================
   회원 (1.19) — 오른쪽 위 이름 · 메뉴 / 로그인 · 회원가입 창 / 알림
   ========================================================= */
.login.is-me { gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.login.is-me .login-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login.is-me svg { transition: transform .2s ease; }
.login[aria-expanded="true"] svg { transform: rotate(180deg); }
.mmenu { position: absolute; z-index: 40; top: calc(100% - 12px); right: var(--pad); min-width: 210px; padding: 8px; border: 1px solid rgba(255,199,44,.35); border-radius: 14px; background: rgba(10,9,8,.97); box-shadow: 0 20px 50px rgba(0,0,0,.55); animation: mmenuIn .18s ease; }
@keyframes mmenuIn { from { opacity: 0; transform: translateY(-6px); } }
.mmenu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid rgba(255,199,44,.18); margin-bottom: 6px; }
.mmenu-who b { font-size: 15px; font-weight: 500; color: var(--y); }
.mmenu-who small { font-size: 12px; color: #A39C90; }
.mmenu [role="menuitem"] { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.mmenu [role="menuitem"]:hover, .mmenu [role="menuitem"]:focus-visible { background: rgba(255,199,44,.12); color: var(--y); outline: none; }

html.m-open { overflow: hidden; }
.mdlg { width: min(360px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255,199,44,.32); border-radius: 18px; background: #0B0A08; color: var(--y); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.mdlg::backdrop { background: rgba(3,3,3,.8); }
.mdlg { overflow-x: hidden; scrollbar-width: none; }   /* 스크롤바 없이 (낮은 화면에서도 손가락 · 휠로는 내려가요) */
.mdlg::-webkit-scrollbar { display: none; }
.mdlg[open] { animation: spIn .3s cubic-bezier(.2,.7,.2,1); }
.mdlg-in { position: relative; padding: 34px 32px 26px; }
.mdlg-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--y); cursor: pointer; }
.mdlg-x:hover, .mdlg-x:focus-visible { background: rgba(255,199,44,.12); }
.mdlg-title { margin-top: 14px; font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.mdlg-tabs { display: flex; gap: 22px; margin-top: 26px; border-bottom: 1px solid var(--line); }
.mdlg-tabs[hidden] { display: none; }
.mdlg-tabs button { margin-bottom: -1px; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255,199,44,.45); font: inherit; font-size: 15px; cursor: pointer; }
.mdlg-tabs button:hover { color: var(--y); }
.mdlg-tabs button[aria-selected="true"] { color: var(--y); border-bottom-color: var(--y); font-weight: 500; }
.mdlg-why { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: rgba(255,199,44,.1); color: var(--ink); font-size: 13px; line-height: 1.6; }
.mdlg-form .field { margin-top: 22px; }
.mdlg-hint { display: block; margin-top: 7px; font-size: 12px; color: #A39C90; }
.mdlg-go { width: 100%; margin-top: 30px; }
.mdlg-go:disabled { opacity: .5; cursor: default; }
.mdlg .form-msg { min-height: 0; margin-top: 12px; }
.mdlg .form-msg:empty { display: none; }
.mdlg-note { margin-top: 16px; font-size: 12.5px; line-height: 1.7; color: #A39C90; word-break: keep-all; }
.mdlg-note.is-one { margin-top: 18px; text-align: center; font-size: 13.5px; }
.mdlg-link { padding: 0; border: 0; background: none; color: var(--y); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mdlg-done { padding: 28px 0 4px; text-align: center; }
.mdlg-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--y); color: #050505; }
.mdlg-done-t { margin-top: 18px; font-size: 20px; font-weight: 500; }
.mdlg-done-s { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.mdlg-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,199,44,.14); font-size: 12px; }
.mdlg-foot a { color: #A39C90; text-underline-offset: 3px; }
.mdlg-foot a:hover { color: var(--y); }
@media (max-width: 640px) {
  .mdlg-in { padding: 28px 22px 22px; }
  .mdlg-title { font-size: 30px; }
}
/* 프로필 사진 (1.19.1) — 오른쪽 위 · 메뉴 · 가입 · 내 프로필 */
.m-av { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #1E1C18; color: var(--y); font-size: 15px; font-weight: 500; line-height: 1; }
.m-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-av img.is-broken { display: none; }
.m-av.is-xs { width: 24px; height: 24px; font-size: 11px; }
.m-av.is-sm { width: 36px; height: 36px; font-size: 13px; }
.m-av.is-xl { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 0 0 1px rgba(255,199,44,.35); }
.mmenu-who { flex-direction: row; align-items: center; gap: 12px; }
.mmenu-who > span:not(.m-av) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mdlg-pf { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.field .mdlg-pf span { font-family: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }
.field .mdlg-pf .m-av { display: inline-grid; font-size: 26px; }
.field .mdlg-pf .m-av-i { display: inline; font-size: inherit; }
.mdlg-pf-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mdlg-pf-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mdlg-mini { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,199,44,.45); border-radius: 999px; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.mdlg-mini:hover, .mdlg-mini:focus-visible { background: rgba(255,199,44,.12); }
.mdlg-mini.is-quiet { border-color: rgba(242,239,232,.2); color: #A39C90; }
.mdlg-mini[hidden] { display: none; }
.mdlg-pf-r { position: relative; }
.field .mdlg-file, .mdlg-file { position: absolute; top: 0; left: 0; display: block; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }   /* 사진 고르기 (숨긴 파일 칸) — .field input 의 width:100% 가 창을 옆으로 밀지 않게 */
.mdlg-pf-r .mdlg-hint { margin-top: 0; line-height: 1.5; }
/* 회원 전용 (1.19.1) — 비회원: 페이지 안 내용 대신 안내 · 링크를 누르면 '회원 전용입니다' 창 */
.m-pagegate { display: none; }
html.no-member .m-pagegate { display: block; margin-top: 8px; }
html.no-member [data-members-only] { display: none !important; }
.mdlg-gate { padding: 26px 0 2px; text-align: center; }
.mdlg-gate[hidden] { display: none; }
.mdlg-lock { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,199,44,.5); border-radius: 50%; background: rgba(255,199,44,.08); color: var(--y); }
.mdlg-gate-t { margin-top: 18px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--y); }
.mdlg-gate-s { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--ink); word-break: keep-all; }
.mgate-s { word-break: keep-all; }
.mdlg-gate .mdlg-go { margin-top: 26px; }
/* 로그인하면 맨 아래 Join (가입) 단추는 숨겨요 */
html.m-in .cta a.btn-line[href$="#join"], html.m-in .cls-note a[href$="#join"] { display: none; }
.m-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); padding: 13px 20px; border: 1px solid rgba(255,199,44,.4); border-radius: 999px; background: rgba(10,9,8,.96); color: var(--ink); font-size: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .25s ease, transform .25s ease; }
.m-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 비회원: 아카이브 사진 · 영상 표지는 흐리게 (로그인하면 그대로) ---------- */
html.no-member .tile .tile-media > img, html.no-member .reel > img { filter: blur(18px) grayscale(1) brightness(.72) !important; transform: scale(1.2) !important; }
html.no-member .more-mos, html.no-member .tile--more:hover .more-mos, html.no-member .tile--more:focus-visible .more-mos { filter: blur(18px) brightness(.85) !important; transform: scale(1.15); }   /* '+21 전체 기록 보기' 묶음 표지도 흐리게 */
html.no-member .tile:not(.is-skeleton):not(.tile--more) .tile-media::before, html.no-member .reel::before {
  content: "회원 전용"; position: absolute; inset: 12px 12px auto auto; z-index: 2; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px 0 28px; border: 1px solid rgba(255,199,44,.55); border-radius: 999px;
  background: rgba(5,5,5,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3M5.5 11h13v9h-13z'/%3E%3C/svg%3E") 10px 50% / 13px 13px no-repeat;
  color: var(--y); font-size: 11px; letter-spacing: .02em; pointer-events: none; }
html.no-member .tiles--film .tile-media::before { inset: 10px 10px auto auto; }
/* 회원 전용 안내 (앨범 · REEL) */
.mgate { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px auto 0; padding: 56px 24px 52px; max-width: 640px; border: 1px dashed rgba(255,199,44,.45); border-radius: 18px; text-align: center; }
.mgate-ic { display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid var(--y); border-radius: 50%; }
.mgate-t { margin-top: 6px; font-family: var(--font-ext); font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.mgate-s { max-width: 360px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.mgate-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 14px; }
.mgate-join { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.mgate-join:hover { color: #fff; }
.album-view.is-gated .gallery { display: block; }
.mgate--reel { margin: 0; padding: 22px 18px 20px; border-color: rgba(255,199,44,.55); background: rgba(5,5,5,.72); }
.mgate--reel .mgate-ic { width: 46px; height: 46px; }
.mgate--reel .mgate-s { font-size: 13.5px; }

/* =========================================================
   R-Log (rlog.html) — 크루 보드 + 나의 기록 + 기록 남기기
   운동: 러닝 = 밝은 막대 · 인터벌 = 노란 점선 · 하이록스 = 회색 · 대회 = 노란 띠 · 휴식 = 점선
   ========================================================= */
.rl { padding-bottom: 120px; }
.rl-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rl-add { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--y); color: #050505; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s ease; }
.rl-add:hover, .rl-add:focus-visible { background: #fff; }
.rl-gate, .rl-msg, .rl-body { padding: 0 var(--pad); }
.rl-gate { margin-top: 40px; }
.rl-msg { margin-top: 40px; font-size: 14px; color: var(--ink); }
.rl-msg.is-big { margin-top: 36px; font-size: clamp(36px, 5vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -.05em; color: var(--y); }   /* 불러오는 중… — 아카이브 앨범 제목처럼 */
.rl-body { margin-top: 48px; }
.rl-plan { padding: 24px 28px 26px; border: 1px solid var(--line); border-radius: 20px; }
.rl-plan-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.rl-plan-t { margin-top: 10px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.03em; }
.rl-plan-t b { font-weight: 500; }
.rl-dday { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.rl-dday b { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--y); color: #050505; font-family: var(--font-ext); font-size: 11px; letter-spacing: .14em; }
.rl-dday b { flex: none; }
.rl-dday-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.3; }
.rl-dday-t small { font-size: 12px; color: #A39C90; }   /* 1.41 출발 시간 · 출발지 */
.rl-cycles { display: flex; gap: 6px; margin-top: 20px; }
.rl-cy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rl-cy-bar { display: block; height: 8px; margin-bottom: 8px; border-radius: 999px; background: rgba(242,239,232,.2); }
.rl-cy.is-now .rl-cy-bar { background: var(--y); }
.rl-cy.is-next .rl-cy-bar { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,199,44,.45); }
.rl-cy b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-cy.is-past b, .rl-cy.is-past .rl-cy-ph { color: #A39C90; }
.rl-cy-ph { font-size: 12px; color: var(--y); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-cy small { font-size: 12px; color: #A39C90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-top: 40px; border-bottom: 1px solid var(--line); }
.rl-tabs { display: flex; gap: 28px; }
.rl-tabs button { margin-bottom: -1px; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255,199,44,.42); font: inherit; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1; letter-spacing: -.035em; cursor: pointer; }
.rl-tabs button:hover { color: var(--y); }
.rl-tabs button[aria-selected="true"] { color: var(--y); border-bottom-color: var(--y); }
.rl-tabs button[hidden] { display: none; }
.rl-week { display: flex; align-items: center; gap: 4px; padding-bottom: 10px; }
.rl-week-t { min-width: 210px; padding: 0 8px; font-size: 14px; text-align: center; color: var(--ink); }
.rl-week-t b { margin-right: 4px; color: var(--y); font-weight: 500; }
.rl-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,199,44,.4); border-radius: 50%; background: none; color: var(--y); cursor: pointer; }
.rl-arrow:hover:not(:disabled), .rl-arrow:focus-visible { background: var(--y); color: #050505; }
.rl-arrow:disabled { opacity: .3; cursor: default; }
.rl-panel { padding-top: 28px; }
.rl-panel[hidden] { display: none; }
.rl-empty { padding: 40px 0; font-size: 15px; color: var(--ink); }
.rl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rl-stat { padding: 18px 20px; border: 1px solid rgba(242,239,232,.08); border-radius: 16px; background: #0E0D0B; }
.rl-stat-l { font-size: 12.5px; color: #A39C90; }
.rl-stat-v { margin-top: 10px; font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.rl-stat-v small { margin-left: 6px; font-size: 13px; letter-spacing: 0; color: #CFC8BC; }
.rl-stat-s { margin-top: 8px; min-height: 1em; font-size: 12px; color: #A39C90; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 운동 표시 (범례 · 고르기 단추) */
.rl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; font-size: 12.5px; color: #CFC8BC; }
.rl-legend li { display: inline-flex; align-items: center; gap: 7px; }
.rl-sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.rl-sw-run { background: var(--ink); }
.rl-sw-int { border: 1.5px dashed var(--y); background: repeating-linear-gradient(135deg, rgba(255,199,44,.8) 0 1.5px, transparent 1.5px 4px); }
.rl-sw-hyrox { background: #8A8478; }
.rl-sw-race { background: var(--y); }   /* 대회 = 노란 둥근 네모 */
.rl-sw-rest { border: 1px dashed rgba(242,239,232,.5); }
/* 멤버 카드 */
.rl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.rl-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid rgba(242,239,232,.08); border-radius: 18px; background: #0E0D0B; color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.rl-card:hover, .rl-card:focus-visible { border-color: rgba(255,199,44,.6); background: #12110E; color: var(--ink); }
.rl-card.is-me { border-color: rgba(255,199,44,.4); }
.rl-card-h { display: flex; align-items: center; gap: 12px; }
.rl-av { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #1E1C18; color: var(--y); font-size: 15px; font-weight: 500; }
.rl-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-av img.is-broken { display: none; }
.rl-av.is-big { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 1px rgba(255,199,44,.35); }
.rl-card-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rl-card-n b { font-size: 16px; font-weight: 500; color: var(--ink); }
.rl-card-n small { font-size: 12.5px; color: #A39C90; }
.rl-cond { flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.rl-cond.c-good { background: var(--y); color: #050505; font-weight: 500; }
.rl-cond.c-ok { border: 1px solid rgba(242,239,232,.45); color: var(--ink); }
.rl-cond.c-bad { border: 1px solid #FF9B6A; color: #FF9B6A; }
.rl-goal { display: flex; flex-direction: column; gap: 7px; }
.rl-goal-t { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #A39C90; }
.rl-goal-t b { font-weight: 500; color: var(--ink); }
.rl-goal-bar { display: block; height: 6px; border-radius: 999px; background: rgba(242,239,232,.1); overflow: hidden; }
.rl-goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--y); }
.rl-goal-bar.is-big { height: 8px; margin-top: 16px; }
.rl-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 88px; }
.rl-strip.is-small { height: 64px; }
.rl-sd { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-sd-bar { position: relative; flex: 1; }
.rl-sd-k { font-size: 11px; text-align: center; color: #A39C90; }
.rl-sd.is-today .rl-sd-k { color: var(--y); font-weight: 500; }
.rl-sd.is-future { opacity: .35; }
.rb { position: absolute; bottom: 0; left: 50%; width: 100%; max-width: 20px; transform: translateX(-50%); border-radius: 3px; box-sizing: border-box; }
.rb-run { background: var(--ink); }
.rb-int { border: 1.5px dashed var(--y); background: repeating-linear-gradient(135deg, rgba(255,199,44,.6) 0 1.5px, transparent 1.5px 5px), rgba(255,199,44,.06); }
.rb-hyrox { background: #8A8478; }
.rb-etc { background: #6FA8DC; }
.rb-race { top: 0; max-width: none; border-radius: 4px; background: var(--y); }        /* 대회 = 그날 칸 가득 노란 띠 */
.rb-rest { height: 7px; border: 1px dashed rgba(242,239,232,.38); }
.rb-none { height: 2px; background: rgba(242,239,232,.12); }
.rl-note { font-size: 13px; line-height: 1.55; color: #CFC8BC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-note.is-sore::before, .rl-dot { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #FF9B6A; vertical-align: 1px; }
/* 나의 기록 */
.rl-me-h { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rl-me-n { flex: 1; min-width: 0; }
.rl-me-n h2 { margin-top: 6px; font-size: clamp(36px, 4.4vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.045em; }
.rl-me-s { margin-top: 10px; font-size: 14px; color: #CFC8BC; }
.rl-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255,199,44,.45); border-radius: 999px; font-size: 13px; text-decoration: none; }
.rl-back:hover { background: var(--y); color: #050505; }
.rl-me-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 26px; }
.rl-cal-box { flex: 999 1 560px; min-width: 0; }
.rl-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rl-box { padding: 22px 24px; border: 1px solid rgba(242,239,232,.08); border-radius: 20px; background: #0E0D0B; color: var(--ink); }
.rl-box h3 { font-size: 17px; font-weight: 500; color: var(--ink); }
.rl-box h3 small { margin-left: 4px; font-size: 12.5px; font-weight: 400; color: #A39C90; }
.rl-box-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.rl-box-h .rl-legend { margin-top: 0; }
.rl-cal { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.rl-cal-row { display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)); gap: 6px; border-radius: 12px; }
.rl-cal-row.is-head { font-size: 11px; color: #A39C90; text-align: center; }
.rl-cal-row.is-sel { box-shadow: 0 0 0 1px rgba(255,199,44,.25); background: rgba(255,199,44,.04); }
.rl-cal-wk { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-left: 6px; min-width: 0; white-space: nowrap; }
.rl-cal-wk b { font-size: 16px; font-weight: 700; color: var(--y); font-variant-numeric: tabular-nums; }
.rl-cal-wk b i { margin-left: 1px; font-style: normal; font-size: 10.5px; font-weight: 400; }
.rl-cal-tw { font-size: 11.5px; font-weight: 600; color: var(--y); }   /* 훈련 주차 — 알약 없이 글자만 */
.rl-cal-wk small { font-size: 11px; color: var(--ink); }
.rl-cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3px; min-width: 0; min-height: 74px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; }
button.rl-cell { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
button.rl-cell:hover, button.rl-cell:focus-visible { border-color: var(--y); }
.rl-cell-d { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; opacity: .85; }
.rl-cell-d .rl-dot { margin: 0; }
.rl-cell-t { font-size: 12px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-cell-k { font-size: 11px; opacity: .85; }
.rl-cell-m { display: none; }
.rl-cell.t-run { background: rgba(242,239,232,.14); }
.rl-cell.t-int { border: 1.5px dashed var(--y); background: repeating-linear-gradient(135deg, rgba(255,199,44,.14) 0 1px, transparent 1px 7px), rgba(255,199,44,.04); }
.rl-cell.t-hyrox { background: rgba(138,132,120,.38); }
.rl-cell.t-etc { background: rgba(111,168,220,.2); }
.rl-cell.t-race { background: var(--y); color: #050505; }
.rl-cell.t-rest { border: 1px dashed rgba(242,239,232,.22); color: #A39C90; }
.rl-cell.t-none { border-color: rgba(242,239,232,.06); color: #8F887C; }
.rl-cell.is-today { box-shadow: 0 0 0 2px var(--y); }
.rl-cell.t-none.is-today { color: var(--y); }
.rl-cell.is-future { opacity: .3; }
.rl-foot { display: flex; align-items: center; margin-top: 14px; font-size: 12px; color: #A39C90; }
.rl-big { margin-top: 12px; font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: -.045em; color: var(--y); }
.rl-big small { margin-left: 8px; font-size: 15px; letter-spacing: 0; color: #CFC8BC; }
.rl-mile-s { margin-top: 12px; font-size: 13px; line-height: 1.6; color: #A39C90; }
.rl-weeks { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin-top: 16px; font-size: 13px; }
.rl-weeks dt { color: #CFC8BC; }
.rl-weeks dd { margin: 0; color: var(--ink); text-align: right; }
.rl-link { min-height: 32px; padding: 0; border: 0; background: none; color: var(--y); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rl-link:hover { color: #fff; }
.rl-goal-f { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.rl-goal-f[hidden] { display: none; }
.rl-goal-f input { width: 90px; height: 40px; padding: 0 12px; border: 1px solid rgba(242,239,232,.22); border-radius: 10px; background: #050505; color: var(--ink); font: inherit; font-size: 15px; }
.rl-goal-u { font-size: 13px; color: #A39C90; }
.rl-mini { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,199,44,.5); border-radius: 999px; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.rl-mini.is-main { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.rl-mini:disabled { opacity: .5; }
.rl-wbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: 150px; margin-top: 16px; }
.rl-wb { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rl-wb-v { font-size: 11px; color: var(--ink); min-height: 1em; }
.rl-wb-col { position: relative; flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; }
.rl-wb-bar { display: block; width: 100%; border-radius: 4px; background: rgba(242,239,232,.28); }
.rl-wb-bar.is-sel { background: var(--y); }
.rl-wb-bar.is-future { border: 1px dashed rgba(255,199,44,.5); background: none; }
.rl-wb-k { font-size: 10px; color: #A39C90; }
.rl-quiet { margin-top: 12px; font-size: 13px; color: #A39C90; }
.rl-sore-l { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; }
.rl-sore-l li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; color: #CFC8BC; }
.rl-sore-d { color: #FF9B6A; }
/* 일지 표 */
.rl-tbl-box { margin-top: 16px; background: #343332; border-color: #343332; }   /* 일지 판 */
.rl-tbl-tip { margin-top: 8px; font-size: 12px; color: #A39C90; }
.rl-tbl-wrap { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; overflow-x: auto; }
.rl-tbl-wrap .rl-wg { min-width: 804px; padding: 4px 12px 8px; border-radius: 16px; background: #121212; box-shadow: 0 6px 16px rgba(0,0,0,.18); }   /* 주 덩어리 (웹) */
.rl-wg .rl-wk-t { border-bottom: 1px solid rgba(255,199,44,.35); }
.rl-wg.is-closed .rl-wk-t { border-bottom-color: transparent; }
.rl-tbl { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.rl-tbl[hidden] { display: none; }
.rl-tbl col.c-d { width: 112px; }
.rl-tbl col.c-t { width: 150px; }
.rl-tbl col.c-hr { width: 96px; }
.rl-tbl col.c-p { width: 100px; }
.rl-tbl col.c-km { width: 88px; }
.rl-tbl col.c-tm { width: 76px; }
.rl-tbl thead th { padding: 10px 12px 8px; border-bottom: 1px solid rgba(143,136,124,.22); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; text-align: left; color: #8F887C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 열 이름 (주마다) */
.rl-tbl tbody tr:first-child td { border-top: 0; }
.rl-tbl thead th:first-child { padding-left: 0; }
.rl-tbl td { height: 50px; padding: 6px 12px; border-top: 1px solid rgba(242,239,232,.07); vertical-align: middle; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.rl-tbl td:first-child { padding-left: 0; }
.rl-tbl td.c-t { position: relative; }
.rl-tbl td.c-m { white-space: normal; color: #CFC8BC; }
.rl-tr-wk th { padding: 0; border-top: 1px solid rgba(255,199,44,.3); text-align: left; }
.rl-tbl tbody .rl-tr-wk:first-child th { border-top: 0; }
/* 주 머리줄 — ▾ 훈련 14주차 · 10월 5주차 · 날짜 ······ 23 km · 3회 (누르면 접기) */
.rl-wk-t { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; color: #8F887C; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.rl-wk-t:focus { outline: none; }
.rl-wk-t:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; border-radius: 6px; }
.rl-wk-v { flex: none; width: 12px; margin-left: -7px; color: var(--y); font-size: 11px; text-align: center; transition: transform .2s; }   /* ▾ 맨 오른쪽 · km 바로 옆 */
.rl-wk-t[aria-expanded="false"] .rl-wk-v { transform: rotate(-90deg); }
.rl-wk-tw { flex: none; padding: 2px 8px; border-radius: 99px; background: rgba(255,199,44,.14); color: var(--y); font-size: 11.5px; font-weight: 600; }
.rl-wk-mw { flex: none; font-size: 13.5px; font-weight: 600; color: var(--y); }
.rl-wk-d { font-size: 12px; color: #8F887C; }
.rl-wk-sum { margin-left: auto; font-size: 12px; white-space: nowrap; }
.rl-wk-sum b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--y); }
.rl-wk-sum b .rl-u { margin-left: 2px; }
.rl-wk-sum b .rl-u { color: var(--y); opacity: .8; }
.rl-wk-t:hover .rl-wk-mw { text-decoration: underline; text-underline-offset: 4px; }
.rl-tbl tr.is-today td { background: rgba(255,199,44,.07); box-shadow: inset 0 1.5px var(--y), inset 0 -1.5px var(--y); }
.rl-tbl tr.is-today td:first-child { box-shadow: inset 1.5px 0 var(--y), inset 0 1.5px var(--y), inset 0 -1.5px var(--y); border-radius: 10px 0 0 10px; }
.rl-tbl tr.is-today td:last-child { box-shadow: inset -1.5px 0 var(--y), inset 0 1.5px var(--y), inset 0 -1.5px var(--y); border-radius: 0 10px 10px 0; }
.rl-tbl td:first-child, .rl-tbl thead th:first-child { padding-left: 8px !important; }
.rl-tbl tr.is-future td { opacity: .4; }
.rl-tbl tr.is-edit.no-e { cursor: pointer; }
.rl-tbl tr.is-edit.no-e:hover td { background: rgba(255,199,44,.06); }
.rl-tdate { min-height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-decoration: underline; text-decoration-color: rgba(242,239,232,.25); text-underline-offset: 4px; cursor: pointer; }
.rl-tdate:hover { color: var(--y); text-decoration-color: currentColor; }
.rl-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.rl-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; color: var(--ink); }
.rl-pill.p-run { background: rgba(242,239,232,.14); }
.rl-pill.p-int { border: 1.5px dashed var(--y); color: var(--y); background: repeating-linear-gradient(135deg, rgba(255,199,44,.22) 0 1px, transparent 1px 5px); }
.rl-pill.p-hyrox { background: rgba(138,132,120,.42); }
.rl-pill.p-race { background: var(--y); color: #050505; font-weight: 500; }
.rl-pill.p-rest { border: 1px dashed rgba(242,239,232,.3); color: #A39C90; }
.rl-pill.p-etc { background: rgba(111,168,220,.2); color: #A9CDF0; }
.rl-u { margin-left: 2px; font-size: .78em; font-weight: 400; color: #8F887C; }
.rl-wst { display: flex; flex-direction: column; gap: 2px; }   /* 운동마다 한 줄 (같은 날 두 운동 = 두 줄) */
.rl-wl { display: flex; align-items: center; min-height: 36px; }
.rl-wl > .rl-ed { width: calc(100% + 16px); }
.rl-wl > .rl-qbox { margin-left: -8px; width: calc(100% + 8px); }
.rl-tbl td.c-hr, .rl-tbl td.c-p, .rl-tbl td.c-km, .rl-tbl td.c-tm, .rl-tbl td.c-t { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.rl-tbl td.c-d, .rl-tbl td.c-m { vertical-align: top; padding-top: 9px; }
.rl-tbl td.c-d > span { display: inline-flex; align-items: center; min-height: 32px; }
.rl-tbl tr.no-e td { vertical-align: middle; padding-top: 6px; }
.rl-tdate:focus { outline: none; }
.rl-tdate:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; border-radius: 4px; }
/* 폰: 날짜 카드 */
.rl-days { display: none; flex-direction: column; gap: 18px; margin-top: 10px; }
.rl-days .rl-wg { padding: 4px 8px 10px; border-radius: 16px; background: #212121; box-shadow: 0 6px 16px rgba(0,0,0,.18); }   /* 주 덩어리 (폰) */
.rl-days-h { margin: 0 2px; }
.rl-days-h .rl-wk-t { gap: 7px; min-height: 42px; padding: 4px 0; }
.rl-days-h .rl-wk-tw { font-size: 10.5px; padding: 1px 6px; }
.rl-days-h .rl-wk-mw { font-size: 18px; }   /* 폰: 11월 1주차 = 오른쪽 거리 숫자와 같은 크기 */
.rl-days-b { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.rl-days-b[hidden] { display: none; }
.rl-dc { display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #0E0D0B; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rl-dc:focus { outline: none; }
.rl-dc:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.rl-dc.is-today { box-shadow: inset 0 0 0 1.5px var(--y); }
.rl-dc.is-today .rl-dc-d { color: var(--y); }
.rl-dc-h { display: flex; align-items: center; gap: 8px; height: 34px; padding-bottom: 10px; border-bottom: 1px solid rgba(242,239,232,.07); line-height: 1; }
.rl-dc-d { display: inline-flex; align-items: baseline; line-height: 1; font-size: 12px; font-weight: 600; color: #D9D4CA; font-variant-numeric: tabular-nums; }
.rl-dc-d small { margin-left: 4px; font-size: 12px; font-weight: 400; color: #8F887C; }
.rl-dc-h .rl-cond { position: relative; top: -1px; min-height: 20px; padding: 0 7px; font-size: 10.5px; }   /* 한글 글자는 줄 가운데보다 살짝 위에 앉아요 → 알약을 1px 올려 날짜 · 거리 글자와 높이를 맞춰요 */
.rl-dc-h .rl-dot { margin: 0; }
/* 코치 피드백 */
.rl-fbp { flex: none; display: inline-flex; align-items: center; gap: 3px; min-height: 22px; margin: 0; padding: 0 9px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rl-fbp.is-done { background: rgba(111,211,155,.16); color: #6FD39B; box-shadow: inset 0 0 0 1px rgba(111,211,155,.55); }
.rl-fbp.is-done::before { content: '✓'; font-size: 10px; }
.rl-fbp.is-ghost { color: #A39C90; box-shadow: inset 0 0 0 1px rgba(242,239,232,.22); font-weight: 500; }
.rl-fbp.is-ghost:hover { color: var(--ink); }
.rl-fbp::after { content: '▾'; margin-left: 2px; font-size: 9px; opacity: .8; }
.rl-fbp[aria-expanded="true"]::after { content: '▴'; }
.rl-fbp:focus { outline: none; }
.rl-fbp:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.rl-mcell > .rl-fbp { justify-self: end; }
.rl-dc-h .rl-fbp { position: relative; top: -1px; min-height: 20px; padding: 0 7px; font-size: 10.5px; }
.rl-tbl tr.rl-tr-fb td { height: auto; padding: 0 0 10px; border-top: 0; white-space: normal; }
.rl-tbl tr.rl-tr-fb .rl-fb { margin-left: 104px; padding: 12px 14px; border-radius: 12px; background: #1A1A1A; }
.rl-dc .rl-fb { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(242,239,232,.12); cursor: default; }
.rl-fc { display: flex; gap: 10px; }
.rl-fc + .rl-fc { margin-top: 10px; }
.rl-fc-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2E2C28; color: var(--y); font-size: 12px; font-weight: 700; }
.rl-fc-b { flex: 1; min-width: 0; }
.rl-fc-n { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--ink); } .rl-fc-n b { font-weight: 600; } .rl-fc-n small { font-size: 11px; color: #8F887C; }
.rl-fc-t { margin-top: 3px; font-size: 13px; line-height: 1.55; color: #DDD7CC; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rl-fc-t.is-all { display: block; -webkit-line-clamp: unset; }
.rl-fc-more, .rl-fc-del { margin: 2px 10px 0 0; padding: 0; border: 0; background: none; color: #A39C90; font: inherit; font-size: 11.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rl-fc-del.is-armed { color: #FF7A5C; }
.rl-fc-none { font-size: 12.5px; color: #A39C90; }
.rl-fw { margin-top: 12px; }
.rl-fc-none + .rl-fw, .rl-fb > .rl-fw:first-child { margin-top: 0; }
.rl-fw-in { display: block; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(242,239,232,.16); border-radius: 10px; background: #0B0B0B; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.rl-fw-in::placeholder { color: #6E685E; }
.rl-fw-in:focus { outline: none; border-color: var(--y); }
.rl-fw-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rl-fw-cnt { font-size: 11px; color: #6E685E; }
.rl-fw-acts { display: flex; gap: 6px; }
.rl-fw-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(242,239,232,.3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rl-fw-btn.is-y { background: var(--y); color: #050505; box-shadow: none; }
.rl-fw-btn.is-on { background: rgba(111,211,155,.16); color: #6FD39B; box-shadow: inset 0 0 0 1px rgba(111,211,155,.55); }
.rl-fw-btn:disabled { opacity: .5; cursor: default; }
.rl-dc-tot { display: inline-flex; align-items: baseline; margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rl-dc-ws { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rl-dc-w { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rl-dc-w .rl-pill { justify-self: start; min-height: 21px; padding: 0 8px; font-size: 11.5px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
.rl-dc-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.rl-dc-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #CFC8BC; }
.rl-dc-sep { margin: 0 5px; color: #4E4A42; }
.rl-dc-w .rl-cond, .rl-dc.is-empty .rl-cond { min-height: 20px; padding: 0 7px; font-size: 10.5px; }
.rl-dc.is-empty .rl-cond { margin-left: 8px; }
.rl-dc.is-empty .rl-dot { margin: 0 0 0 8px; }
.rl-dc-memo { margin-top: 11px; font-size: 12px; line-height: 1.5; color: #A39C90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-dc.is-empty { display: flex; align-items: center; padding: 10px 12px; border: 1px dashed rgba(242,239,232,.16); background: none; box-shadow: none; }
.rl-dc.is-empty .rl-dc-d { color: #8F887C; font-weight: 400; }
.rl-dc.is-empty.is-today { border: 1.5px solid var(--y); }
.rl-dc.is-empty.is-today .rl-dc-d { color: var(--ink); font-weight: 600; }
.rl-dc.is-empty .rl-pill { margin-left: 12px; min-height: 21px; font-size: 11.5px; }
.rl-dc-add { margin-left: 8px; font-size: 12px; color: #8F887C; }
.rl-dc-add::before { content: '· '; }
.rl-dc-chev { margin-left: auto; font-size: 16px; color: #5E594F; }
.rl-add-s { display: none; }
/* 운동 고르기 — 웹: 알약 위 작은 창 · 폰: 아래 시트 */
.rl-pick { position: fixed; z-index: 80; width: 384px; max-width: calc(100vw - 16px); padding: 10px 12px 12px; border: 1px solid rgba(255,199,44,.5); border-radius: 16px; background: #12110E; color: var(--ink); box-shadow: 0 18px 48px rgba(0,0,0,.7); animation: rlqtIn .14s ease-out; }
.rl-pick:focus { outline: none; }
.rl-pick-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; font-size: 13px; }
.rl-pick-h b { font-weight: 600; }
.rl-pick-x { min-height: 30px; padding: 0 2px; border: 0; background: none; color: var(--y); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rl-pick-cap { margin: 8px 2px 6px; font-size: 11.5px; color: #8F887C; }
.rl-pick-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rl-tile { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 4px; white-space: nowrap; border: 1px solid transparent; border-radius: 11px; background: #1C1B18; color: #CFC8BC; font: inherit; font-size: 12px; line-height: 1.15; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.rl-tile:hover { border-color: rgba(255,199,44,.45); }
.rl-tile:focus { outline: none; }
.rl-tile:focus-visible { border-color: var(--y); }
.rl-tile[aria-pressed="true"] { border-color: var(--y); background: rgba(255,199,44,.13); color: var(--y); font-weight: 600; }
.rl-tile .rl-sw { width: 12px; height: 12px; border-radius: 3px; }
.rl-sw-etc { background: #6FA8DC; }   /* 그 밖 = 파란 둥근 네모 */
.rl-sw-add { width: auto !important; height: auto !important; background: none; color: #8F887C; font-size: 14px; font-style: normal; line-height: 10px; }
.rl-pick-note { margin: 8px 2px 0; font-size: 11px; color: #8F887C; }
.rl-pick-c { display: flex; gap: 6px; margin-top: 10px; }
.rl-pick-c[hidden] { display: none; }
.rl-pick-in { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--y); border-radius: 10px; background: #050505; color: var(--ink); font: inherit; font-size: 16px; }
.rl-pick-in:focus { outline: none; }
.rl-pick-in.is-bad { border-color: #FF6B5A; }
.rl-pick-ok { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--y); color: #050505; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rl-pick.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; padding: 8px 14px calc(22px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(255,199,44,.35); border-radius: 22px 22px 0 0; animation: rlSheet .24s cubic-bezier(.2,.7,.2,1); }
.rl-pick-grab { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 9px; background: #4A4740; }
.rl-pick.is-sheet .rl-pick-h { font-size: 16px; margin-bottom: 4px; }
.rl-pick.is-sheet .rl-pick-x { font-size: 14px; }
.rl-pick-dim { position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.55); animation: rlFade .2s ease-out; }
@keyframes rlSheet { from { transform: translateY(100%); } }
@keyframes rlFade { from { opacity: 0; } }
.rl-none { color: #8F887C; }
.rl-mcell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 34px; }   /* 왼쪽 운동마다 컨디션 · 오른쪽 그날 불편감 · 메모 */
.rl-mc-c { min-width: 52px; }
.rl-mc-c .rl-wl > .rl-ed { width: auto; }
.rl-mc-m { display: flex; align-items: center; gap: 6px; min-width: 0; align-self: center; }
.rl-mcell:not(.is-many) .rl-mc-m { align-self: start; min-height: 36px; }
.rl-sorebtn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.rl-sorebtn .rl-dot { margin: 0; background: none; box-shadow: inset 0 0 0 1.5px #FF9B6A; opacity: 0; transition: opacity .15s; }
.rl-sorebtn.is-on .rl-dot { background: #FF9B6A; opacity: 1; }
.rl-tbl tr:hover .rl-sorebtn .rl-dot, .rl-sorebtn:focus-visible .rl-dot { opacity: 1; }
.rl-sorebtn:focus { outline: none; }
.rl-sorebtn:focus-visible { outline: 2px solid var(--y); }
.rl-mcell > .rl-cond, .rl-mcell > .rl-dot { flex: none; }
.rl-memo-t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.5; color: #CFC8BC; }   /* 아무리 길어도 한 줄 · 넘치면 … */
/* 표에서 바로 고치기 — 칸을 누르면 그 자리에서 */
.rl-v-hr::after { content: " bpm"; font-size: .85em; color: #8F887C; }   /* 평균 심박 단위 */
.rl-ed { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% + 16px); min-height: 36px; margin: 0 -8px; padding: 0 8px; border: 1px dashed transparent; border-radius: 9px; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rl-tbl td > .rl-ed { width: calc(100% + 16px); }
.rl-ed:hover { border-color: rgba(255,199,44,.5); background: rgba(255,199,44,.05); }
.rl-ed:focus-visible { outline: 2px solid var(--y); outline-offset: 0; }
.rl-ed-ph { color: #8F887C; opacity: 0; transition: opacity .15s; }
.rl-tbl tr:hover .rl-ed-ph, .rl-ed:focus-visible .rl-ed-ph { opacity: 1; }
.rl-mcell .rl-ed { width: auto; margin: 0; }
.rl-mcell .rl-ed[data-ed="c"] { flex: none; margin-left: -8px; margin-right: 0; }
.rl-mcell .rl-ed[data-ed="memo"] { flex: 1; min-width: 0; }
.rl-qin { display: block; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--y); border-radius: 9px; background: #050505; color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.rl-qin:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,199,44,.18); }
.rl-qin.is-bad { border-color: #FF6B5A; box-shadow: 0 0 0 3px rgba(255,107,90,.18); }
.rl-qbox { display: block; width: 100%; }
.rl-qbox.is-hr, .rl-qbox.is-p, .rl-qbox.is-km { margin-left: -8px; width: calc(100% + 8px); }
.rl-mcell .rl-qbox { flex: 1; min-width: 0; }
.rl-qt { position: fixed; z-index: 60; display: grid; grid-template-columns: repeat(2, auto); gap: 6px; padding: 8px; border: 1px solid rgba(255,199,44,.55); border-radius: 14px; background: #12110E; box-shadow: 0 16px 44px rgba(0,0,0,.65); white-space: nowrap; animation: rlqtIn .14s ease-out; }
.rl-qt .rl-qchip { justify-content: flex-start; min-width: 104px; }
@keyframes rlqtIn { from { opacity: 0; transform: translateY(4px); } }
.rl-qc { display: flex; flex-wrap: wrap; gap: 6px; margin-left: -8px; }
.rl-qchip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(242,239,232,.22); border-radius: 999px; background: #050505; color: #CFC8BC; font: inherit; font-size: 12.5px; cursor: pointer; }
.rl-qchip:hover { border-color: rgba(255,199,44,.6); }
.rl-qchip[aria-pressed="true"] { border-color: var(--y); background: rgba(255,199,44,.16); color: var(--y); font-weight: 500; }
.rl-qchip.is-sore[aria-pressed="true"] { border-color: #FF9B6A; background: rgba(255,155,106,.12); color: #FF9B6A; }
.rl-qchip .rl-dot { margin-right: 0; }
.rl-panel.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }
.rl-busy { font-size: 12px; color: #8F887C; }
/* 기록 남기기 창 */
.rl-dlg { width: min(680px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255,199,44,.32); border-radius: 20px; background: #0B0A08; color: var(--y); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.rl-dlg::backdrop { background: rgba(3,3,3,.8); }
.rl-dlg[open] { animation: spIn .3s cubic-bezier(.2,.7,.2,1); }
.rl-form { position: relative; padding: 30px 30px 26px; }
.rl-dlg-t { margin-top: 12px; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
.rl-f { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.rl-lbl { display: block; padding: 0; margin-bottom: 10px; font-size: 12.5px; color: #A39C90; }
.rl-lbl small { margin-left: 6px; font-size: 11.5px; color: #8F887C; }
.rl-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rl-date-row input { height: 46px; padding: 0 12px; border: 1px solid rgba(242,239,232,.22); border-radius: 12px; background: #050505; color: var(--ink); font: inherit; font-size: 15px; color-scheme: dark; }
.rl-quick { display: flex; gap: 6px; }
.rl-quick button, .rl-chips button, .rl-seg button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(242,239,232,.22); border-radius: 999px; background: none; color: #CFC8BC; font: inherit; font-size: 13.5px; cursor: pointer; }
.rl-quick button[aria-pressed="true"] { border-color: var(--y); color: var(--y); }
.rl-date-note { min-height: 1.2em; margin-top: 8px; font-size: 12.5px; color: #CFC8BC; }
.rl-date-note:empty { display: none; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-chips button { display: inline-flex; align-items: center; gap: 8px; }
.rl-chips button[aria-pressed="true"] { border-color: var(--y); background: rgba(255,199,44,.14); color: var(--y); font-weight: 500; }
.rl-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.rl-nums[hidden] { display: none; }
.rl-num .rl-lbl { margin-bottom: 8px; }
.rl-in { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid rgba(242,239,232,.22); border-radius: 12px; background: #050505; }
.rl-in:focus-within { border-color: var(--y); }
.rl-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.rl-in input:focus { outline: none; }
.rl-in em { font-style: normal; font-size: 12px; color: #A39C90; }
.rl-hint { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; color: #8F887C; }
.rl-seg { display: inline-flex; gap: 6px; }
.rl-seg button[aria-pressed="true"][data-c="good"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 500; }
.rl-seg button[aria-pressed="true"][data-c="ok"] { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.rl-seg button[aria-pressed="true"][data-c="bad"] { border-color: #FF9B6A; color: #FF9B6A; font-weight: 500; }
.rl-cond-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rl-sore { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 2px; border: 0; background: none; color: #CFC8BC; font: inherit; font-size: 13.5px; cursor: pointer; }
.rl-sore i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: #3A3833; transition: background-color .2s; }   /* 켜고 끄는 스위치 */
.rl-sore i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.rl-sore[aria-pressed="true"] { color: #FF9B6A; }
.rl-sore[aria-pressed="true"] i { background: #FF9B6A; }
.rl-sore[aria-pressed="true"] i::after { transform: translateX(16px); }
.rl-sore:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; border-radius: 10px; }
/* 운동 카드 (하나씩) */
.rl-dbar { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; height: 50px; padding: 0 14px; background: rgba(11,10,8,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(242,239,232,.08); color: var(--ink); }
.rl-dbar-l, .rl-dbar-r { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15.5px; cursor: pointer; }
.rl-dbar-l { justify-self: start; color: #CFC8BC; }
.rl-dbar-r { justify-self: end; color: var(--y); font-weight: 600; }
.rl-dbar-r:disabled { opacity: .45; }
.rl-dbar-t { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-ws-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rl-ws-sum { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-ws { display: flex; flex-direction: column; gap: 8px; }
.rl-wc { padding: 10px 12px 12px; border-radius: 14px; background: #151412; }
.rl-wc.is-rest { padding-bottom: 10px; }
.rl-wc-h { display: flex; align-items: center; gap: 8px; }
.rl-wc-type { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.rl-wc-type .rl-pill { min-height: 26px; padding: 0 11px; font-size: 13px; }
.rl-wc-type:focus { outline: none; }
.rl-wc-type:focus-visible .rl-pill { outline: 2px solid var(--y); outline-offset: 2px; }
.rl-wc-chev { color: #5E594F; font-size: 15px; }
.rl-wc-cond { display: inline-flex; gap: 4px; margin-left: 4px; }   /* 운동마다 컨디션 */
.rl-wc-cond button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(242,239,232,.2); border-radius: 999px; background: none; color: #A39C90; font: inherit; font-size: 12px; cursor: pointer; }
.rl-wc-cond button:hover { border-color: rgba(255,199,44,.5); }
.rl-wc-cond button[aria-pressed="true"][data-c="good"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 600; }
.rl-wc-cond button[aria-pressed="true"][data-c="ok"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.rl-wc-cond button[aria-pressed="true"][data-c="bad"] { border-color: #FF9B6A; color: #FF9B6A; font-weight: 600; }
.rl-wc-cond button:focus-visible { outline: 2px solid var(--y); outline-offset: 1px; }
.rl-wc-no { margin-left: auto; font-size: 12px; color: #8F887C; }
.rl-wc-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.rl-wc-x span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FF6B4A; color: #0A0805; font-size: 15px; font-weight: 700; line-height: 1; }
.rl-wc-x:focus-visible { outline: 2px solid var(--y); }
.rl-wc-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }   /* 거리 · 페이스 · 평균 심박 · 시간 · 누적 고도 · 칼로리 */
.rl-wc-nums[hidden] { display: none; }
.rl-wn { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 9px 6px; border: 1px solid transparent; border-radius: 10px; background: #0A0908; cursor: text; }
.rl-wn:focus-within { border-color: var(--y); }
.rl-wn.is-bad { border-color: #FF6B5A; }
.rl-wn-l { overflow: hidden; font-size: 11px; color: #8F887C; white-space: nowrap; text-overflow: ellipsis; }
.rl-wn-l em { margin-left: 3px; font-style: normal; font-size: 10.5px; color: #5E594F; }
.rl-wn-v { display: flex; align-items: baseline; gap: 3px; }
.rl-wn-v input { flex: 1; min-width: 0; width: 100%; height: 24px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-wn-v input::placeholder { color: #36332D; font-weight: 400; }
.rl-wn-v input:focus { outline: none; }
.rl-wadd { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 8px; padding: 0 12px; border: 1px dashed rgba(255,199,44,.4); border-radius: 14px; background: none; color: var(--y); font: inherit; font-size: 14.5px; cursor: pointer; }
.rl-wadd[hidden] { display: none; }
/* 캡처 · 기록 파일로 채우기 */
.rl-fill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 10px; }
.rl-fill-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 1px solid rgba(255,199,44,.35); border-radius: 12px; background: rgba(255,199,44,.06); color: var(--y); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.rl-fill-b small { font-size: 11px; color: #A39C90; }
.rl-fill-b:hover:not(:disabled), .rl-fill-b:focus-visible { border-color: var(--y); background: rgba(255,199,44,.12); outline: none; }
.rl-fill-b:disabled { opacity: .5; cursor: default; }
.rl-fill-in { display: none; }
.rl-url { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: -2px 0 10px; padding: 0 6px 0 12px; border: 1px solid rgba(242,239,232,.16); border-radius: 12px; background: #0A0908; color: #8F887C; }
.rl-url:focus-within { border-color: var(--y); color: var(--y); }
.rl-url svg { flex: none; }
.rl-url input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: none; text-decoration: none; -webkit-appearance: none; appearance: none; color: var(--ink); font: inherit; font-size: 14px; }
.rl-url input::placeholder { color: #5E594F; text-decoration: none; }
.rl-url input:focus { outline: none; }
.rl-url button { flex: none; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,199,44,.4); border-radius: 999px; background: none; color: var(--y); font: inherit; font-size: 12.5px; cursor: pointer; }
.rl-url button:disabled { opacity: .45; cursor: default; }
.rl-url button:not(:disabled):hover { border-color: var(--y); background: rgba(255,199,44,.1); }
.rl-dlg.is-drop { box-shadow: inset 0 0 0 2px var(--y), 0 30px 90px rgba(0,0,0,.7); }   /* 캡처 · 파일을 끌어다 놓는 중 */
.rl-dlg.is-drop .rl-fill-b { border-color: var(--y); background: rgba(255,199,44,.14); }
.rl-fill-msg { margin: -2px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.rl-fill-msg.is-bad { color: #FF9B6A; }
/* 저장 중 표시 — 기록 창 버튼 · 표에서 바로 고칠 때 화면 아래 */
.rl-cover { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,5,5,.5); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); animation: rlFade .2s ease; }
.rl-cover[hidden] { display: none; }
.rl-cover-b { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rl-cover-b p { color: var(--ink); font-size: 15px; font-weight: 600; }
.rl-cover-i { width: 54px; height: 54px; border: 4px solid rgba(255,199,44,.18); border-top-color: var(--y); border-radius: 50%; animation: rlSpin .8s linear infinite; }
.rl-cover.is-done .rl-cover-i { display: grid; place-items: center; border: 0; background: var(--y); animation: none; }
.rl-cover.is-done .rl-cover-i::after { content: '✓'; color: #050505; font-size: 28px; font-weight: 700; }
@keyframes rlFade { from { opacity: 0; } }
.rl-saving.is-busy::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rlSpin .8s linear infinite; }
.rl-saving { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); z-index: 60; translate: -50% 0; padding: 10px 18px; border: 1px solid rgba(255,199,44,.4); border-radius: 999px; background: #151412; color: var(--y); font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); pointer-events: none; }
.rl-saving[hidden] { display: none; }
/* 운동 사진 — 카드 아래 둥근 정사각형 */
.rl-wph[hidden] { display: none; }
.rl-wph-h { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 2px 8px; font-size: 12px; color: #8F887C; }
.rl-wph-h b { color: var(--ink); font-weight: 500; }
.rl-wph-h small { font-size: 11.5px; }
.rl-wph-more { padding: 0; border: 0; background: none; color: var(--y); font: inherit; font-size: 12px; cursor: pointer; }
.rl-wph-g { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-wph-t { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #2A2723; }
.rl-wph-v { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rl-wph-v img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-wph-x { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rl-wph-x span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 10px; line-height: 1; }
.rl-wph-x:focus-visible span { outline: 2px solid var(--y); }
.rl-wph-t.is-busy .rl-wph-v { opacity: .45; cursor: progress; }
.rl-wph-spin { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255,199,44,.3); border-top-color: var(--y); border-radius: 50%; animation: rlSpin .8s linear infinite; pointer-events: none; }
@keyframes rlSpin { to { transform: rotate(360deg); } }
.rl-wph-t.is-add { display: grid; place-items: center; padding: 0; border: 1px dashed rgba(255,199,44,.45); background: none; color: var(--y); font: inherit; font-size: 22px; cursor: pointer; }
.rl-wph-t.is-add:hover, .rl-wph-t.is-add:focus-visible { border-color: var(--y); background: rgba(255,199,44,.08); outline: none; }
.rl-wph.is-empty { margin-top: 10px; }
.rl-wph-add0 { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border: 1px dashed rgba(255,199,44,.4); border-radius: 999px; background: none; color: var(--y); font: inherit; font-size: 12.5px; cursor: pointer; }
.rl-wph-add0 i { font-style: normal; font-size: 15px; line-height: 1; }
.rl-phv { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.96); cursor: zoom-out; }
.rl-phv[hidden] { display: none; }
.rl-phv img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.rl-phv-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
.rl-ocr { margin: -4px 0 12px; font-size: 12px; color: #8F887C; }
.rl-ocr[hidden] { display: none; }
.rl-ocr summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rl-ocr pre { max-height: 180px; overflow: auto; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #0A0908; color: #CFC8BC; font: inherit; font-size: 12px; line-height: 1.5; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.rl-wc.is-filled { animation: rlFilled 2.4s ease-out; }
@keyframes rlFilled { 0%, 40% { box-shadow: inset 0 0 0 1.5px var(--y); } 100% { box-shadow: inset 0 0 0 1.5px transparent; } }
.rl-wadd i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--y); color: #050505; font-style: normal; font-weight: 700; line-height: 1; }
.rl-wadd:hover, .rl-wadd:focus-visible { border-color: var(--y); outline: none; }
.rl-memo { display: block; }
.rl-memo textarea { display: block; width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid rgba(242,239,232,.22); border-radius: 12px; background: #050505; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
.rl-memo textarea:focus { outline: none; border-color: var(--y); }
.rl-form .form-msg:empty { display: none; }
.rl-f-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.rl-save { min-height: 50px; padding: 0 40px; border: 0; border-radius: 999px; background: var(--y); color: #050505; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.rl-save:hover:not(:disabled), .rl-save:focus-visible { background: #fff; }
.rl-save:disabled { opacity: .5; cursor: default; }
.rl-del { margin-right: auto; min-height: 44px; padding: 0; border: 0; background: none; color: #FF9B6A; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rl-del.is-armed { padding: 0 14px; border-radius: 999px; background: #FF6B4A; color: #0A0805; text-decoration: none; font-weight: 500; }
@media (max-width: 860px) {
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rl-body { margin-top: 32px; }
  .rl-plan { padding: 20px 18px 22px; }
  .rl-cy small { display: none; }
  .rl-cy b { font-size: 12.5px; }
  .rl-bar { gap: 14px; }
  .rl-week { width: 100%; justify-content: space-between; }
  .rl-week-t { flex: 1; min-width: 0; }
  .rl-stat { padding: 16px; }
  .rl-stat-v { font-size: 30px; }
  .rl-cards { grid-template-columns: minmax(0, 1fr); }
  .rl-box { padding: 18px 16px; }
  .rl-cal-row { grid-template-columns: 50px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .rl-cal-wk { padding-left: 3px; gap: 2px; }
  .rl-cal-wk .rl-wide { display: none; }      /* 폰: 14주차 · 10월 5주 */
  .rl-cal-tw { font-size: 9.5px; }
  .rl-cal-wk b i { display: none; }
  .rl-cell { min-height: 46px; padding: 5px; border-radius: 8px; }
  .rl-cell-t, .rl-cell-k { display: none; }
  .rl-lg-more { display: none; }                   /* 폰: 범례 '그 밖' 한 단어로 (휴식 옆에 한 줄로) */
  .rl-legend { gap: 6px 9px; font-size: 11.5px; letter-spacing: -.02em; }
  .rl-legend li { gap: 4px; white-space: nowrap; }
  .rl-legend .rl-sw { width: 10px; height: 10px; }
  .rl-cell-m { display: flex; flex-direction: column; gap: 1px; margin-top: auto; overflow: hidden; font-size: 10px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 폰: 10km · +1 */
  .rl-cell-m b { font-weight: 600; letter-spacing: -.02em; }
  .rl-cell-m i { font-style: normal; font-weight: 600; opacity: .8; }
  .rl-cal-wk b { font-size: 13px; }
  .rl-cal-wk small { font-size: 9.5px; }
  .rl-big { font-size: 42px; }
  /* 폰: 표 대신 날짜 카드 목록 */
  .rl-tbl-wrap, .rl-tbl-tip { display: none; }
  .rl-days { display: flex; }
  .rl-tbl-box { padding: 14px 8px 10px; border-radius: 18px; }
  .rl-tbl-box > .rl-box-h { padding: 0 4px; }
  /* 폰: 기록 창 = 화면 전체 (위 줄 취소 · 날짜 · 저장) */
  .rl-dlg { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; scrollbar-width: none; }
  .rl-dlg::-webkit-scrollbar { display: none; }
  .rl-dlg[open] { animation: rlUp .28s cubic-bezier(.2,.7,.2,1); }
  .rl-form { padding: 0 14px calc(28px + env(safe-area-inset-bottom)); }
  .rl-dbar { display: grid; position: sticky; top: 0; z-index: 3; margin: 0 -14px; }
  .rl-form > .mdlg-x, .rl-dlg-num, .rl-dlg-t, .rl-save { display: none; }
  .rl-f { margin-top: 20px; }
  .rl-f-acts { margin-top: 22px; }
  .rl-del { width: 100%; min-height: 50px; margin: 0; border-radius: 14px; background: #151412; text-decoration: none; font-size: 15px; color: #FF7A5C; }
  .rl-del.is-armed { background: #FF6B4A; color: #0A0805; }
  .rl-wc-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rl-wc-no { display: none; }
  .rl-fill-b small { display: none; }
  .rl-fill-b { flex-direction: column; gap: 5px; min-height: 58px; padding: 0 4px; font-size: 11px; letter-spacing: -.03em; line-height: 1.2; }   /* 셋이 한 줄: 아이콘 위 · 글자 아래 */
  .rl-fill-b svg { width: 18px; height: 18px; }
  .rl-wph-t { width: 56px; height: 56px; border-radius: 11px; }
  .rl-url input { font-size: 16px; }
  .rl-ws-h small { display: none; }
  .rl-ws-sum { white-space: nowrap; }
  .rl-wc-x { margin-left: auto; }
  .rl-wc-cond { margin-left: 2px; }
  .rl-wc-cond button { padding: 0 9px; }
  .rl-cond-row { flex-direction: column; align-items: stretch; }
  .rl-sore { justify-content: space-between; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #151412; }
  .rl-date-row input { flex: 1; min-width: 0; }
  /* 폰: + 기록 (오른쪽 아래에 떠 있어요) */
  .rl-add { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40; min-height: 48px; padding: 0 20px; gap: 6px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
  .rl-add .rl-add-l { display: none; }
  .rl-add .rl-add-s { display: inline; }
  html.m-open .rl-add { display: none; }
  .rl-body { padding-bottom: 70px; }
  /* 폰: 운동 고르기 = 아래에서 올라오는 시트 */
  .rl-pick.is-sheet .rl-tile { min-height: 48px; }
}
@keyframes rlUp { from { transform: translateY(24px); opacity: 0; } }

/* ===== 일정 페이지 — 운영진: 바로 등록 · 고치기 (sched-edit.js) ===== */
.cal-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin: 0; padding: 0 10px; border: 1px dashed rgba(255,199,44,.5); border-radius: 10px; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.cal-add span { font-size: 16px; line-height: 1; }
.cal-add:hover, .cal-add:focus-visible { border-color: var(--y); background: rgba(255,199,44,.08); outline: none; }
.cw-add { margin-top: auto; opacity: 0; transition: opacity .2s ease; }   /* 웹 주간: 날짜 칸에 마우스를 올리면 */
@supports (grid-template-rows: subgrid) { .cw-add { grid-row: -2 / -1; align-self: end; } }
.cw-col:hover .cw-add, .cw-add:focus-visible { opacity: 1; }
.cw-col.is-ed { cursor: pointer; }
.cw-col.is-ed:hover { border-color: rgba(255,199,44,.45); }
.cw-col.is-ed .cw-card { cursor: pointer; }
@media (hover: none) { .cw-add { opacity: .7; } }
.pw-add, .cm-add { margin-top: 12px; min-height: 46px; font-size: 14px; }
.cm-add { max-width: 320px; }
.is-off { opacity: .45; }
.cw-card.is-off::after, .pw-card.is-off .pw-txt b::after { content: ' · 숨김'; font-size: 11px; font-weight: 400; }
.sp-edit { align-self: flex-start; margin-top: 14px; padding: 8px 14px; border: 1px solid rgba(5,5,5,.5); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sp-edit:hover, .sp-edit:focus-visible { background: rgba(5,5,5,.08); outline: none; }

.se-dlg { width: min(440px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255,199,44,.32); border-radius: 20px; background: #0B0A08; color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.se-dlg.is-full { width: min(820px, calc(100% - 24px)); }
.se-dlg::backdrop { background: rgba(0,0,0,.6); }
.se-form { padding: 22px 26px 24px; }
.se-bar { display: none; }
.se-head { display: flex; align-items: flex-start; gap: 10px; }
.se-head > div:first-child { flex: 1; min-width: 0; }
.se-kick { color: var(--y); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.se-head h2 { margin-top: 6px; color: var(--y); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.se-mode { flex: none; min-height: 32px; padding: 0 14px; border: 1px solid rgba(255,199,44,.45); border-radius: 999px; background: none; color: var(--y); font: inherit; font-size: 13px; cursor: pointer; }
.se-mode::after { content: ' ▸'; font-size: 10px; }
.se-mode[aria-pressed="true"]::after { content: ' ◂'; }
.se-mode:hover, .se-mode:focus-visible { background: rgba(255,199,44,.1); outline: none; }
.se-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--y); font-size: 18px; cursor: pointer; }
.se-body { margin-top: 6px; }
.se-more { display: none; }
.se-dlg.is-full .se-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }   /* 왼쪽 기본 | 오른쪽 안내 · 메모 → 찾아오는 길 */
.se-dlg.is-full .se-more { display: block; }
.se-f { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; min-width: 0; }
.se-f[hidden] { display: none; }
.se-l { font-size: 12px; color: #8F887C; }
.se-l em, .se-f em { font-style: normal; color: #5E594F; }
.se-f input:not([type="checkbox"]), .se-f textarea, .se-f select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(242,239,232,.16); border-radius: 11px; background: #0A0908; color: var(--ink); font: inherit; font-size: 14px; color-scheme: dark; }
.se-f textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.se-f textarea.is-one { min-height: 42px; height: 42px; }
.se-f input:focus, .se-f textarea:focus, .se-f select:focus { outline: none; border-color: var(--y); }
.se-f input::placeholder, .se-f textarea::placeholder { color: #4A463F; }
.se-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.se-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.se-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border: 1px solid rgba(242,239,232,.2); border-radius: 999px; background: none; color: #A39C90; font: inherit; font-size: 13px; cursor: pointer; }
.se-chips i { width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.se-chips button[aria-pressed="true"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 600; }
.se-chips button[aria-pressed="true"] i { background: #050505; border-color: #050505; }
.se-chips button:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.se-rep[hidden] { display: none; }
.se-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #151412; font-size: 13.5px; cursor: pointer; }
.se-sw input { position: absolute; opacity: 0; pointer-events: none; }
.se-sw-t { position: relative; flex: none; width: 40px; height: 22px; border-radius: 99px; background: #3A3833; transition: background .2s; }
.se-sw-t::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s, background .2s; }
.se-sw input:checked + .se-sw-t { background: var(--y); }
.se-sw input:checked + .se-sw-t::after { left: 21px; background: #050505; }
.se-sw input:focus-visible + .se-sw-t { outline: 2px solid var(--y); outline-offset: 2px; }
.se-rep-b[hidden] { display: none; }
.se-dows { display: flex; gap: 5px; margin-top: 10px; }
.se-dows button { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(242,239,232,.2); border-radius: 50%; background: none; color: #A39C90; font: inherit; font-size: 12.5px; cursor: pointer; }
.se-dows button[aria-pressed="true"] { border-color: var(--y); background: var(--y); color: #050505; font-weight: 600; }
.se-rep-prev { margin-top: 10px; font-size: 12.5px; color: var(--ink); }
.se-ser { margin-top: 14px; }
.se-repseg { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; padding: 3px; border: 1px solid rgba(242,239,232,.16); border-radius: 999px; }   /* 맨 위: 한 번 / 매주 반복 */
.se-repseg button { min-height: 38px; border: 0; border-radius: 999px; background: none; color: #A39C90; font: inherit; font-size: 13.5px; cursor: pointer; }
.se-repseg button[aria-pressed="true"] { background: var(--y); color: #050505; font-weight: 700; }
.se-repseg button:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.se-repseg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.se-ser .se-ser-h { margin-bottom: 0; padding: 11px 14px; border-radius: 12px; background: rgba(246,201,78,.08); }
.se-until[hidden] { display: none; }
.se-hr { height: 1px; margin-top: 20px; background: rgba(246,201,78,.55); }   /* 날짜 · 시간 ↔ 이름 사이 노란 선 */
.se-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }   /* 시간: 시작 ~ 끝 */
.se-tr > span { color: #8F887C; }
.se-tr input { min-width: 0; }
.se-f .se-tr input { padding-left: 9px; padding-right: 6px; font-size: 13.5px; }
.se-tr input::-webkit-calendar-picker-indicator { margin-left: 2px; }   /* 좁은 칸에서도 07:45 가 다 보이게 */
.se-when:has(> .se-times) { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }   /* 날짜 · 시간 줄: 시간 칸을 조금 넓게 */
.sp-end { font-size: .6em; letter-spacing: -.02em; opacity: .8; }   /* 안내 창: 19:45 – 21:30 */
.cw-end { font-size: .78em; opacity: .75; }
.se-delpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; }   /* 반복 일정 지우기: 이 일정만 · 이후 모두 · 반복 전체 */
.se-dp-t { width: 100%; font-size: 12.5px; color: #FF9B6A; }
.se-dp { min-height: 34px; padding: 0 12px; border: 1px solid rgba(242,239,232,.3); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.se-dp.is-warn { border-color: rgba(255,122,92,.6); color: #FF9B6A; }
.se-dp.is-y { border-color: var(--y); background: var(--y); color: #050505; font-weight: 600; }
.se-dp-t.is-info { color: var(--y); }
.se-dp.is-ghost { border-color: transparent; color: #8F887C; text-decoration: underline; text-underline-offset: 3px; }
.se-dp:hover { background: rgba(242,239,232,.06); }   /* 고칠 때: 반복 기간 */
.se-ser-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 13px; } .se-ser-h b { color: var(--y); font-weight: 600; }
.se-ser-i { font-size: 12.5px; color: #CFC8BC; }
.se-rep-prev.is-warn { color: #FF9B6A; }
.se-sect { margin-top: 14px; color: var(--y); font-size: 13px; font-weight: 600; }
.se-sect small { margin-left: 4px; color: #8F887C; font-weight: 400; }
.se-sect { padding-bottom: 6px; border-bottom: 1px solid rgba(255,199,44,.2); }
.se-place .se-sect { margin-top: 22px; }
.se-sect.is-first { margin-top: 14px; }
@media (max-width: 720px) { .se-sect.is-first { margin-top: 22px; } }
.se-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.se-ph { position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: #2A2723; }
.se-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-ph-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 10px; cursor: pointer; }
.se-ph.is-add { display: grid; place-items: center; padding: 0; border: 1px dashed rgba(255,199,44,.45); background: none; color: var(--y); font: inherit; font-size: 22px; cursor: pointer; }
.se-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; cursor: pointer; }
.se-check input { width: 18px; height: 18px; accent-color: var(--y); }
.se-vis .se-check { margin-top: 18px; }
.se-cpw { position: relative; flex: none; }   /* 지난 일정에서 가져오기 (상세일 때 창 오른쪽 위) */
.se-dlg:not(.is-full) .se-cpw { display: none; }
.se-cpw[hidden] { display: none; }
.se-cp { min-height: 32px; padding: 0 12px; border: 1px solid rgba(242,239,232,.22); border-radius: 999px; background: none; color: #CFC8BC; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.se-cp:hover, .se-cp:focus-visible, .se-cp[aria-expanded="true"] { border-color: var(--y); color: var(--y); outline: none; }
.se-cpm { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: 240px; max-height: 300px; overflow: auto; padding: 4px; border: 1px solid rgba(255,199,44,.35); border-radius: 12px; background: #141311; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.se-cpm[hidden] { display: none; }
.se-cpm button { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.se-cpm button:hover, .se-cpm button:focus-visible { background: rgba(246,201,78,.12); outline: none; }
.se-cpm b { flex: none; font-weight: 600; }
.se-cpm span { min-width: 0; overflow: hidden; color: #8F887C; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }   /* 이름 · 집결지 한 줄 */
@supports (-webkit-touch-callout: none) {   /* iOS: 날짜 · 시간 칸 기본 폭이 커서 겹치는 것 막기 */
  .se-f input[type="date"], .se-f input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 46px; text-align: left; }
  .se-f input[type="date"]::-webkit-date-and-time-value, .se-f input[type="time"]::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
}
@media (max-width: 720px) { .se-cp span { display: none; } .se-cpm { width: min(240px, calc(100vw - 32px)); } }
.se-msg { min-height: 0; margin-top: 12px; font-size: 13px; color: #FF9B6A; }
.se-msg:empty { display: none; }
.se-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.se-save { min-height: 48px; padding: 0 36px; border: 0; border-radius: 999px; background: var(--y); color: #050505; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.se-save:disabled, .se-bar-r:disabled { opacity: .5; cursor: default; }
.se-del { margin-right: auto; padding: 0; border: 0; background: none; color: #FF7A5C; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.se-del.is-armed { padding: 8px 14px; border-radius: 999px; background: #FF6B4A; color: #0A0805; text-decoration: none; }
@media (max-width: 720px) {                          /* 폰: 화면 전체 (R-Log 기록 창처럼 위 줄 취소 · 날짜 · 저장) */
  .se-dlg, .se-dlg.is-full { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .se-form { padding: 0 14px calc(28px + env(safe-area-inset-bottom)); }
  .se-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; height: 52px; margin: 0 -14px; padding: 0 14px; border-bottom: 1px solid rgba(242,239,232,.08); background: #0B0A08; }
  .se-bar b { text-align: center; font-size: 16px; font-weight: 600; }
  .se-bar button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
  .se-bar .se-bar-r { color: var(--y); font-weight: 600; text-align: right; }
  .se-head { margin-top: 14px; align-items: center; }
  .se-kick, .se-x, .se-save { display: none; }
  .se-head h2 { margin-top: 0; font-size: 18px; }
  .se-dlg.is-full .se-body { display: block; }
  .se-f input:not([type="checkbox"]), .se-f textarea, .se-f select { font-size: 16px; }
  .se-dlg { overflow-x: hidden; touch-action: pan-y; }   /* 폰: 옆으로 밀려 움직이지 않게 */
  .se-form { overflow-x: hidden; }
  .se-f input[type="date"], .se-f input[type="time"] { display: block; min-width: 0; max-width: 100%; }   /* 날짜 · 시간 칸이 옆 칸으로 넘치지 않게 */
  .se-when:has(> .se-times) { grid-template-columns: minmax(0, 1fr); }   /* 폰: 날짜 한 줄 · 시간 한 줄 */
  .se-del { width: 100%; min-height: 50px; margin: 0; border-radius: 14px; background: #151412; text-decoration: none; font-size: 15px; }
  .se-del.is-armed { background: #FF6B4A; }
}
/* 홈 화면 앱(아이폰) — 받은 파일을 공유 시트로 저장하는 버튼 */
.save-sheet { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 120; display: flex; align-items: center; gap: 10px; width: min(440px, calc(100% - 32px)); padding: 10px 10px 10px 16px; border-radius: 16px; background: rgba(18,17,15,.96); box-shadow: 0 10px 34px rgba(0,0,0,.55); color: #F2EFE8; font-size: 13px; line-height: 1.45; transform: translateX(-50%); }
.save-sheet[hidden] { display: none; }
.save-sheet span { flex: 1; min-width: 0; }
.save-sheet .ss-go { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--y); color: #050505; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.save-sheet .ss-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #8F887C; font: inherit; font-size: 15px; cursor: pointer; }