:root{
    --bg:#f4f5f7; --card:#ffffff; --ink:#1a1a2e; --sub:#6b7280;
    --line:#eceef1; --accent:#4f46e5; --accent-soft:#eef2ff;
    --green:#10b981; --amber:#f59e0b; --rose:#f43f5e; --radius:16px;
    --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;padding:16px}
  .wrap{max-width:1160px;margin:0 auto}

  /* 미리보기 바 (실제 앱엔 없음) */
  .previewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#1a1a2e;color:#fff;
    border-radius:12px;padding:10px 14px;margin-bottom:14px}
  .previewbar .lbl{font-size:12px;font-weight:700;opacity:.7}
  .previewbar .role{display:inline-flex;gap:4px;flex-wrap:wrap}
  .previewbar .role button{border:0;background:rgba(255,255,255,.1);color:#cfd2e0;padding:7px 14px;border-radius:8px;
    font-size:13px;font-weight:600;cursor:pointer}
  .previewbar .role button.on{background:#fff;color:#1a1a2e}
  .previewbar .memo{font-size:11.5px;opacity:.55;margin-left:auto}

  /* 헤더 */
  .header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius);
    padding:14px 20px;box-shadow:var(--shadow);margin-bottom:16px;gap:12px;flex-wrap:wrap}
  .hleft{display:flex;align-items:center;gap:12px}
  .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:grid;place-items:center;color:#fff;font-size:18px}
  .htitle{font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.1}
  .hdesc{font-size:11.5px;color:var(--sub)}
  .hright{display:flex;align-items:center;gap:14px}
  .acct{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
  .acct .dot{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px}
  .hlink{font-size:12.5px;color:var(--sub);font-weight:600;cursor:pointer}
  .hlink:hover{color:var(--ink)}
  .hsep{width:1px;height:16px;background:var(--line)}

  /* 본문 = 사이드바 + 메인 */
  .view{display:none} .view.on{display:flex;gap:16px}
  .sidebar{width:214px;flex:none;background:#fff;border-radius:var(--radius);padding:14px 12px;box-shadow:var(--shadow);height:fit-content}
  .sidebar .cat{font-size:11px;font-weight:700;color:#9aa0ab;padding:8px 12px 4px}
  .menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:11px 13px;border-radius:10px;
    font-size:13.5px;font-weight:600;color:var(--sub);border:0;background:transparent;cursor:pointer;transition:.12s}
  .menu button:hover{background:#f7f8fa}
  .menu button.on{background:var(--accent-soft);color:var(--accent)}
  .menu .ic{width:18px;text-align:center}
  .main{flex:1;min-width:0}
  .hamburger{display:none;border:0;background:#f1f2f5;width:42px;height:42px;border-radius:10px;font-size:18px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
  .hamburger:hover{background:var(--accent-soft);color:var(--accent)}
  .drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(15,15,30,.42);z-index:150}
  @media(max-width:840px){
    .view.on{flex-direction:column}
    .hamburger{display:inline-flex}
    .hsep,.hlink{display:none}
    .sidebar{position:fixed;top:0;right:0;height:100vh;width:274px;max-width:82%;flex:none;
      border-radius:0;box-shadow:-10px 0 34px rgba(0,0,0,.18);padding:18px 14px;
      transform:translateX(100%);transition:transform .26s ease;z-index:200;overflow-y:auto}
    body.drawer-open .view.on .sidebar{transform:translateX(0)}
    body.drawer-open .drawer-backdrop{display:block}
  }

  .screen{display:none;animation:fade .22s ease} .screen.on{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .grid{display:grid;gap:14px}
  .g2{grid-template-columns:1fr 1fr}.g2b{grid-template-columns:1fr 1.3fr}.g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:720px){.g2,.g2b,.g3{grid-template-columns:1fr}}

  .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .card h3{font-size:15px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em}
  .card .hint{font-size:12.5px;color:var(--sub);margin-bottom:14px}
  .sec-title{font-size:12.5px;font-weight:700;color:var(--sub);margin:2px 0 10px}
  .badge{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px;margin-bottom:12px}
  .badge.star{color:#7c3aed;background:#f3ebff}

  .stat{font-size:26px;font-weight:800;letter-spacing:-.02em}
  .stat small{font-size:13px;font-weight:600;color:var(--sub);margin-left:3px}
  .pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
  .pill.up{background:#e7f7f0;color:var(--green)}.pill.mid{background:#fff4e5;color:var(--amber)}.pill.new{background:#ffe9ee;color:var(--rose)}

  /* 3분할 통계 한 박스 */
  .trio{display:flex}.trio>div{flex:1;text-align:center;padding:4px 6px}.trio>div+div{border-left:1px solid var(--line)}
  .trio .stat{font-size:24px}.trio .t{font-size:12px;color:var(--sub);font-weight:600;margin-top:4px}

  /* form */
  .fld{margin-bottom:12px}.fld label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
  .inp{width:100%;background:#f7f8fa;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--ink)}
  .row2{display:flex;gap:10px}.row2>*{flex:1}
  .btn{border:0;padding:11px 18px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;width:100%}
  .btn.primary{background:var(--accent);color:#fff}
  .selects{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
  .selects .chip{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:#f1f2f5;color:var(--sub);cursor:pointer}
  .selects .chip.on{background:var(--accent-soft);color:var(--accent)}

  /* segmented (일/주/월, 전체/학원/학부모) */
  .seg{display:inline-flex;background:#eef0f3;border-radius:10px;padding:3px;gap:3px;margin-bottom:14px}
  .seg button{border:0;background:transparent;padding:7px 15px;border-radius:8px;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer}
  .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

  /* table */
  .tbl{width:100%;border-collapse:collapse;font-size:13px}
  .tbl th{text-align:left;color:var(--sub);font-weight:700;font-size:11.5px;padding:9px 10px;border-bottom:1px solid var(--line)}
  .tbl td{padding:11px 10px;border-bottom:1px solid var(--line)}
  .tbl tr.wknd{background:#faf7ff}
  .tbl .sat{color:#2563eb}.tbl .sun{color:var(--rose)}
  .tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
  .tag.g{background:#e7f7f0;color:var(--green)}
  .vlink{font-size:11px;font-weight:700;color:#dc2626;cursor:pointer}

  .todo{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.todo:last-child{border:0}
  .box{width:19px;height:19px;border-radius:6px;border:2px solid #d4d7dd;flex:none}
  .box.done{background:var(--accent);border-color:var(--accent);position:relative}
  .box.done::after{content:"✓";color:#fff;font-size:11px;position:absolute;inset:0;display:grid;place-items:center}
  .todo .t{font-size:14px}.todo.done .t{color:var(--sub);text-decoration:line-through}
  .subj{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);margin-left:auto}

  .bar{height:8px;border-radius:999px;background:#eceef1;overflow:hidden}
  .bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4f46e5,#7c3aed)}
  .goal{padding:11px 0;border-bottom:1px solid var(--line)}.goal:last-child{border:0}
  .goal .r{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:6px}
  .goal .r span:last-child{color:var(--accent)}

  .timer{text-align:center;padding:26px 20px}
  .ring{width:180px;height:180px;border-radius:50%;margin:0 auto 18px;background:conic-gradient(var(--accent) 264deg,#eceef1 0);display:grid;place-items:center}
  .ring .in{width:146px;height:146px;border-radius:50%;background:#fff;display:grid;place-content:center;gap:2px}
  .ring .time{font-size:38px;font-weight:800;letter-spacing:-.03em}.ring .lbl{font-size:12px;color:var(--sub);font-weight:600}
  .btns{display:flex;gap:10px;justify-content:center}
  .btns button{border:0;padding:11px 22px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer}
  .btns .primary{background:var(--accent);color:#fff}.btns .ghost{background:#eef0f3;color:var(--ink)}
  .mood{display:flex;gap:8px}.mood span{font-size:22px;padding:7px 11px;border-radius:11px;background:#f7f8fa;cursor:pointer}
  .mood span.on{background:var(--accent-soft);outline:2px solid var(--accent)}

  .chart{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:8px}
  .chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
  .chart .col i{width:100%;max-width:32px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#7c3aed,#4f46e5)}
  .chart .col small{font-size:11px;color:var(--sub);font-weight:600}

  .lrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}.lrow:last-child{border:0}
  .av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
  .grow{flex:1}.muted{color:var(--sub);font-size:12px}
  .rank{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:#f1f2f5;color:var(--sub);flex:none}
  .rank.g1{background:#fff6da;color:#b8860b}.rank.g2{background:#eef1f5;color:#64748b}.rank.g3{background:#fbeede;color:#b45309}
  .mini-btn{border:1px solid var(--line);background:#fff;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--sub);cursor:pointer}
  .mini-btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}

  /* week grid */
  .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
  .week .d{background:#f7f8fa;border-radius:10px;padding:9px;min-height:110px}
  .week .d .dl{font-size:11px;font-weight:700;color:var(--sub);margin-bottom:6px}
  .week .it{font-size:10.5px;font-weight:600;background:#fff;border-radius:6px;padding:4px 5px;margin-bottom:4px;border-left:3px solid var(--accent)}
  /* month calendar */
  .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cal .hd{font-size:11px;font-weight:700;color:var(--sub);text-align:center;padding-bottom:4px}
  .cal .cell{background:#f7f8fa;border-radius:8px;min-height:64px;padding:6px;font-size:11px}
  .cal .cell.mut{opacity:.4}
  .cal .n{font-weight:700;color:var(--sub)}
  .cal .dotrow{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
  .cal .dt{width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .cal .dt.g{background:var(--green)}.cal .dt.a{background:var(--amber)}

  .note{margin-top:22px;font-size:12.5px;color:var(--sub);text-align:center}

  /* ===== v4: 풀스크린 와이드 · 큰 폰트 · 라운드 10 ===== */
  body{font-size:15px;padding:16px 20px}
  .wrap{max-width:none;width:100%}
  /* 헤더 = 미리보기 바와 같은 어두운 배경 + 글자·포인트 색 조정 */
  .header{background:#1a1a2e}
  .htitle{color:#ffffff}
  .hdesc{color:#a9adbd}
  .acct{color:#ffffff}
  .acct .dot{background:rgba(255,255,255,.14);color:#c7d2fe}
  #betaTag{background:rgba(129,230,180,.18);color:#6ee7b7}
  .hlink{color:#c7cbd9}
  .hlink:hover{color:#ffffff}
  .hsep{background:rgba(255,255,255,.18)}
  .hamburger{background:rgba(255,255,255,.12);color:#ffffff}
  .hamburger:hover{background:rgba(255,255,255,.22);color:#ffffff}
  .card,.header,.sidebar,.previewbar{border-radius:10px}
  .htitle{font-size:21px}.hdesc{font-size:13px}
  .acct{font-size:15px}.hlink{font-size:14px}
  .sidebar{width:246px;padding:16px 14px}
  .sidebar .cat{font-size:12.5px}
  .menu button{font-size:15.5px;padding:13px 15px}
  .view.on{gap:20px}
  .card{padding:24px}
  .card h3{font-size:17.5px}.card .hint{font-size:14px}
  .sec-title{font-size:14px}.badge{font-size:12.5px}
  .stat{font-size:32px}.stat small{font-size:15px}
  .trio .stat{font-size:30px}.trio .t{font-size:13.5px}
  .pill{font-size:13px}
  .fld label{font-size:14px}.inp{font-size:15px;padding:12px 13px}
  .btn{font-size:15.5px;padding:13px 18px}
  .selects .chip{font-size:14px}.seg button{font-size:14.5px}
  .tbl th{font-size:13px}.tbl td{font-size:14.5px;padding:13px 10px}
  .tag{font-size:12.5px}.vlink{font-size:12.5px}
  .todo .t{font-size:15.5px}.subj{font-size:12.5px}
  .goal .r{font-size:15px}
  .ring .time{font-size:44px}.ring .lbl{font-size:13.5px}
  .btns button{font-size:15.5px}.mood span{font-size:26px}
  .chart .col small{font-size:12.5px}
  .lrow{font-size:15px}.av{font-size:13.5px}.muted{font-size:13.5px}
  .rank{font-size:14px}.mini-btn{font-size:13.5px;padding:7px 13px}
  .week .dl{font-size:12.5px}.week .it{font-size:12px}.week .d{min-height:130px}
  .cal .hd{font-size:12.5px}.cal .n{font-size:13.5px}
  .cal .cell{font-size:12.5px;min-height:98px}
  .cal .hd.sat,.cal .n.sat{color:#2563eb}
  .cal .hd.sun,.cal .n.sun{color:var(--rose)}
  /* 월별 항목 칩 (짧게 표시, 마우스 오버 시 전체 내용) */
  .cal .mi{display:block;font-size:11.5px;font-weight:600;color:var(--accent);background:#fff;border-radius:6px;
    padding:3px 6px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:default}
  .cal .mi:hover{white-space:normal;overflow:visible;position:relative;z-index:9;box-shadow:var(--shadow)}
  .cal .cell{overflow:visible}
  /* 개별 링크 체크박스 · 표 안 개별 입력칸 */
  .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 14px;cursor:pointer}
  .chk .b{width:19px;height:19px;border-radius:5px;border:2px solid var(--accent);background:var(--accent);position:relative;flex:none}
  .chk .b::after{content:"✓";color:#fff;font-size:12px;position:absolute;inset:0;display:grid;place-items:center}
  .tin{width:100%;background:#f7f8fa;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:12.5px;color:var(--ink)}
  /* 영단어 */
  .vrow{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
  .vrow.vplay{background:var(--accent-soft);border-color:var(--accent)}
  .vw{font-size:21px;font-weight:800;letter-spacing:-.01em}
  .vipa{font-size:13px;color:var(--sub);margin-top:2px}
  .vm{font-size:16px;font-weight:700;color:var(--accent)}
  .spk{border:0;background:#eef0f3;width:40px;height:40px;border-radius:10px;font-size:17px;cursor:pointer;flex:none}
  .spk:hover{background:var(--accent-soft)}
  .chart .col .vt{font-size:11px;font-weight:700;color:var(--ink)}
  /* 영단어 플래시카드 모달 */
  .modal{position:fixed;inset:0;background:rgba(20,20,40,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
  .modal-card{background:#fff;border-radius:14px;padding:26px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.28);position:relative}
  .modal-x{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:18px;color:var(--sub);cursor:pointer}
  .flash-unit{font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);display:inline-block;padding:5px 13px;border-radius:999px;margin-bottom:4px}
  .flash-body{display:flex;align-items:center;gap:12px}
  .flash-center{flex:1;text-align:center;padding:24px 0}
  .flash-w{font-size:46px;font-weight:800;letter-spacing:-.02em}
  .flash-m{font-size:22px;font-weight:700;color:var(--accent);margin-top:14px}
  .flash-arrow{border:0;background:#eef0f3;width:48px;height:48px;border-radius:50%;font-size:18px;color:var(--ink);cursor:pointer;flex:none}
  .flash-arrow:hover{background:var(--accent-soft);color:var(--accent)}
  .flash-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
  .flash-foot .muted2{color:var(--sub);font-size:14px;font-weight:600}
  .flash-foot button{border:0;background:var(--accent);color:#fff;padding:9px 18px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer}
  .note{font-size:14px}

  /* ===== 태블릿 · 터치 · PWA 설치 대응 ===== */
  html{-webkit-text-size-adjust:100%}
  /* 가로 스크롤 안전장치: 표·달력 등은 각자 내부 스크롤(.tbl-scroll) 사용 */
  img{max-width:100%;height:auto}

  /* 설치형(PWA)로 실행 시 노치·상태바 안전영역 확보 (아이패드/갤탭) */
  @media (display-mode:standalone){
    body{
      padding-top:max(16px,env(safe-area-inset-top));
      padding-left:max(20px,env(safe-area-inset-left));
      padding-right:max(20px,env(safe-area-inset-right));
      padding-bottom:max(16px,env(safe-area-inset-bottom));
    }
  }

  /* 터치 기기(태블릿·폰): 손가락으로 누르기 쉽게 탭 영역 확대 */
  @media (pointer:coarse){
    .menu button,.mini-btn,.btn,.seg button{min-height:44px}
    .selects .chip{padding:10px 15px}
    .box{width:24px;height:24px}
    .chk-real input[type="checkbox"],.agree-box input[type="checkbox"]{width:22px;height:22px}
    .spk,.pw-toggle,.flash-arrow{min-width:44px;min-height:44px}
    .mood span{padding:10px 14px}
    .plan-nav .mini-btn{min-width:44px}
    /* 링크형 탭 이동은 여백 확보 */
    .hnav{padding:6px 2px}
  }

  /* 태블릿 세로(약 700~900px): 대시보드 3분할이 좁지 않게 살짝 조정 */
  @media (min-width:721px) and (max-width:900px){
    .g3{grid-template-columns:repeat(3,1fr)}
    .cal .cell{min-height:88px}
  }