/* tone.css — 캐슬런 화면 전체의 톤 한 벌 (2026-09-29, 새 첫 화면·지도 타일 기준)

   index.html 의 화면별 규칙 뒤에 읽혀 같은 자리를 덮는다. 새 화면을 만들 때도 여기 토큰만 쓴다.
     색   남색 판(--panel) · 금빛 가는 테(--line-gold) · 금 버튼(--gold 계열)
     여백 4의 배수(--s1 4 … --s8 64). 화면 가장자리에 붙는 것은 전부 --edge(16px)
     글꼴 한글 Pretendard, 영문 머릿글만 Cinzel(판타지 세리프)
   여백 정렬 규칙(대표님: 제일 중요)
     - 위 줄(뒤로 · 지도 고르기 · 가운데로 · 소리) = 윗선 16px, 높이 44px 로 한 줄
     - 왼쪽 위 버튼 아래 상자(#top) = 16 + 44 + 8
     - 아래 줄(범례 · 칸 설명) = 아랫선 16px */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --edge:16px; --bar:44px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --ink:#eef4ff; --dim:#9fb2cc;
  --gold:#ffd479; --gold2:#ffb63c; --gold-deep:#a8741f;
  --navy0:#050b17; --navy1:#0b1628; --navy2:#12233d;
  --panel:linear-gradient(180deg, rgba(20,36,62,.9), rgba(9,17,32,.94));
  --panel-soft:rgba(9,18,34,.74);
  --line:rgba(255,255,255,.12);
  --line-gold:rgba(255,212,121,.30);
  --shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --font-display:"Cinzel","Times New Roman",serif;
}

/* ───────── 공통 부품 ───────── */
body{color:var(--ink)}
button{font-weight:700; color:#1d1405; border-radius:var(--r-md);
  background:linear-gradient(180deg,#ffe6a6 0%,#ffcd5c 48%,#f2a93a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(140,86,12,.45), 0 6px 16px rgba(255,170,50,.22)}
button:hover{filter:brightness(1.05) saturate(1.05)}
button.ghost{color:var(--ink); background:var(--panel-soft); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
button.ghost:hover{background:rgba(24,42,70,.86); border-color:var(--line-gold)}
button.ghost:active{border-color:var(--gold)}

/* 영문 머릿글 — TEACHER · STUDENT · MY ROBOT … */
.brand .sub,.lkHead .sub,.card.role small{font-family:var(--font-display); font-weight:700;
  letter-spacing:.32em; font-size:13px; line-height:16px; color:var(--gold)}

/* 판(폼 · 목록 줄 · 오른쪽 패널 · 지도 상자) — 남색 판 + 금빛 가는 테 */
.form,.lkSide,#top,#tip,#legend,#viewBar,.stat{background:var(--panel); border:1px solid var(--line-gold);
  box-shadow:var(--shadow)}
.form{border-radius:var(--r-xl); padding:var(--s5); gap:var(--s3)}
.form input,.form select,.form textarea{border-radius:var(--r-md); background:rgba(3,8,18,.62);
  border-color:rgba(255,255,255,.16)}
.row{border-radius:var(--r-lg); padding:var(--s4) var(--s5); gap:var(--s4);
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.row:hover{border-color:var(--gold); background:linear-gradient(180deg, rgba(30,52,86,.92), rgba(14,26,46,.95))}
.rows{gap:var(--s3)}
.lkSide{border-radius:var(--r-xl)}
button.lkCard{border-radius:var(--r-lg); border-color:rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(26,46,76,.82), rgba(10,20,36,.9))}
@media (hover:hover){ button.lkCard:hover{border-color:var(--line-gold)} }
button.lkCard.on{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,212,121,.2), 0 0 24px rgba(255,190,80,.25)}

/* 메뉴 화면 배경 — 첫 화면과 같은 하늘 성을 짙은 남색으로 눌러 깐다 */
#s-login-t,#s-login-s,#s-teacher2,#s-student2,#s-classes,#s-newclass,#s-coopcode{background-image:
  linear-gradient(180deg, rgba(5,11,23,.78) 0%, rgba(5,11,23,.66) 38%, rgba(4,9,19,.9) 100%),
  url(assets/art/bg_title.jpg)}
#s-look{background:linear-gradient(180deg, rgba(5,11,23,.9), rgba(4,9,19,.95)), url(assets/art/bg_title.jpg) center/cover}
.menu{padding:var(--s6); gap:var(--s6)}
.brand h1{letter-spacing:-.01em}
.brand p{margin-top:var(--s2)}

/* ───────── 가장자리 정렬 ───────── */
.back{left:var(--edge); top:var(--edge)}
.acct,.topright{top:var(--edge); right:calc(var(--edge) + var(--bar) + var(--s2))}
.back,.acct,.topright > button,#fitBtn{min-height:var(--bar); height:var(--bar); padding-top:0; padding-bottom:0}
#sndDock .snd-btn{width:var(--bar); height:var(--bar); border-radius:var(--r-md);
  background:var(--panel-soft); border-color:var(--line)}
#sndDock .snd-pop{top:calc(var(--bar) + var(--s2))}

/* 지도 HUD */
#top{left:var(--edge); top:calc(var(--edge) + var(--bar) + var(--s2)); padding:var(--s3) var(--s4); border-radius:var(--r-lg)}
#legend{left:var(--edge); bottom:var(--edge); border-radius:var(--r-md); padding:var(--s2) var(--s3)}
#tip{bottom:var(--edge); border-radius:var(--r-lg); padding:var(--s3) var(--s4)}
#viewBar{top:var(--edge); height:var(--bar); padding:3px; gap:var(--s1); border-radius:var(--r-md)}
#viewBar .vseg{padding:0; border-radius:10px}
#viewBar .vseg button,#viewBar select{min-height:36px; height:36px}
#viewBar .vseg button{border-radius:10px}
#viewBar select{background:rgba(3,8,18,.62)}
.region{background:rgba(7,15,30,.84); box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08)}

/* 기록 · 학생 관리 판 */
.panel{padding:calc(var(--edge) + var(--bar) + var(--s5)) var(--s5) var(--s7);
  background:linear-gradient(180deg, rgba(5,11,23,.9), rgba(4,9,19,.96)), url(assets/art/bg_title.jpg) center/cover fixed}
.panel h2{margin-bottom:var(--s4)}
.stat{border-radius:var(--r-lg); padding:var(--s4)}

/* ───────── 첫 화면 ───────── */
#s-role{background:none; justify-content:safe flex-end; gap:0; padding:var(--s6) var(--s6) var(--s7)}
.rolebg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:#0a1426}
.rolebg i{position:absolute; inset:0; display:block; pointer-events:none}
.rolebg .img{inset:-3%; background:url(assets/art/bg_title.jpg) 60% 40%/cover no-repeat;
  animation:kb 48s ease-in-out infinite alternate; will-change:transform}
/* 빛줄기 — 오른쪽 위 구름 틈에서 비스듬히. 천천히 숨 쉬듯 밝아졌다 흐려진다 */
.rolebg .rays{mix-blend-mode:screen; opacity:.4;
  background:repeating-conic-gradient(from 198deg at 72% -8%, rgba(255,214,140,0) 0deg, rgba(255,214,140,.1) 3deg,
    rgba(255,214,140,0) 7deg, rgba(255,214,140,0) 13deg);
  -webkit-mask:radial-gradient(90% 80% at 72% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask:radial-gradient(90% 80% at 72% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
  animation:rays 11s ease-in-out infinite; transform-origin:72% 0%}
/* 발밑 구름바다 안개 — 옆으로 아주 느리게 흐른다 */
.rolebg .mist{top:auto; height:46%; opacity:.55; mix-blend-mode:screen;
  background:
    radial-gradient(40% 60% at 20% 80%, rgba(210,225,255,.22), transparent 70%),
    radial-gradient(45% 55% at 70% 90%, rgba(255,226,180,.18), transparent 70%),
    radial-gradient(30% 50% at 110% 70%, rgba(210,225,255,.2), transparent 70%);
  background-size:140% 100%; animation:mist 38s linear infinite alternate}
/* 반짝이는 빛 알갱이 */
.rolebg .motes{opacity:.9;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,236,180,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 44% 30%, rgba(255,226,160,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 83% 34%, rgba(255,236,180,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 12%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(2px 2px at 6% 44%, rgba(255,226,160,.7), transparent 60%);
  animation:twinkle 5.5s ease-in-out infinite}
/* 카드 뒤를 받치는 아래쪽 그늘 + 로고 뒤 은은한 후광 */
.rolebg .shade{background:
  radial-gradient(38% 30% at 50% 17%, rgba(5,10,24,.42), transparent 70%),
  linear-gradient(180deg, rgba(5,11,23,.05) 0%, rgba(5,11,23,0) 38%, rgba(5,11,23,.55) 70%, rgba(4,8,18,.9) 100%)}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}}
@keyframes rays{0%,100%{opacity:.22; transform:rotate(-1.2deg)}50%{opacity:.48; transform:rotate(1.2deg)}}
@keyframes mist{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .rolebg i{animation:none!important} }

#s-role .logo{width:min(600px,78vw); margin:min(6vh,48px) 0 auto;
  filter:drop-shadow(0 0 28px rgba(255,200,90,.35)) drop-shadow(0 10px 22px rgba(0,0,0,.6))}
/* "누구로 들어갈까요?" — 양옆 금빛 가는 줄 */
#s-role .pick{display:flex; align-items:center; gap:var(--s4); margin:0 0 var(--s7); padding:0; background:none;
  font-size:15px; font-weight:700; letter-spacing:.02em; color:#fff3d6; opacity:1; text-shadow:0 2px 10px rgba(0,0,0,.9)}
#s-role .pick::before,#s-role .pick::after{content:""; width:clamp(40px,10vw,120px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold))}
#s-role .pick::after{background:linear-gradient(90deg, var(--gold), transparent)}
#s-role .cards{gap:var(--s5)}
.rolelink{margin-top:var(--s5); font-size:13px; color:#d8e4f5; opacity:.82; text-decoration:underline; text-underline-offset:3px}

/* 역할 카드 — 금테 판 + 둥근 엠블럼 + 입장하기. 두꺼운 테두리는 border 가 아니라 안쪽 두 겹 그림자로 */
.card.role{position:relative; width:min(320px,42vw); overflow:visible; border-radius:var(--r-xl); padding:0 0 var(--s5);
  background:linear-gradient(180deg, rgba(22,40,70,.9), rgba(8,16,32,.95));
  border:1px solid rgba(255,212,121,.55);
  box-shadow:inset 0 0 0 1px rgba(8,16,32,.9), inset 0 0 0 4px rgba(255,212,121,.14), inset 0 1px 0 5px rgba(255,255,255,.04),
             0 18px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s, border-color .25s}
/* 위 가운데 금 장식 마름모 */
.card.role::before{content:""; position:absolute; left:50%; top:-7px; width:12px; height:12px; transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff0c2,#e0a33c); box-shadow:0 0 10px rgba(255,200,90,.7); border:1px solid #7a5316}
/* 지나가는 빛 — 올리면 금빛이 한 번 쓸고 간다 */
.card.role::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,236,190,.22) 45%, transparent 60%) -120% 0/250% 100% no-repeat;
  transition:opacity .2s}
.card.role:hover,.card.role:focus-visible{transform:translateY(-6px); border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(8,16,32,.9), inset 0 0 0 4px rgba(255,212,121,.24),
             0 0 0 1px rgba(255,212,121,.35), 0 0 36px rgba(255,190,80,.35), 0 22px 50px rgba(0,0,0,.55)}
.card.role:hover::after{opacity:1; animation:sweep .9s ease-out 1}
@keyframes sweep{from{background-position:-120% 0}to{background-position:220% 0}}
.card.role:active{transform:translateY(-2px) scale(.99)}
.card.role .art{height:auto; margin:calc(-1 * var(--s6)) auto 0; width:132px; height:132px; border-radius:50%;
  display:grid; place-items:end center; overflow:hidden; position:relative;
  background:radial-gradient(70% 70% at 50% 35%, #2d5286, #0e1d36 75%);
  box-shadow:0 0 0 3px #0a1426, 0 0 0 5px #d9a441, 0 0 0 6px rgba(255,236,190,.6), 0 10px 24px rgba(0,0,0,.55)}
.card.role .art img{width:100%; height:100%; object-fit:cover; object-position:50% 6%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.card.role .body{border-top:0; padding:var(--s4) var(--s5) var(--s3)}
.card.role small{display:block; font-size:12px; letter-spacing:.36em; opacity:.95}
.card.role h2{font-size:24px; font-weight:800; margin-top:var(--s1); letter-spacing:-.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.card.role .body p{font-size:13px; opacity:.8; margin-top:var(--s1)}
.card.role .go{display:inline-flex; align-items:center; gap:var(--s2); height:36px; padding:0 var(--s5); border-radius:999px;
  font-size:14px; font-weight:800; color:#1d1405;
  background:linear-gradient(180deg,#ffe6a6 0%,#ffcd5c 48%,#f2a93a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(140,86,12,.45), 0 6px 16px rgba(255,170,50,.25)}
.card.role .go::after{content:"›"; font-size:18px; line-height:1; margin-top:-2px}
@media (max-width:700px){
  #s-role{padding:var(--s5) var(--s4) var(--s6)}
  .rolebg .img{background-position:74% 40%}
  #s-role .cards{gap:var(--s3); flex-wrap:nowrap}
  .card.role{width:calc(50vw - 22px); padding-bottom:var(--s4)}
  .card.role .art{width:96px; height:96px; margin-top:calc(-1 * var(--s5))}
  .card.role .body{padding:var(--s3) var(--s3) var(--s2)}
  .card.role h2{font-size:20px}
  .card.role .body p{font-size:12px; word-break:keep-all}
  .card.role .go{height:32px; padding:0 var(--s4); font-size:13px}
}
@media (max-height:640px) and (min-width:701px){
  .card.role .art{width:104px; height:104px}
  #s-role .logo{width:min(460px,60vw)}
}

/* 지도 — 좁은 화면: 위 버튼 줄(16~60) 아래에 지도 고르기(68~152, 두 줄 고정), 그 아래 8px 띄워 정복 현황 */
@media (max-width:900px){
  #viewBar{top:calc(var(--edge) + var(--bar) + var(--s2)); left:var(--edge); right:var(--edge); transform:none;
    max-width:none; height:auto; flex-wrap:wrap; justify-content:center; row-gap:var(--s1)}
  #viewBar .vseg{flex:1 0 100%; justify-content:center}
  #viewBar .vseg button{flex:1}
  #top{top:calc(var(--edge) + var(--bar) + var(--s2) + 84px + var(--s2))}
}

/* 교사 메뉴 아코디언 — 접혀 있어도 안쪽 윗여백(12px)이 남아 줄 간격이 들쭉날쭉했다(12 · 12 · 24).
   여백은 그대로 두고(접힌 칸 안 버튼도 눌리는 자리가 남아야 한다 — test_world #goClass) 접혔을 때만 그만큼 당긴다 */
.acc .sec > .body > .inner{padding-top:var(--s3); gap:var(--s3)}
.acc .sec:not(.open) > .body{margin-bottom:calc(-1 * var(--s3))}

/* 좁은 화면에서 본문 폭 = 화면 - 좌우 16(가장자리 버튼과 같은 선). 92vw 는 15.6px 같은 소수 여백을 냈다 */
.rows{width:min(460px, calc(100vw - 2 * var(--edge)))}
.form{width:min(420px, calc(100vw - 2 * var(--edge)))}
@media (max-width:700px){ .menu{padding-left:var(--edge); padding-right:var(--edge)} }