/* Echo_Web — 디자인 (v2.2 모던 개편)
 * 밝은 회백 바탕 · 흰 카드 · 부드러운 그림자 · Pretendard. 저시력 학생을 위해 글씨는 크게, 선택은 노랑 채움+확대로 구별.
 * 큐브 연결·다시하기(노랑)·메뉴로 나가기(파랑)는 테두리 없는 볼록 버튼 (v2.1 대표 지정 유지).
 */
/* 글꼴은 사이트 안에 담아 둔다 (학교 망에서 외부 글꼴이 막혀도 같은 모양) — Pretendard, SIL OFL */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url(../fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url(../fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url(../fonts/Pretendard-Bold.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:800;font-display:swap;src:url(../fonts/Pretendard-ExtraBold.woff2) format("woff2")}
:root{
  --bg:#f4f5f9; --card:#ffffff; --fg:#0f172a; --dim:#5b6478; --line:#e3e6ee;
  --yel:#ffc800; --yel-2:#ffd84d; --yel-edge:#d9a400; --yel-ink:#1a1400;
  --blue:#2563eb; --blue-2:#3b82f6; --blue-edge:#1d4ed8; --blue-ink:#ffffff;
  --shadow-s:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05);
  --shadow-m:0 2px 4px rgba(15,23,42,.05),0 12px 32px rgba(15,23,42,.10);
  --r:24px;
  --acc:#4f46e5; --acc-soft:#eef2ff;  /* 아이콘 — cube.roborisen.com 큐브랩과 같은 인디고 하나로 통일 (v2.3) */
  --font:"Pretendard","Pretendard Variable","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* .screen{display:flex} 가 hidden 을 이기지 않게 */
html,body{margin:0;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:20px 24px 28px;
     background:radial-gradient(1200px 600px at 85% -10%,#fff4cc 0%,rgba(255,244,204,0) 60%),
                radial-gradient(900px 500px at -10% 110%,#e6edff 0%,rgba(230,237,255,0) 60%),var(--bg);
     background-attachment:fixed}
button{font:inherit;color:inherit}

/* 머리띠 */
.top{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto 12px}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,var(--yel-2),var(--yel));
      box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 2px 6px rgba(217,164,0,.35);position:relative}
.mark::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff;opacity:.9}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em}
.sub{font-size:14px;font-weight:600;color:var(--dim);padding-left:10px;border-left:1px solid var(--line)}
/* 큐브 배터리 (v3.2) — 머리띠 오른쪽, 버전 옆에 작게 */
.topr{display:flex;align-items:center;gap:8px}
.batt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--dim);background:var(--card);
      border-radius:999px;padding:5px 10px;box-shadow:var(--shadow-s);font-variant-numeric:tabular-nums}
.bbody{position:relative;width:22px;height:11px;border:1.5px solid currentColor;border-radius:3px;box-sizing:border-box}
.bbody::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;border-radius:0 1px 1px 0;background:currentColor}
.bfill{position:absolute;left:1px;top:1px;bottom:1px;max-width:calc(100% - 2px);border-radius:1px;background:#16a34a}
.batt.low{color:#dc2626}
.batt.low .bfill{background:#dc2626}
.ver{font-size:12px;font-weight:600;color:var(--dim);background:var(--card);border-radius:999px;padding:5px 10px;box-shadow:var(--shadow-s)}

main{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.screen{display:flex;flex-direction:column;gap:20px}
h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0;text-wrap:balance}

/* 볼록 버튼 공통 */
.big,.sq{border:0;outline:none;cursor:pointer;font-weight:800;letter-spacing:-.02em;
     background-image:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.06) 100%);
     box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 7px 0 var(--edge),0 18px 30px -8px rgba(15,23,42,.28);
     transition:transform .09s ease,box-shadow .09s ease,filter .15s ease}
.big:hover,.sq:hover{filter:brightness(1.04)}
.big:focus-visible,.sq:focus-visible{filter:brightness(1.05);
     box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 7px 0 var(--edge),0 0 0 8px var(--halo),0 18px 34px -8px rgba(15,23,42,.32)}
.big:active,.sq:active{transform:translateY(5px);
     box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 var(--edge),0 6px 12px -4px rgba(15,23,42,.25)}

/* 첫 화면 */
.hero{align-items:center;text-align:center;padding-top:7vh;gap:18px}
.eyebrow{margin:0;font-size:15px;font-weight:700;color:#8a6500;background:#fff3c4;border-radius:999px;padding:7px 14px}
.big{background-color:var(--yel);color:var(--yel-ink);--edge:var(--yel-edge);--halo:rgba(255,200,0,.32)}
.big.square{width:min(260px,64vw);aspect-ratio:1/1;border-radius:36px;margin-top:18px;
     display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:clamp(28px,3.8vw,38px)}
.cico{width:34%;height:auto;opacity:.85}
.state{font-size:22px;color:var(--dim);min-height:1.4em;margin:6px 0 0}
.howto{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:4px 0 0}
.howto li{background:var(--card);border-radius:999px;padding:9px 16px;font-size:16px;color:var(--dim);box-shadow:var(--shadow-s)}
.howto b{color:var(--fg);margin-right:4px}

/* 메뉴: 4 × 4 카드 — 큐브랩처럼 왼쪽 아이콘 · 오른쪽 이름 (v2.3) */
#menu{--menu-cols:4;display:grid;grid-template-columns:repeat(var(--menu-cols),minmax(0,1fr));gap:16px;padding-top:6px}
@media (max-width:860px){#menu{--menu-cols:2}}
.mitem{display:flex;flex-direction:row;align-items:center;gap:16px;min-height:112px;
       padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-s);
       cursor:pointer;text-align:left;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.mico{width:56px;height:56px;flex:none;border-radius:16px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;transition:.15s}
.mico .ico{width:28px;height:28px}
.mname{font-size:clamp(20px,2.1vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.2;word-break:keep-all}
.mtag{font-size:13px;color:var(--dim)}
.mitem:hover{box-shadow:var(--shadow-m);border-color:#c7cbf5}
.mitem:hover .mico{background:var(--acc);color:#fff}
.mitem.soon{opacity:.5}
.mitem.focus{background:var(--yel);border-color:var(--yel);color:var(--yel-ink);transform:translateY(-4px) scale(1.04);
       box-shadow:0 0 0 5px rgba(255,200,0,.35),0 20px 36px -10px rgba(140,100,0,.45)}
.mitem.focus .mico{background:var(--acc);color:#fff}
.mitem.focus.soon{opacity:1}
.mitem:focus-visible{outline:none}

/* 활동 화면 */
.act{min-height:calc(100vh - 100px)}
.acthead{display:flex;align-items:center;gap:16px;padding-top:6px}
.aico{width:60px;height:60px;border-radius:18px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;flex:none}
.aico .ico{width:32px;height:32px}
.startmsg{margin:3vh 0 0;padding:30px 28px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-m);
     font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;text-align:center;
     display:flex;align-items:center;justify-content:center;gap:16px}
.startmsg::before{content:"";width:30px;height:30px;flex:none;border-radius:50%;background:var(--yel);
     box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 0 0 8px rgba(255,200,0,.22);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 0 0 14px rgba(255,200,0,.08)}}
.status{font-size:clamp(52px,10vw,124px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-height:1.2em;line-height:1.1}
.status:empty{display:none}
.result{font-size:26px;line-height:1.55;margin:0;max-width:42em;padding:24px 28px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-s)}
.result:empty{display:none}
.actbtns{margin-top:auto;display:flex;gap:28px;justify-content:center;padding:12px 0 8px}
.sq{width:min(200px,40vw);aspect-ratio:1/1;border-radius:30px;font-size:clamp(20px,2.5vw,27px);padding:12px;word-break:keep-all}
#btn-again{background-color:var(--yel);color:var(--yel-ink);--edge:var(--yel-edge);--halo:rgba(255,200,0,.32)}
#btn-menu{background-color:var(--blue);color:var(--blue-ink);--edge:var(--blue-edge);--halo:rgba(37,99,235,.28);
     background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.08) 100%)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dev{color:var(--dim);font-size:13px}
.dev pre{font:12px/1.5 Consolas,monospace;white-space:pre-wrap;max-height:30vh;overflow:auto;margin:6px 0 0}
@media (prefers-reduced-motion:reduce){.mitem.focus{transform:none}.startmsg::before{animation:none}}

/* 언어 선택 — 오른쪽 위 (v2.5, 큐브랩과 같은 자리) */
#langSw{display:flex;gap:2px;background:var(--card);border-radius:999px;padding:3px;box-shadow:var(--shadow-s)}
#langSw button{border:0;background:transparent;font-size:13px;font-weight:700;color:var(--dim);padding:6px 11px;border-radius:999px;cursor:pointer}
#langSw button:hover{color:var(--fg)}
#langSw button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}
#langSw button:focus-visible{outline:3px solid var(--acc);outline-offset:1px}

@media (max-width:560px){
  body{padding:16px 16px 24px}
  .top{flex-wrap:wrap;gap:12px}
  .topr{flex-wrap:wrap;gap:6px}
  #menu{gap:12px}
  .mitem{padding:14px 12px;gap:10px;min-height:96px}
  .mico{width:40px;height:40px;border-radius:12px}
  .mico .ico{width:24px;height:24px}
  .mname{font-size:18px;overflow-wrap:anywhere;word-break:normal}
  .actbtns{gap:16px}
}