/* 김조교 르네상스 — 진우 10년 책표지에서 뽑은 색만 쓴다.
   #050607 배경 / #3f7a4a 남산초록(주 액션, 진우 09-05 지정값) / #0c9ba8 한강 청록(링크) / #ffffff 표지 제목 */
:root {
  --bg: #050607;
  --card: #141414;
  --border: rgba(255,255,255,0.08);
  --text: #f2f2f2;
  --muted: #8a8a8a;
  --accent: #3f7a4a;   /* 남산초록 — 진우 지정(2026-09-05). 이전 자체추출값 #159759 폐기 */
  --accent-rgb: 63,122,74;
  --river: #0c9ba8;    /* 한강 청록 실측색 — 링크·이동 */
  --amber: #f59e0b;    /* 기능색(대기 상태) — 브랜드색 아님, 유지 */
  --red: #ef4444;      /* 기능색(에러) — 브랜드색 아님, 유지 */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}
.brandbar { display: flex; align-items: center; gap: 9px; }
.brandbar img { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; }
.brandbar .word { font-weight: 900; font-size: 15px; letter-spacing: -.01em; }
h1 { font-size: 20px; font-weight: 900; margin: 0 0 4px; }
.muted { color: var(--muted); font-size: 12px; }
.card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
}
.week-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
}
.badge.submitted { color: var(--amber); border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.badge.reviewed { color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.08); }
button {
  font-family: inherit;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
button.primary { background: var(--accent); color: #04140d; width: 100%; }
button.primary:disabled { opacity: 0.4; }
button.ghost { background: rgba(255,255,255,0.06); color: var(--text); }
a.ghost {
  font-family: inherit;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}
.top-row-actions { display: flex; align-items: center; gap: 8px; }
button.tab { background: rgba(255,255,255,0.06); color: var(--text); white-space: nowrap; }
button.tab.active { background: var(--accent); color: #04140d; }
input, textarea, select {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.identity-select { color: var(--muted, #9a9a9a); }
.identity-select:focus { outline: none; border-color: rgba(var(--accent-rgb),.75); }
.thumb {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 8px 0;
  background: #000;
}
.feedback-box {
  margin-top: 10px;
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  background: rgba(var(--accent-rgb),0.06);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  white-space: pre-line;
}
.err { color: var(--red); font-size: 13px; margin: 8px 0; }
.top-row { display: flex; justify-content: space-between; align-items: center; }
a { color: var(--river); }
.admin-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.admin-row:first-child { border-top: none; }
.admin-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.attend-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 16px; padding: 14px 16px; margin: 14px 0 18px;
}
.attend-banner .attend-label { font-weight: 700; font-size: 14px; color: var(--amber); }
.attend-banner button.primary { width: auto; padding: 10px 18px; }
.attend-banner.done {
  background: rgba(var(--accent-rgb),0.08); border-color: rgba(var(--accent-rgb),0.3);
  color: var(--accent); font-weight: 700; font-size: 14px; justify-content: flex-start;
}
.attend-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.attend-chip {
  background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.attend-chip b { font-weight: 700; opacity: .85; margin-left: 4px; }

/* ── 스플래시(앱 실행 시 표지 그대로) ── */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg) url("assets/cover.jpg") center / cover no-repeat;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 1; transition: opacity .5s ease;
}
#splash::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,7,.55), transparent 40%);
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash .splash-label {
  position: relative; z-index: 1; color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; padding-bottom: 28px; opacity: .85;
}

/* ── 로그인 화면 배경(표지 파노라마) ── */
body.login-bg {
  max-width: none; padding: 0; min-height: 100vh;
  background: var(--bg) url("assets/panorama.jpg") center 30% / cover no-repeat;
  position: relative;
}
body.login-bg::before {
  content: ""; position: fixed; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,7,.55) 0%, rgba(5,6,7,.75) 55%, rgba(5,6,7,.94) 100%);
  z-index: 0;
}
body.login-bg .login-wrap {
  position: relative; z-index: 1; max-width: 480px; margin: 0 auto;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 20px;
}

/* ── 등급 진행바 (표시 전용 — 잠금 없음) ── */
.tier-bar { margin: 14px 0; }
.tier-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tier-badge {
  background: var(--river); color: #04211f; font-weight: 800; font-size: 11px;
  padding: 3px 10px; border-radius: 999px;
}
.tier-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.tier-fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* ── 브랜드 푸터 (김조교 르네상스 — 모든 화면 필수) ── */
.rn-foot {
  text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .04em;
  padding: 26px 0 10px; opacity: .7;
}


/* ── 애플식 히어로 : 표지 파노라마가 아주 느리게 흐른다 ── */
.hero-video{
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; background:#050607;
}
.hero-scrim{
  position:fixed; inset:0; z-index:-1;
  /* 애플식 — 배경이 «보이면서» 글자가 읽혀야 한다.
     가운데는 거의 걷고, 글자가 얹히는 띠에만 어둠을 준다. */
  background:
    linear-gradient(180deg,
      rgba(5,6,7,.72) 0%,
      rgba(5,6,7,.22) 14%,
      rgba(5,6,7,.06) 34%,
      rgba(5,6,7,.06) 52%,
      rgba(5,6,7,.55) 74%,
      rgba(5,6,7,.90) 100%);
}
@media (prefers-reduced-motion:reduce){ .hero-video{display:none} }

/* 브랜드 초록 — 표지 남산 색. 형광 초록이 아니다. */
:root{ --namsan:#3f7a4a; --namsan-hi:#4e9159; }
.primary{ background:var(--namsan) !important; color:#fff !important; }
.primary:hover{ background:var(--namsan-hi) !important; }
.ghost-link{
  color:rgba(196,197,194,.9); text-decoration:none; font-size:.94rem;
  border-bottom:1px solid rgba(196,197,194,.35); padding-bottom:2px;
}
.ghost-link:hover{ color:#fff; border-color:#fff }


/* 배경을 덮는 대신 글자에 그림자를 준다 */
.login-wrap h1{ text-shadow:0 2px 20px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9) }
.login-wrap .muted{ text-shadow:0 1px 12px rgba(0,0,0,.9) }
.login-wrap .card{
  background:rgba(10,12,14,.62) !important;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(196,197,194,.14) !important;
}
.rn-foot, .ghost-link{ text-shadow:0 1px 10px rgba(0,0,0,.9) }

/* ── 이번주/다음주 (로그인 없이 첫 화면) — 진우 09-05: "20년이 중요하지 않다, 이번 주가 중요하다" ── */
.week-hero {
  background: linear-gradient(180deg, rgba(63,122,74,.14), rgba(63,122,74,.03));
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 20px; padding: 20px; margin: 16px 0;
}
.week-hero-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 6px;
}
.week-hero-title { font-size: 19px; font-weight: 900; line-height: 1.35; margin-bottom: 12px; }
.week-next {
  border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin: 10px 0 18px;
}
.week-next-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.week-next-title { font-size: 14px; font-weight: 700; color: var(--text); opacity: .85; }
.mini-cards { display: flex; flex-direction: column; gap: 8px; }
.mini-card {
  display: block; background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.mini-card:hover { border-color: var(--accent); }
.section-label {
  font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em;
  margin: 22px 0 4px; text-transform: uppercase;
}


/* ── 영상 히어로가 배경을 맡는다. .login-bg 의 정지 이미지는 끈다 ── */
body.login-bg{
  background-image:none !important;
  background-color:#050607 !important;
}
/* 영상 자체를 밝힌다 — 재인코딩 없이 즉시 반영된다.
   진우 판정: "뭔가 보이지도 않고 그래" — 애플식은 배경이 «보이면서» 글자가 읽힌다. */
.hero-video{
  filter:brightness(1.55) saturate(1.25) contrast(1.05);
}
/* 덮개는 글자가 앉는 자리에만. 가운데는 걷는다. */
.hero-scrim{
  background:
    linear-gradient(180deg,
      rgba(5,6,7,.55) 0%,
      rgba(5,6,7,.10) 16%,
      rgba(5,6,7,0)   36%,
      rgba(5,6,7,0)   50%,
      rgba(5,6,7,.42) 72%,
      rgba(5,6,7,.86) 100%) !important;
}


/* 이중 덮개 제거 — body.login-bg::before(z-index:0)가 화면을 55~94% 검정으로 덮고 있었다.
   영상 히어로(.hero-video z:-2) + .hero-scrim(z:-1) 두 겹이면 충분하다. */
body.login-bg::before{ display:none !important; }


/* ── 글자가 앉는 자리에만 판을 깐다. 배경 전체를 덮지 않는다(애플식) ── */
.login-wrap > div:first-child{
  position:relative; padding:26px 18px 22px; border-radius:22px;
  background:radial-gradient(115% 92% at 50% 46%,
    rgba(5,6,7,.80) 0%, rgba(5,6,7,.62) 52%, rgba(5,6,7,0) 100%);
}
.login-wrap h1{
  color:#fff; letter-spacing:-.02em;
  text-shadow:0 2px 26px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,1);
}
.login-wrap .muted{
  color:rgba(238,240,236,.92) !important;
  text-shadow:0 1px 16px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,.9);
}
.ghost-link{
  color:#fff !important; border-color:rgba(255,255,255,.5) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.95);
}
.rn-foot{
  color:rgba(238,240,236,.72) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.95);
}
/* 입력 카드는 이미 유리판이다. 조금 더 또렷하게. */
.login-wrap .card{
  background:rgba(8,10,12,.66) !important;
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9);
}
/* 영상은 살짝만 눌러 대비를 만든다 */
.hero-video{ filter:brightness(1.30) saturate(1.22) contrast(1.06); }

.login-tag{
  margin:2px 0 22px; font-size:.82rem; letter-spacing:.14em;
  color:rgba(196,197,194,.72); font-family:"IBM Plex Mono",ui-monospace,monospace;
  text-shadow:0 1px 14px rgba(0,0,0,.95);
}


/* 가입 폼 */
.fineprint{
  margin:12px 0 0; font-size:.78rem; line-height:1.55;
  color:rgba(196,197,194,.62); text-align:center;
}
.switch-link{
  color:rgba(196,197,194,.82); font-size:.86rem; text-decoration:none;
  border-bottom:1px solid rgba(196,197,194,.28); padding-bottom:2px;
}
.switch-link:hover{ color:#fff; border-color:rgba(255,255,255,.6) }
.err{ color:#e08a72; font-size:.86rem; text-align:center; margin-top:10px; min-height:1.2em }


/* ── 시작하기 화면 ── */
.login-head{
  position:relative; text-align:center; padding:24px 18px 20px; border-radius:24px;
  background:radial-gradient(115% 92% at 50% 46%,
    rgba(5,6,7,.82) 0%, rgba(5,6,7,.60) 54%, rgba(5,6,7,0) 100%);
}
.login-char{ width:92px; height:auto; margin-bottom:8px;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.7)) }
.login-head h1{ margin:0 0 2px; color:#fff; font-size:1.62rem; letter-spacing:-.02em;
  text-shadow:0 2px 26px rgba(0,0,0,.95) }
.login-tag{ margin:0 0 10px; font-size:.72rem; letter-spacing:.18em;
  color:rgba(196,197,194,.66); font-family:"IBM Plex Mono",ui-monospace,monospace }
.login-head .muted{ margin:0; color:rgba(238,240,236,.9) !important; line-height:1.6;
  text-shadow:0 1px 16px rgba(0,0,0,1) }
.gap{ height:10px }
.switch-row{ text-align:center; margin:14px 0 0 }
.ghost-row{ text-align:center; margin:18px 0 0 }


/* ── 받은 사람만 여는 문 ── */
.secret-link{
  display:inline-flex; align-items:center; gap:7px;
  color:rgba(196,197,194,.68); font-size:.86rem; text-decoration:none;
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(196,197,194,.16);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.secret-link:hover{ color:#fff; border-color:rgba(111,180,124,.55); background:rgba(63,122,74,.12) }
.secret-link .key{ font-size:.8rem; opacity:.7 }

.code-slot{ animation:slotIn .28s cubic-bezier(.22,.9,.3,1) both }
@keyframes slotIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
#joinCode{
  text-align:center; letter-spacing:.42em; font-size:1.16rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  border-color:rgba(111,180,124,.35) !important;
}
#joinCode:focus{ border-color:rgba(111,180,124,.75) !important; outline:none }
.code-state{
  margin:8px 0 0; text-align:center; font-size:.78rem;
  color:rgba(196,197,194,.55); transition:color .2s ease;
}
.code-state.on{ color:#6fb47c }

/* 번호가 채워지면 카드가 «열린» 느낌을 준다 */
.card.unlocked{
  border-color:rgba(111,180,124,.42) !important;
  box-shadow:0 0 0 1px rgba(111,180,124,.16), 0 18px 54px -18px rgba(63,122,74,.5),
             0 18px 50px -18px rgba(0,0,0,.9) !important;
}
@media (prefers-reduced-motion:reduce){ .code-slot{animation:none} }


/* ── 가입 전에 «방대함»부터 보여준다 ── */
.peek{ margin:22px 0 0 }
.peek-frame{
  position:relative; display:block; height:190px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(196,197,194,.16); background:#050607; text-decoration:none;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
}
.peek-frame iframe{
  width:200%; height:380px; border:0; transform:scale(.5); transform-origin:0 0;
  pointer-events:none; filter:saturate(1.1);
}
.peek-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,6,7,.10) 0%, rgba(5,6,7,.20) 55%, rgba(5,6,7,.86) 100%);
}
.peek-cta{
  position:absolute; left:0; right:0; bottom:12px; text-align:center;
  color:#fff; font-size:.9rem; font-weight:600; letter-spacing:-.01em;
  text-shadow:0 1px 14px rgba(0,0,0,.95);
}
.peek-frame:hover{ border-color:rgba(111,180,124,.5) }
.peek-nums{
  display:flex; justify-content:center; gap:20px; margin:12px 0 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.peek-nums span{ text-align:center; color:rgba(196,197,194,.62); font-size:.68rem }
.peek-nums b{ color:#fff; font-size:1.12rem; font-variant-numeric:tabular-nums }
.peek-nums i{ display:block; font-style:normal; margin-top:2px; letter-spacing:.04em }
.peek-note{
  margin:10px 0 0; text-align:center; font-size:.78rem; color:rgba(196,197,194,.55);
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}