:root{
    --navy:#8F56EC; --navy-deep:#2E1B3D; --cream:#FFFFFF; --panel:#F6F6F8; --gold:#5FB8AC;
    --crimson:#C2547E; --ink:#2B2333; --muted:#7A6E85; --line: rgba(91,59,116,0.15);
    --lilac:#C9A2DE;
  }
  /* --cream: 페이지 전체 배경(흰색, 화사하고 깔끔하게). --panel: 카드 위에 살짝 구분만
     주는 보조 박스 배경(연보라 느낌 없는 중립 회색) — 보라색은 글씨/버튼/포인트에만 사용 */
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ background:var(--cream); color:var(--ink); font-family:'Noto Sans KR', sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; word-break:keep-all; }
  .mono{ font-family:'Space Mono', monospace; letter-spacing:0.04em; }
  a{color:inherit; text-decoration:none;}

  .ticker-wrap{ background:var(--navy-deep); color:#e9edf3; overflow:hidden; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,0.08);}
  .ticker{ display:inline-block; padding:8px 0; font-size:14px; animation: scroll-left 28s linear infinite;}
  .ticker span{ margin-right:48px; opacity:0.85;} .ticker .flash{ color:var(--gold); font-weight:700;}
  @keyframes scroll-left{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

  header{ display:flex; align-items:center; justify-content:space-between; padding:0 6vw; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--cream); z-index:50; height:74px; gap:20px;}
  .logo{ font-weight:900; font-size:21px; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;}
  .logo .sub{ font-size:11.5px; color:var(--muted); font-weight:700; margin-left:2px; white-space:nowrap;}

  nav.main{ display:flex; gap:8px; height:100%; flex-shrink:0;}
  .nav-item{ position:relative; height:100%; display:flex; align-items:center;}
  .nav-item > a{ padding:0 20px; font-size:17px; font-weight:700; color:var(--navy); height:100%; display:flex; align-items:center; }
  .nav-item .dropdown{
    position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:10px 0; min-width:220px; box-shadow:0 20px 40px -20px rgba(12,35,64,0.25);
    opacity:0; visibility:hidden; transform:translateY(6px); transition:all .15s ease;
  }
  .nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0);}
  .dropdown a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 20px; font-size:15.5px; color:var(--ink); font-weight:500;}
  .dropdown a:hover{ background:var(--panel); color:var(--navy); font-weight:700;}
  .dropdown a .badge{ font-size:12px; color:var(--muted); font-weight:500;}

  .cta-small{ background:var(--navy); color:#fff; padding:9px 18px; border-radius:2px; font-size:15px; font-weight:700;}

  .header-search{
    display:flex; align-items:center; flex:0 1 160px; min-width:0; margin:0 4px;
    background:var(--panel); border-radius:999px; height:34px; padding:0 4px 0 14px;
  }
  .header-search input{
    flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:13.5px; color:var(--ink); padding:0;
  }
  .header-search input::placeholder{ color:var(--muted); }
  .header-search button{
    flex-shrink:0; display:flex; align-items:center; justify-content:center; width:26px; height:26px;
    border:none; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; transition:background .12s ease, color .12s ease;
  }
  .header-search button:hover{ background:rgba(46,27,61,0.08); color:var(--navy);}
  .header-search svg{ width:14px; height:14px; display:block;}
  @media (max-width: 1080px){ .header-search{ display:none; } }

  .search-form-page{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
  .search-form-page select{ border:1px solid var(--line); border-radius:4px; padding:10px 12px; font-size:14.5px; color:var(--ink);}
  .search-form-page input[type="text"]{ flex:1; min-width:220px; border:1px solid var(--line); border-radius:4px; padding:10px 14px; font-size:14.5px;}
  .search-result-summary{ color:var(--muted); font-size:14.5px; margin-bottom:16px;}
  .search-result-list{ display:flex; flex-direction:column; gap:12px;}
  .search-result-card{ display:block; border:1px solid var(--line); border-radius:8px; padding:16px 18px; transition:border-color .15s ease, box-shadow .15s ease;}
  .search-result-card:hover{ border-color:var(--navy); box-shadow:0 10px 24px -18px rgba(91,59,116,0.4);}
  .search-result-card .src-board{ font-size:12.5px; color:var(--navy); font-weight:700; margin-bottom:4px;}
  .search-result-card .src-title{ font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
  .search-result-card .src-snippet{ font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:8px;}
  .search-result-card .src-date{ font-size:12.5px; color:var(--muted);}

  .hero{ padding: 60px 6vw 40px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;}
  .eyebrow{ font-size:14px; color:var(--crimson); font-weight:700; letter-spacing:0.12em; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
  .eyebrow::before{ content:''; width:22px; height:1px; background:var(--crimson);}
  h1{ font-size:clamp(30px, 4vw, 50px); line-height:1.2; font-weight:900; letter-spacing:-0.02em; color:var(--navy);}
  h1 em{ font-style:normal; color:var(--crimson);}
  .hero p.lead{ margin-top:20px; font-size:19px; color:var(--muted); line-height:1.7; max-width:480px;}
  .hero-ctas{ margin-top:30px; display:flex; gap:14px; align-items:center;}
  .btn-primary{ background:var(--navy); color:#fff; padding:15px 28px; font-weight:700; font-size:17px; border-radius:2px; display:inline-block; border:none; cursor:pointer;}
  .btn-ghost{ color:var(--navy); font-weight:700; font-size:16px; border-bottom:1px solid var(--navy); padding-bottom:2px;}

  .pass{ background:var(--navy); color:#eef1f6; border-radius:6px; position:relative; box-shadow: 0 30px 60px -20px rgba(12,35,64,0.45); overflow:hidden;}
  .pass-top{ padding:24px 24px 18px;}
  .pass-row{ display:flex; justify-content:space-between; align-items:flex-start;}
  .pass-brand{ font-size:13px; letter-spacing:0.15em; color:var(--gold); font-weight:700;}
  .pass-class{ font-size:13px; color:rgba(255,255,255,0.6);}
  .route{ display:flex; align-items:center; gap:14px; margin-top:20px;}
  .route .code{ font-size:30px; font-weight:900;} .route .name{ font-size:13px; color:rgba(255,255,255,0.55); margin-top:4px;}
  .route .plane{ flex:1; text-align:center; position:relative;} .route .plane .line{ height:1px; background:rgba(255,255,255,0.25);}
  .route .plane .icon{ font-size:17.5px; transform:translateY(-9px); display:inline-block;}
  .pass-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; padding-top:18px; border-top:1px dashed rgba(255,255,255,0.25);}
  .pass-grid div{ font-size:11.5px; color:rgba(255,255,255,0.5);} .pass-grid strong{ display:block; font-size:16px; color:#fff; margin-top:5px; font-weight:700;}
  .pass-perf{ height:24px; position:relative; background: radial-gradient(circle 8px at 0 50%, var(--cream) 8px, transparent 8.5px), radial-gradient(circle 8px at 100% 50%, var(--cream) 8px, transparent 8.5px);}
  .pass-perf::after{ content:''; position:absolute; top:50%; left:20px; right:20px; height:1px; background:repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 6px, transparent 6px 12px);}
  .pass-bottom{ padding:16px 24px 22px; display:flex; justify-content:space-between; align-items:center;}
  .barcode{ height:32px; width:140px; background:repeating-linear-gradient(to right, #fff 0 2px, transparent 2px 3px, #fff 3px 5px, transparent 5px 8px); opacity:0.9;}
  .seat{ text-align:right;} .seat small{ display:block; font-size:11.5px; color:rgba(255,255,255,0.5);} .seat strong{ font-size:22px;}

  /* 메인페이지 히어로 바로 아래에 들어가는 "지금 채용 진행중인 항공사" 위젯.
     히어로와 분리돼 보이도록 위쪽에 구분선/여백을 주고, 한 줄로 이어붙여 가로
     스크롤하던 방식 대신 카드형으로 한 줄에 최대 3개씩 배치하고 넘치면 다음
     줄로 자연스럽게 넘어가도록 만들었습니다(그리드). 눈에 잘 띄도록 사이트
     포인트 컬러(보라)를 꽉 채운 카드 형태는 유지했습니다. */
  .hiring-strip{ padding:36px 6vw 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:4px;}
  .hiring-strip-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px;}
  .hiring-strip-title{ font-size:11px; font-weight:700; color:var(--crimson); letter-spacing:0.1em;}
  .hiring-strip-sub{ font-size:13.5px; font-weight:700; color:var(--navy);}
  .hiring-strip-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:start;}
  @media (max-width:900px){ .hiring-strip-row{ grid-template-columns:repeat(2, minmax(0,1fr));} }
  @media (max-width:560px){ .hiring-strip-row{ grid-template-columns:1fr;} }
  .hiring-pill{
    display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%; box-sizing:border-box;
    border-radius:14px; background:var(--navy); overflow:hidden; box-shadow:0 2px 10px rgba(46,27,61,0.18);
  }
  .hiring-pill-main{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:6px; padding:12px 14px;
    color:#fff; text-decoration:none; transition:background 0.15s; width:100%; box-sizing:border-box;
  }
  .hiring-pill-main:hover{ background:rgba(255,255,255,0.08);}
  .hiring-pill .cat{ font-size:11px; font-weight:700; color:#fff; background:rgba(255,255,255,0.22); border-radius:16px; padding:2px 9px;}
  .hiring-pill .airline{ font-size:13.5px; font-weight:800; color:#fff;}
  .hiring-pill .ddate{ font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.75);}
  .hiring-pill .dday{ font-size:11.5px; font-weight:800; color:#fff; background:rgba(255,255,255,0.28); border-radius:14px; padding:2px 9px;}
  .hiring-pill .dday.soon{ color:#fff; background:var(--crimson);}
  .hiring-essay{ width:100%; padding:0 14px 12px; box-sizing:border-box;}
  .hiring-essay summary{ font-size:11px; color:rgba(255,255,255,0.85); cursor:pointer; user-select:none;}
  .hiring-essay summary:hover{ color:#fff;}
  .hiring-essay[open] summary{ margin-bottom:8px;}
  .hiring-essay-body{
    background:#fff; color:var(--ink); border-radius:8px; padding:11px 13px; font-size:12.5px;
    line-height:1.65; white-space:pre-line; max-width:100%;
  }

  section{ padding:80px 6vw;}
  .section-head{ max-width:680px; margin-bottom:44px;}
  .section-tag{ font-size:14px; color:var(--crimson); font-weight:700; letter-spacing:0.1em; margin-bottom:14px;}
  .section-title{ font-size:clamp(24px,2.8vw,36px); font-weight:900; color:var(--navy); letter-spacing:-0.02em; line-height:1.35;}
  .section-sub{ margin-top:14px; color:var(--muted); font-size:17.5px; line-height:1.75;}
  .center{ text-align:center; margin-left:auto; margin-right:auto;}

  /* Curriculum */
  .curr-group{ margin-bottom:8px;}
  .curr-chapter{ display:flex; align-items:center; justify-content:space-between; padding:28px 4px 12px; border-top:3px solid var(--navy); margin-top:12px;}
  .curr-chapter .name{ font-size:16px; color:var(--navy); font-weight:900; letter-spacing:0.02em;}
  .curr-chapter .flag{ font-size:13px; background:var(--gold); color:#fff; padding:4px 12px; border-radius:20px; font-weight:700;}
  .curr-chapter .flag.foreign{ background:var(--crimson);}
  .curr-chapter .flag.common{ background:var(--navy);}

  .doc-item{ padding:18px 4px; border-bottom:1px solid var(--line);}
  .doc-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .doc-head .left{ display:flex; align-items:baseline; gap:10px;}
  .doc-head .num{ font-size:14px; color:var(--gold); font-weight:700; flex-shrink:0;}
  .doc-head .title{ font-size:17.5px; font-weight:700; color:var(--navy); line-height:1.5;}
  .lock{ font-size:13px; color:var(--muted); border:1px solid var(--line); padding:4px 11px; border-radius:20px; white-space:nowrap; flex-shrink:0;}

  .sub-list{ list-style:none; margin:10px 0 2px 22px; }
  .sub-list li{ font-size:14.5px; color:var(--muted); line-height:2; position:relative; padding-left:14px;}
  .sub-list li::before{ content:'–'; position:absolute; left:0; color:var(--gold);}
  .sub-list.compact{ columns:1; column-gap:0; }
  .sub-list.compact li{ break-inside:auto;}
  .sub-note{ font-size:14px; color:var(--muted); margin:8px 0 0 22px; font-style:italic;}

  .sub-list.clickable li::before{ content:none;}
  .sub-list.clickable li{ padding-left:26px;}
  .sub-list.clickable li a{ color:var(--navy); font-weight:600; text-decoration:none; transition:color .15s;}
  .sub-list.clickable li a:hover{ color:var(--lilac); text-decoration:underline;}
  .sub-list.clickable li.viewed a{ color:var(--muted); font-weight:500;}

  .sub-check{ position:absolute; left:0; top:2px; width:16px; height:16px; line-height:15px; text-align:center; border-radius:50%; font-size:11px; box-sizing:border-box;}
  li.unviewed .sub-check{ border:2px solid var(--line);}
  li.viewed .sub-check{ background:var(--gold); color:#fff; font-weight:900;}
  li.viewed .sub-check::before{ content:'✓';}

  /* 콘텐츠 업데이트 알림 배지 (관리자가 이미 열람했던 내용을 수정하면 표시) */
  .n-badge{ display:inline-block; background:var(--crimson); color:#fff; font-size:10px; font-weight:900; line-height:1; padding:3px 6px 2px; border-radius:20px; vertical-align:middle; letter-spacing:0.02em;}
  .n-badge-date{ font-size:11px; color:var(--crimson); font-weight:700; vertical-align:middle;}
  .nav-item .dropdown a .n-badge{ margin-left:2px;}

  .video-embed{ position:relative; width:100%; padding-top:56.25%; margin:20px 0; border-radius:10px; overflow:hidden; background:#000;}
  .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0;}

  /* Pricing */
  .tiers3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .tiers4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .tier{ border:1px solid var(--line); border-radius:8px; padding:30px 26px; background:#fff; display:flex; flex-direction:column;}
  .tier.featured{ border-color:var(--navy); box-shadow:0 24px 50px -26px rgba(12,35,64,0.4); position:relative; background:var(--navy); color:#fff;}
  .tier.featured::before{ content:'평생 이용 · 최고 혜택'; position:absolute; top:-13px; left:26px; background:var(--crimson); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px;}
  .tier-flag{ font-size:13px; letter-spacing:0.08em; color:var(--gold); font-weight:700; margin-bottom:10px;}
  .tier-name{ font-size:21px; font-weight:900; color:var(--navy);}
  .tier.featured .tier-name{ color:#fff;}
  .tier-original{ font-size:15px; color:var(--muted); text-decoration:line-through; margin-top:14px;}
  .tier.featured .tier-original{ color:rgba(255,255,255,0.45);}
  .tier-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:4px;}
  .tier-discount{ font-size:14px; background:var(--crimson); color:#fff; font-weight:700; padding:2px 8px; border-radius:4px;}
  .tier-price{ font-size:28px; font-weight:900; color:var(--navy);}
  .tier.featured .tier-price{ color:#fff;}
  .tier-period{ font-size:14px; color:var(--muted); margin-top:2px;}
  .tier.featured .tier-period{ color:rgba(255,255,255,0.55);}
  .tier hr{ border:none; border-top:1px solid var(--line); margin:20px 0;}
  .tier.featured hr{ border-top:1px solid rgba(255,255,255,0.15);}
  .tier ul{ list-style:none; flex:1;}
  .tier li{ font-size:15px; padding:7px 0; color:var(--ink); display:flex; gap:8px;}
  .tier.featured li{ color:rgba(255,255,255,0.85);}
  .tier li::before{ content:'—'; color:var(--gold);}
  .tier .btn-primary{ text-align:center; margin-top:22px; width:100%;}
  .tier.featured .btn-primary{ background:var(--crimson);}
  .tier:not(.featured) .btn-primary{ background:transparent; color:var(--navy); border:1px solid var(--navy);}
  .tier-note{ font-size:13.5px; color:var(--muted); margin-top:14px; line-height:1.6; background:var(--panel); padding:10px 12px; border-radius:6px;}
  .tier.featured .tier-note{ background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7);}

  footer{ background:var(--navy-deep); color:rgba(255,255,255,0.5); padding:50px 6vw; font-size:14.5px; border-top:1px solid rgba(255,255,255,0.08);}
  footer .fbrand{ color:#fff; font-weight:900; font-size:18.5px; margin-bottom:10px;}
  footer a{ color:rgba(255,255,255,0.5); text-decoration:none;}
  footer a:hover{ color:#fff; text-decoration:underline;}

  /* 푸터: 전체 메뉴(사이트맵) + 회사정보 박스 */
  .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; margin-bottom:28px;}
  .footer-top .fbrand{ margin-bottom:0; flex-shrink:0;}
  .footer-sitemap{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; flex:1; max-width:840px;}
  .fs-col{ display:flex; flex-direction:column; gap:10px;}
  .fs-head{ font-size:12.5px; font-weight:800; color:rgba(255,255,255,0.85); letter-spacing:0.03em; margin-bottom:2px;}
  .fs-col a{ font-size:12.5px; line-height:1.5;}
  /* "이용약관 · 환불정책 · ..." 줄은 사이트맵 바로 아래, 구분선 위쪽에 오고
     (예전엔 구분선이 사이트맵 바로 아래 있어서 이 줄이 선 아래쪽에 있었어요),
     저작권 표시(footer-bottom)만 구분선 아래로 내려갑니다. */
  .footer-links{ font-size:14.5px; padding-bottom:22px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-bottom{ font-size:14.5px;}

  /* 회사정보: 평소엔 작은 텍스트만 보이고, 마우스를 올리면 팝업으로 상세 정보가 뜸 */
  .footer-company-hover{ position:relative; display:inline-block;}
  .footer-company-trigger{ font-size:14.5px; color:rgba(255,255,255,0.5); cursor:default; border-bottom:1px dotted rgba(255,255,255,0.3);}
  .footer-company-hover:hover .footer-company-trigger{ color:#fff;}
  .footer-company-popup{
    position:absolute; bottom:calc(100% + 10px); right:0; min-width:280px; max-width:360px;
    background:#241531; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:16px 18px;
    font-size:12.5px; color:rgba(255,255,255,0.65); line-height:1.9; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5);
    opacity:0; visibility:hidden; transform:translateY(6px); transition:all .15s ease; z-index:20;
  }
  .footer-company-popup p{ margin:0 0 4px;}
  .footer-company-popup p:last-child{ margin-bottom:0;}
  .footer-company-hover:hover .footer-company-popup{ opacity:1; visibility:visible; transform:translateY(0);}
  @media (max-width:700px){
    .footer-company-popup{ right:auto; left:0; max-width:280px;}
  }
  @media (max-width:980px){
    .footer-sitemap{ grid-template-columns:repeat(3,1fr); max-width:none;}
  }
  @media (max-width:700px){
    .footer-top{ flex-direction:column;}
    .footer-sitemap{ grid-template-columns:repeat(2,1fr); max-width:none;}
  }

  /* Reviews & badges */
  .badge-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:38px; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:8px;}
  .badge-legend .item{ display:flex; align-items:center; gap:6px; font-size:14.5px; color:var(--ink);}
  .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .quote{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px;}
  .quote .stars{ color:var(--crimson); font-size:15px; letter-spacing:2px;}
  .quote p{ font-size:15.5px; line-height:1.75; margin-top:12px; color:var(--ink);}
  .quote .who{ margin-top:14px; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:3px; font-weight:700;}
  .write-review{ margin-top:32px; text-align:center; padding:26px; border:1px dashed var(--line); border-radius:8px; background:#fff;}
  .write-review p{ font-size:15.5px; color:var(--muted); margin-bottom:14px;}

  /* Story / social proof / FAQ blocks */
  .review-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:900px; margin:0 auto;}
  .review-shots img{ width:100%; border-radius:10px; border:1px solid var(--line); box-shadow:0 14px 30px -18px rgba(46,27,61,0.25);}
  .review-stack{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}
  .review-stack img{ width:100%; border-radius:10px; border:1px solid var(--line); box-shadow:0 14px 30px -18px rgba(46,27,61,0.2); display:block;}
  .review-caption{ text-align:center; font-size:14px; color:var(--muted); margin-top:24px;}

  .story-block{ max-width:660px; margin:0 auto; text-align:center;}
  .story-block p{ font-size:19px; color:var(--ink); line-height:2.1; margin-bottom:8px;}
  .story-block strong{ color:var(--navy);}
  .story-highlight{ font-size:23px; font-weight:900; color:var(--navy); margin:42px auto; text-align:center; max-width:600px; line-height:1.6;}

  .story-photo{ max-width:520px; margin:48px auto; border-radius:12px; overflow:hidden; box-shadow:0 20px 40px -22px rgba(46,27,61,0.3);}
  .story-photo img{ width:100%; display:block;}
  .story-photo-caption{ text-align:center; font-size:15px; color:var(--muted); margin-top:14px;}

  .pain-wrap{ max-width:620px; margin:56px auto 0;}
  .pain-col{ margin-bottom:40px;}
  .pain-col h5{ font-size:16px; color:var(--navy); font-weight:800; margin-bottom:20px; text-align:center;}
  .pain-list{ list-style:none;}
  .pain-list li{ border:1px solid var(--line); border-radius:10px; padding:18px 24px; margin-bottom:16px; font-size:17px; color:var(--ink); background:#fff; line-height:1.7; text-align:center;}
  .x-list{ list-style:none;}
  .x-list li{ font-size:17px; color:var(--ink); padding:14px 0; line-height:1.8; text-align:center;}

  .check-list{ max-width:660px; margin:36px auto 0; list-style:none;}
  .check-list li{ display:flex; gap:12px; font-size:17px; color:var(--ink); padding:16px 4px; border-bottom:1px solid var(--line); line-height:1.7;}
  .check-list li::before{ content:'✓'; color:var(--gold); font-weight:900; flex-shrink:0;}

  .pill-list{ list-style:none; max-width:640px; margin:0 auto;}
  .pill-list li{ border:1px solid var(--line); border-radius:999px; padding:16px 26px; margin-bottom:14px; font-size:16px; color:var(--ink); background:#fff; text-align:center; line-height:1.6;}

  .x-icon-list{ list-style:none; max-width:600px; margin:0 auto;}
  .x-icon-list li{ display:flex; align-items:flex-start; gap:12px; font-size:16px; color:var(--ink); padding:10px 4px; line-height:1.7; text-align:left;}
  .x-icon-list li .ico{ flex-shrink:0; width:22px; height:22px; border-radius:50%; border:2px solid var(--crimson); color:var(--crimson); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; margin-top:2px;}

  .check-icon-list{ list-style:none; max-width:640px; margin:0 auto;}
  .check-icon-list li{ display:flex; align-items:flex-start; gap:12px; font-size:16px; color:var(--ink); padding:12px 4px; line-height:1.7; text-align:left;}
  .check-icon-list li .ico{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--lilac); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; margin-top:2px;}

  .compare-simple{ display:grid; grid-template-columns:1fr 1fr; max-width:620px; margin:0 auto; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .compare-simple > div{ padding:22px; text-align:center;}
  .compare-simple .vs-left{ border-right:1px solid var(--line);}
  .compare-simple h4{ font-size:16px; color:var(--muted); margin-bottom:12px;}
  .compare-simple .vs-right h4{ color:var(--navy); font-weight:900;}
  .compare-simple p{ font-size:14.5px; color:var(--muted); line-height:2;}

  .eligibility{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:960px; margin:0 auto;}
  .elig-card{ border-radius:10px; padding:24px;}
  .elig-card.no{ background:#FBEFF2; border:1px solid rgba(194,84,126,0.25);}
  .elig-card.yes{ background:#F1EAF7; border:1px solid rgba(201,162,222,0.35);}
  .elig-card h4{ font-size:16px; font-weight:900; margin-bottom:14px;}
  .elig-card.no h4{ color:var(--crimson);}
  .elig-card.yes h4{ color:var(--navy);}
  .elig-card ul{ list-style:none;}
  .elig-card li{ font-size:14.5px; color:var(--ink); padding:6px 0; line-height:1.6;}

  .faq-item{ border-bottom:1px solid var(--line); padding:20px 4px;}
  .faq-item .q{ font-weight:800; color:var(--navy); font-size:17px; display:flex; gap:10px;}
  .faq-item .q::before{ content:'Q'; color:var(--gold); font-weight:900;}
  .faq-item .a{ margin-top:10px; margin-left:24px; font-size:15px; color:var(--muted); line-height:1.8;}
  .faq-item .a mark{ background: rgba(201,162,222,0.3);}

  @media (max-width: 700px){
    .compare-simple, .eligibility{ grid-template-columns:1fr;}
    .review-shots{ grid-template-columns:1fr;}
  }

  @media (max-width: 900px){
    .hero, .tiers3, .tiers4{ grid-template-columns:1fr;}
    .sub-list.compact{ columns:1;}
    nav.main{ display:none;}
  }

  /* ============================================================
     실사이트 확장 스타일 (폼 / 알림 / 인증 / 관리자 / 마이페이지 / 게시판)
     ============================================================ */

  /* 상단 우측 닉네임 드롭다운 메뉴 - 클릭하면 열리고(마우스 오버로도 열림), 바깥을
     클릭하면 닫힙니다. JS가 없어도 링크 자체는 마이페이지로 바로 이동합니다. */
  .user-menu{ position:relative;}
  .user-menu .user-menu-trigger{ cursor:pointer; color:#fff;}
  .user-menu .dropdown{ left:auto; right:0;}
  .user-menu.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0);}
  .user-dropdown-points{ padding:10px 20px 12px; margin-bottom:4px; font-size:13px; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line);}
  .user-dropdown-points b{ color:var(--navy); font-size:16px;}

  /* 게시글 하단 추천(좋아요)/스크랩 버튼 */
  .post-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:26px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .post-action-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14.5px; font-weight:700; color:var(--ink); cursor:pointer; transition:all .15s ease; font-family:inherit;}
  .post-action-btn:hover:not(:disabled){ border-color:var(--navy); color:var(--navy);}
  .post-action-btn.active{ background:var(--navy); border-color:var(--navy); color:#fff;}
  .post-action-btn.static{ cursor:default;}
  .post-action-btn:disabled{ cursor:not-allowed; opacity:0.5;}

  .flash-messages{ max-width:900px; margin:18px auto 0; padding:0 6vw;}
  .flash{ padding:13px 18px; border-radius:6px; font-size:14.5px; margin-bottom:10px; border:1px solid var(--line);}
  .flash.success{ background:#EAF6EE; color:#1F7A44; border-color:rgba(31,122,68,0.25);}
  .flash.error{ background:#FBEFF2; color:var(--crimson); border-color:rgba(194,84,126,0.3);}
  .flash.info{ background:#F1EAF7; color:var(--navy); border-color:rgba(91,59,116,0.2);}

  .auth-wrap{ max-width:480px; margin:70px auto; padding:0 6vw;}
  .auth-wrap.wide{ max-width:580px;}
  .auth-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:42px 46px; box-shadow:0 20px 44px -28px rgba(46,27,61,0.25);}
  @media (max-width:600px){ .auth-card{ padding:32px 26px;} }
  .auth-card h1{ font-size:23px; color:var(--navy); margin-bottom:6px;}
  .auth-card .sub{ font-size:14.5px; color:var(--muted); margin-bottom:26px;}
  .field{ margin-bottom:16px;}
  .field label{ display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:6px;
    font-size:15.5px; font-family:inherit; color:var(--ink); background:#fff; box-sizing:border-box;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--navy);}
  .field textarea{ resize:vertical; min-height:110px;}
  .field .hint{ font-size:12.5px; color:var(--muted); margin-top:5px;}
  .form-actions{ margin-top:22px;}
  .field-row{ display:flex; gap:16px;}
  .field-row .field{ flex:1; min-width:0;}
  @media (max-width:600px){ .field-row{ flex-direction:column; gap:0;} }

  .rte-wrap{ border:1px solid var(--line); border-radius:8px; overflow:hidden;}
  .rte-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 12px; background:#fcfbfd; border-bottom:1px solid var(--line);}
  .rte-btn{ font-size:13px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:7px; padding:7px 12px; cursor:pointer; font-family:inherit; line-height:1.3; transition:background .12s ease, color .12s ease, border-color .12s ease;}
  .rte-btn b, .rte-btn i, .rte-btn u{ font-family:inherit;}
  .rte-btn:hover{ background:var(--panel); color:var(--navy); border-color:var(--navy);}
  .rte-btn:active{ transform:translateY(1px);}
  .rte-divider{ display:inline-block; width:1px; height:20px; background:var(--line); margin:0 3px; flex-shrink:0;}
  .rte-editor{ min-height:220px; max-height:520px; overflow-y:auto; padding:14px 16px; font-size:15px; color:var(--ink); line-height:1.8;}
  .rte-editor:focus{ outline:none;}
  .rte-editor img{ max-width:100%; border-radius:6px;}
  .rte-editor .video-embed{ margin:14px 0;}
  .btn-block{ width:100%; text-align:center; border:none; cursor:pointer;}
  .btn-secondary{ background:#fff; color:var(--navy); border:1px solid var(--navy); padding:14px 26px; border-radius:2px; font-weight:700; font-size:15px; cursor:pointer; display:inline-block;}
  .btn-danger{ background:#fff; color:var(--crimson); border:1px solid var(--crimson);}
  .auth-switch{ margin-top:20px; text-align:center; font-size:14px; color:var(--muted);}
  .auth-switch a{ color:var(--navy); font-weight:700; border-bottom:1px solid var(--navy);}
  .btn-kakao{ width:100%; background:#FEE500; color:#191919; border:none; border-radius:6px; padding:14px; font-weight:700; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:not-allowed; opacity:0.65;}
  .kakao-note{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:8px;}
  .auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-size:12.5px;}
  .auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line);}
  .terms-row{ font-size:13px; color:var(--ink); display:flex; align-items:flex-start; gap:7px; margin-top:10px;}
  .terms-row a{ color:var(--navy); text-decoration:underline;}
  .terms-row input{ margin-top:3px;}

  /* mypage */
  .mypage-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 30px; margin-bottom:32px;}
  .mypage-head h1{ font-size:22px; color:var(--navy);}
  .mypage-head .email{ font-size:14px; color:var(--muted); margin-top:4px;}
  .tier-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .tier-pill{ font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:20px; background:var(--navy); color:#fff;}
  .tier-pill.none{ background:var(--line); color:var(--muted);}
  .tier-pill.best{ background:var(--gold);}
  .mypage-grid{ display:grid; grid-template-columns:2fr 1fr; gap:24px;}
  @media (max-width:900px){ .mypage-grid{ grid-template-columns:1fr;} }
  .renewal-panel{ border-color:var(--lilac); background:#FBF8FD;}
  .renewal-panel.urgent{ border-color:var(--navy); background:#F4EDFC;}
  .renewal-panel.urgent strong{ color:var(--navy);}
  .panel{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px; margin-bottom:22px;}
  .panel h3{ font-size:16px; color:var(--navy); margin-bottom:16px;}
  .simple-table{ width:100%; border-collapse:collapse; font-size:14.5px;}
  .simple-table th{ text-align:left; color:var(--muted); font-weight:700; font-size:12.5px; padding:9px 8px; border-bottom:1px solid var(--line);}
  .simple-table td{ padding:11px 8px; border-bottom:1px solid var(--line); color:var(--ink);}
  .status-badge{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px;}
  .status-badge.pending{ background:#FFF3DA; color:#9A6A00;}
  .status-badge.confirmed{ background:#EAF6EE; color:#1F7A44;}
  .status-badge.cancelled{ background:#F1F1F3; color:var(--muted);}
  .empty-note{ color:var(--muted); font-size:14.5px; padding:14px 0;}

  /* curriculum locked/unlocked states used on real pages */
  .doc-item.unlocked .doc-head .title{ color:var(--navy);}
  .unlock-badge{ font-size:13px; color:var(--gold); font-weight:700; border:1px solid var(--gold); padding:4px 11px; border-radius:20px; white-space:nowrap; flex-shrink:0;}
  .doc-body{ margin:14px 4px 4px 22px; padding:16px 18px; background:var(--panel); border-radius:8px; font-size:15px; color:var(--ink); line-height:1.85;}
  .assignment-box{ margin-left:4px; padding:24px 26px; background:#fff; border:1px solid var(--line); border-radius:10px;}
  .assignment-box .flash{ margin-bottom:16px;}
  .assignment-box .flash a{ color:var(--navy); font-weight:700;}
  .doc-body a.video-link{ display:inline-block; margin-top:10px; color:var(--navy); font-weight:700; border-bottom:1px solid var(--navy);}
  /* 비밀문서 유출 방지: 열람 중인 회원 이름/이메일 워터마크 반복 표시 + 드래그/선택/우클릭 방지 */
  .secure-doc{
    background-repeat:repeat; background-position:0 0;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  }
  .secure-doc img{ -webkit-user-drag:none; user-drag:none; pointer-events:none;}
  .doc-item.locked-click{ cursor:default;}

  /* 챌린지방 데일리 인증 챌린지 */
  .challenge-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 16px;}
  .challenge-tab{ padding:9px 18px; border-radius:20px; border:1px solid var(--line); font-size:14.5px; font-weight:700; color:var(--muted); background:#fff;}
  .challenge-tab.active{ background:var(--navy); color:#fff; border-color:var(--navy);}
  .challenge-panel{ margin-bottom:6px;}
  .challenge-status-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; font-size:15px; color:var(--ink);}
  .challenge-daily-question{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; font-size:14.5px; color:var(--ink); line-height:1.5;}
  .challenge-daily-question .q-label{ display:inline-block; font-weight:900; color:var(--navy); margin-right:6px;}
  .challenge-slots{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px;}
  .challenge-slots button[disabled]{ opacity:0.6; cursor:default;}
  .challenge-slot-block{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--panel);}
  .challenge-slot-block .hint{ margin:0 0 8px; display:block;}
  .challenge-slot-block textarea{ width:100%; min-height:56px; margin:0 0 10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; resize:vertical; box-sizing:border-box;}
  .challenge-slot-block input[type="file"]{ display:block; margin:0 0 10px; font-size:13.5px;}
  .challenge-slot-block .checkin-photo-link{ display:inline-block; margin-left:10px; font-size:13.5px;}
  .challenge-slot-block .checkin-note{ margin:8px 0 0; font-size:13.5px; color:var(--muted); white-space:pre-wrap;}
  .challenge-day-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:6px; margin-top:8px;}
  .challenge-notice{ background:#F6F0FC; border:1px solid var(--lilac); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13.5px; color:var(--ink); line-height:1.6; font-weight:600;}
  .day-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 2px; border-radius:6px; background:var(--panel); border:1px solid var(--line);}
  .day-cell .day-num{ font-size:10.5px; color:var(--muted);}
  .day-cell .day-mark{ font-size:14px; font-weight:900; color:var(--muted);}
  .day-cell.done{ background:#EAF6EE; border-color:#bfe6cc;}
  .day-cell.done .day-mark{ color:#1F7A44;}
  .day-cell.today{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy);}
  .day-cell.future{ opacity:0.5;}

  /* 강의/문서 상세 화면 - 왼쪽 전체 목차 + 오른쪽 본문 2단 레이아웃 */
  .reader-layout{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start;}
  .reader-main{ min-width:0;}
  /* 문서/강의 제목은 관리자가 자유롭게 입력하는 긴 텍스트라, 홈 화면 등에서 쓰는
     큰 히어로 타이틀 크기(.section-title 기본값)로 두면 두 줄로 넘어가기 쉬워서
     이 화면(왼쪽 목차 + 오른쪽 본문)에서만 조금 더 작게 한 줄에 잘 들어오도록 줄였습니다. */
  .reader-main .section-title{ font-size:clamp(18px,1.9vw,24px); font-weight:800; line-height:1.3;}
  .reader-sidebar{
    position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto;
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 16px;
  }
  .reader-sidebar-head{ font-size:12.5px; font-weight:700; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);}
  .reader-sidebar-head a{ color:var(--navy);}
  .rs-group{ margin-bottom:20px;}
  .rs-group:last-child{ margin-bottom:0;}
  .rs-chapter{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:12px; font-weight:900; color:var(--navy); text-transform:uppercase; letter-spacing:0.03em;
    padding:0 2px 8px; border-bottom:2px solid var(--navy); margin-bottom:8px;
  }
  .rs-lock{ font-size:12px;}
  .rs-doc{ margin-bottom:6px;}
  .rs-doc-title{ font-size:13.5px; font-weight:700; line-height:1.5; padding:6px 8px; border-radius:6px;}
  .rs-doc-title a{ color:var(--ink);}
  .rs-doc-title.active{ background:var(--panel);}
  .rs-doc-title.active a{ color:var(--navy);}
  .rs-sub-list{ list-style:none; margin:2px 0 6px;}
  .rs-sub-list li{ font-size:12.5px; line-height:1.6;}
  .rs-sub-list li a{ display:flex; align-items:baseline; gap:7px; color:var(--muted); padding:5px 8px 5px 20px; border-radius:6px; text-decoration:none;}
  .rs-sub-list li a:hover{ background:var(--panel); color:var(--navy);}
  .rs-sub-list li.viewed a{ color:var(--ink);}
  .rs-sub-list li.active a{ background:var(--lilac); color:#fff; font-weight:700;}
  .rs-sub-check{ flex-shrink:0; width:12px; height:12px; margin-left:-20px; border-radius:50%; border:2px solid var(--line); box-sizing:border-box; align-self:center;}
  .rs-sub-list li.viewed .rs-sub-check{ background:var(--gold); border-color:var(--gold);}
  .rs-sub-list li.active .rs-sub-check{ border-color:#fff;}
  .rs-lock-dot{ flex-shrink:0; font-size:10.5px; margin-left:-20px;}
  @media (max-width:900px){
    .reader-layout{ grid-template-columns:1fr;}
    .reader-sidebar{ position:static; max-height:340px;}
  }

  /* 잠긴 콘텐츠 안내 패널 (멤버십 전환 안내) */
  .locked-panel{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:56px 40px; text-align:center; margin-top:6px;}
  .locked-panel .locked-icon{ font-size:32px; margin-bottom:16px;}
  .locked-panel h3{ font-size:19px; color:var(--navy); margin-bottom:12px;}
  .locked-panel p{ color:var(--muted); font-size:14.5px; line-height:1.85; max-width:440px; margin:0 auto;}
  .locked-actions{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

  /* admin */
  .admin-shell{ display:flex; min-height:100vh;}
  .admin-side{ width:230px; flex-shrink:0; background:var(--navy-deep); color:rgba(255,255,255,0.8); padding:26px 0;}
  .admin-side .brand{ padding:0 24px 22px; font-weight:900; color:#fff; font-size:18px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:14px;}
  .admin-side a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 24px; font-size:14.5px; color:rgba(255,255,255,0.72);}
  .admin-side a:hover, .admin-side a.active{ background:rgba(255,255,255,0.08); color:#fff; font-weight:700;}
  .admin-nav{ display:flex; flex-direction:column;}
  .admin-nav .nav-drag-item.dragging{ opacity:0.35; background:rgba(255,255,255,0.12);}
  .admin-nav .drag-handle{ display:inline-block; width:14px; height:16px; position:relative; flex-shrink:0; cursor:grab; opacity:0.5;}
  .admin-nav a:hover .drag-handle{ opacity:0.9;}
  .admin-nav .drag-handle::before{
    content:''; position:absolute; top:1px; left:2px; width:3px; height:3px; border-radius:50%; background:currentColor; color:#fff;
    box-shadow: 6px 0 0 currentColor, 0 5px 0 currentColor, 6px 5px 0 currentColor, 0 10px 0 currentColor, 6px 10px 0 currentColor;
  }
  .admin-nav .nav-group{ border-top:1px solid rgba(255,255,255,0.08); margin-top:6px; padding-top:6px;}
  .admin-nav .nav-group-title{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
    padding:9px 24px; font-size:12px; font-weight:700; letter-spacing:0.04em; color:rgba(255,255,255,0.45);
    text-transform:uppercase; user-select:none;
  }
  .admin-nav .nav-group-title::-webkit-details-marker{ display:none;}
  .admin-nav .nav-group-title::after{
    content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg); transition:transform 0.15s ease; flex-shrink:0;
  }
  .admin-nav .nav-group[open] > .nav-group-title::after{ transform:rotate(45deg);}
  .admin-nav .nav-group-title:hover{ color:rgba(255,255,255,0.75);}
  .admin-nav .nav-group-items{ display:flex; flex-direction:column;}
  .admin-side .back{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1);}
  .admin-main{ flex:1; padding:34px 42px; background:var(--cream); min-width:0;}
  .admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
  .admin-topbar h1{ font-size:24px; color:var(--navy);}
  .admin-topbar .desc{ font-size:14px; color:var(--muted); margin-top:4px;}
  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
  .stat-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px;}
  .stat-card .num{ font-size:26px; font-weight:900; color:var(--navy);}
  .stat-card .label{ font-size:13px; color:var(--muted); margin-top:4px;}
  .vat-reserve-box{
    background:#F0FAF8; border:1.5px dashed var(--gold); border-radius:10px;
    padding:18px 22px; margin-bottom:28px;
  }
  .vat-reserve-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;}
  .vat-reserve-emoji{ font-size:22px; line-height:1;}
  .vat-reserve-title{ font-weight:800; color:var(--ink); font-size:15px;}
  .vat-reserve-sub{ font-size:12.5px; color:var(--muted); margin-top:2px;}
  .vat-reserve-amount{ font-size:28px; font-weight:900; color:#2E8F80; margin:6px 0 6px;}
  .vat-reserve-detail{ font-size:12.5px; color:var(--muted); line-height:1.6;}
  .board-order-item.dragging{ opacity:0.35; background:var(--panel);}
  .drag-handle-light{ display:inline-block; width:14px; height:16px; position:relative; flex-shrink:0; cursor:grab; opacity:0.4; color:var(--muted);}
  .board-order-item:hover .drag-handle-light{ opacity:0.85;}
  .drag-handle-light::before{
    content:''; position:absolute; top:1px; left:2px; width:3px; height:3px; border-radius:50%; background:currentColor; color:var(--muted);
    box-shadow: 6px 0 0 currentColor, 0 5px 0 currentColor, 6px 5px 0 currentColor, 0 10px 0 currentColor, 6px 10px 0 currentColor;
  }
  .admin-table-wrap{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .admin-table{ width:100%; border-collapse:collapse; font-size:14.5px;}
  .admin-table th{ text-align:left; background:var(--panel); color:var(--navy); font-weight:700; font-size:12.5px; padding:12px 16px; border-bottom:1px solid var(--line);}
  .admin-table td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle;}
  .admin-table tr:last-child td{ border-bottom:none;}
  .admin-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
  .admin-toolbar form{ display:flex; gap:8px;}
  .admin-toolbar input[type=text]{ padding:9px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px; min-width:220px;}
  .btn-xs{ font-size:12.5px; padding:6px 12px; border-radius:5px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; display:inline-block;}
  .btn-xs.primary{ background:var(--navy); color:#fff; border-color:var(--navy);}
  .btn-xs.danger{ color:var(--crimson); border-color:rgba(194,84,126,0.4);}
  .btn-xs.gold{ color:#8a6a00; border-color:#e0c26a; background:#fff8e6;}
  .role-badge{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; background:var(--line); color:var(--navy);}
  .role-badge.admin{ background:var(--navy); color:#fff;}
  .best-badge{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; background:var(--gold); color:#fff;}
  .admin-card-form{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 28px; max-width:720px;}
  .admin-card-form h2{ font-size:18px; color:var(--navy); margin-bottom:20px;}
  .checkbox-row{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink); margin-margin-top:6px;}
  .breadcrumb{ margin-top:6px; font-size:13px; color:var(--muted);}
  .breadcrumb a{ color:var(--navy); font-weight:700;}
  .board-list{ list-style:none;}
  .board-list li{ border-bottom:1px solid var(--line); padding:16px 4px; display:flex; justify-content:space-between; gap:14px;}
  .board-list .title{ font-size:16px; font-weight:700; color:var(--navy);}
  .board-list .meta{ font-size:13px; color:var(--muted); margin-top:4px;}
  .pin-tag{ font-size:11px; font-weight:700; color:#fff; background:var(--crimson); border-radius:5px; padding:2px 7px; margin-right:7px; letter-spacing:-0.02em;}
  .board-table-wrap{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow-x:auto;}
  .board-list-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
  .board-list-table th{ text-align:left; background:var(--panel); color:var(--navy); font-weight:700; font-size:12px; letter-spacing:0.02em; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
  .board-list-table td{ padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle;}
  .board-list-table tr:last-child td{ border-bottom:none;}
  .board-list-table tbody tr{ transition:background 0.12s ease;}
  .board-list-table tbody tr:hover{ background:var(--panel);}
  .board-list-table tr.pinned-row{ background:#FBF3F6;}
  .board-list-table tr.pinned-row:hover{ background:#F7E9EE;}
  .board-list-table .num-col{ width:56px; text-align:center;}
  .board-list-table .num-cell{ text-align:center; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums;}
  .board-list-table .notice-icon{ font-size:14px;}
  .board-list-table .title-col{ width:56%;}
  .board-list-table .title-cell{ font-weight:700;}
  .board-list-table .title-cell a{ color:var(--navy); transition:color 0.12s ease;}
  .board-list-table .title-cell a:hover{ color:var(--crimson);}
  .board-list-table .author-cell, .board-list-table .date-cell, .board-list-table .view-cell{ color:var(--muted); font-size:13px; white-space:nowrap;}
  .board-list-table .empty-note{ text-align:center; color:var(--muted); padding:28px 16px;}
  .comment-count-badge{ display:inline-block; background:var(--crimson); color:#fff; font-size:11px; font-weight:700; border-radius:20px; padding:1px 7px; margin-left:6px; vertical-align:middle;}

  /* 게시판 목록 - 깔끔한 스타일(제목 아래 한 줄에 날짜·조회·게시판·추천을 모아 보여줌).
     board.html에서만 씁니다 - 다른 목록(스크랩한 글 등)은 기존 컬럼형 스타일 그대로예요. */
  .board-list-table--clean .title-cell{ font-weight:400;}
  .post-row-title{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.4;}
  .post-row-title a{ color:var(--ink); transition:color 0.12s ease;}
  .post-row-title a:hover{ color:var(--navy);}
  .post-row-meta{ margin-top:4px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .post-row-meta .meta-accent{ color:var(--navy); font-weight:700;}
  .board-list-table--clean .author-cell{ white-space:nowrap; text-align:right;}
  .author-star{ font-size:12px; margin-left:3px;}
  .author-star--free{ color:var(--gold);}
  .author-star--paid{ color:var(--crimson);}
  .author-star--best{ color:var(--navy);}

  /* 업체 디렉토리 게시판 (과외/학원, 면접복, 헤메샵, 사진관) - 클릭 없이 바로 보이는 표 */
  .vendor-note{
    background:#F3EEFD; border:1px solid #DACCF7; color:var(--navy-deep); border-radius:10px;
    padding:12px 18px; font-size:13px; line-height:1.6; margin-bottom:18px;
  }
  .vendor-table-wrap{ margin-bottom:20px;}
  .vendor-table th{ white-space:normal;}
  .vendor-table td{ font-size:13.5px;}
  .vendor-empty{ color:var(--muted);}
  .vendor-link{ color:var(--navy); font-weight:700; white-space:nowrap;}
  .vendor-link:hover{ color:var(--crimson);}
  .vendor-submit-box{
    border:1px solid var(--line); border-radius:10px; background:#fff; padding:16px 20px;
  }
  .vendor-submit-box summary{ cursor:pointer; font-weight:700; color:var(--navy); font-size:14.5px; list-style:none;}
  .vendor-submit-box summary::-webkit-details-marker{ display:none;}
  .vendor-submit-body{ margin-top:16px; max-width:480px;}
  .vendor-submit-body .field{ margin-bottom:12px;}

  /* 영작하기 게시판 */
  .writing-key-panel .field{ margin-bottom:12px;}
  .writing-history-item{
    border:1px solid var(--line); border-radius:10px; background:#fff; padding:14px 18px;
  }
  .writing-history-item summary{ cursor:pointer; font-weight:700; color:var(--navy); font-size:13.5px; list-style:none;}
  .writing-history-item summary::-webkit-details-marker{ display:none;}
  .writing-history-body{ margin-top:14px; display:flex; flex-direction:column; gap:14px;}
  .writing-history-block p{ font-size:14px; line-height:1.75; color:var(--ink);}
  .writing-history-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;}

  /* 제휴링크 게시판 */
  .referral-link-box{ display:flex; gap:10px; flex-wrap:wrap;}
  .referral-link-box input{
    flex:1; min-width:220px; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
    font-family:'Space Mono', monospace; font-size:13.5px; background:#f8f8fb; color:var(--ink);
  }
  .referral-link-box .btn-secondary{ white-space:nowrap;}
  /* 게시글 제목 - 마케팅 섹션 제목(.section-title, 최대 36px)과 같은 크기를 쓰면
     제목이 조금만 길어도 두 줄로 넘어가기 쉬워서, 게시글 제목은 좀 더 작은
     고정 크기를 따로 둡니다. */
  .post-title{ font-size:23px; font-weight:900; color:var(--navy); letter-spacing:-0.01em; line-height:1.4;}
  .post-body{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 30px; margin-top:18px; font-size:15.5px; line-height:1.9;}
  .post-body img{ max-width:100%; border-radius:6px;}
  .post-body ul, .post-body ol{ margin:10px 0 10px 22px;}
  .post-body .video-embed{ margin:14px 0;}
  .post-body a{ color:var(--navy); font-weight:600;}

  /* 댓글 */
  .comments-block{ margin-top:32px;}
  .comments-title{ font-size:17px; color:var(--navy); font-weight:900; margin-bottom:16px;}
  .comment-form textarea{ width:100%;}
  .comment-list{ list-style:none; margin-top:22px;}
  .comment-item{ padding:14px 4px; border-bottom:1px solid var(--line);}
  .comment-head{ display:flex; align-items:center; gap:10px; margin-bottom:5px;}
  .comment-author{ font-size:14px; font-weight:700; color:var(--navy);}
  .comment-date{ font-size:12.5px; color:var(--muted);}
  .comment-delete{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:0;}
  .comment-delete:hover{ color:var(--crimson);}
  .comment-body{ font-size:14.5px; color:var(--ink); line-height:1.7; white-space:pre-wrap; word-break:break-word;}
  .comment-images{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
  .comment-images img{ max-width:160px; max-height:160px; border-radius:6px; border:1px solid var(--line); object-fit:cover;}
  .secret-locked{ color:var(--muted); font-size:15px; text-align:center; padding:44px 20px;}
  .comment-secret-tag{ font-size:11px; font-weight:700; color:var(--navy); background:var(--panel); border-radius:20px; padding:2px 9px;}
  .secret-locked-mini{ color:var(--muted); font-size:13.5px; padding:6px 0;}

  /* 라이브강의 일정 달력 */
  .live-banner{ background:var(--panel); border-radius:10px; padding:20px 24px; margin-bottom:28px; font-size:14.5px; color:var(--ink); line-height:1.7;}
  .live-cal-nav{ display:flex; align-items:center; gap:14px; margin-bottom:16px;}
  .live-cal-nav a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:8px; color:var(--navy); font-weight:700;}
  .live-cal-nav a:hover{ background:var(--panel);}
  .live-cal-nav .label{ font-size:19px; font-weight:900; color:var(--navy); min-width:130px; text-align:center;}
  .live-cal-nav .today-btn{ width:auto; padding:0 14px; font-size:13px; font-weight:700;}
  .live-cal{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
  .live-cal-head{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--panel);}
  .live-cal-head div{ text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); padding:10px 0;}
  .live-cal-week{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line);}
  .live-cal-day{ border-left:1px solid var(--line); min-height:96px; padding:8px; position:relative;}
  .live-cal-day:first-child{ border-left:none;}
  .live-cal-day.out .live-cal-daynum{ color:var(--muted); opacity:0.5;}
  .live-cal-day.today{ background:rgba(91,59,116,0.05);}
  .live-cal-daynum{ font-size:13px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; justify-content:center;}
  .live-cal-day.today .live-cal-daynum{ background:var(--navy); color:#fff; width:22px; height:22px; border-radius:50%;}
  .live-cal-event{ margin-top:6px; font-size:12px;}
  .live-cal-event summary{ list-style:none; cursor:pointer; color:var(--navy); line-height:1.5;}
  .live-cal-event summary::-webkit-details-marker{ display:none;}
  .live-cal-event summary::before{ content:"●"; color:var(--crimson); font-size:8px; margin-right:5px; vertical-align:middle;}
  .live-cal-event summary strong{ color:var(--ink); font-weight:700;}
  .live-cal-event-detail{ margin:6px 2px 2px; padding:8px 10px; background:var(--panel); border-radius:6px; font-size:12.5px; color:var(--ink); line-height:1.6;}
  @media (max-width:820px){
    .live-cal-day{ min-height:70px; padding:6px 4px;}
    .live-cal-head div{ font-size:11px;}
    .live-cal-event summary{ font-size:11px;}
  }

  /* 라이브강의: 비메오 영상 + 실시간 채팅 */
  .live-wrap{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:36px;}
  @media (max-width:900px){ .live-wrap{ grid-template-columns:1fr;} }
  .live-video .video-embed{ margin:0;}
  .live-chat{ background:#fff; border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; height:460px; overflow:hidden;}
  .live-chat-head{ padding:14px 16px; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); font-size:14.5px;}
  .live-chat-messages{ flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:9px;}
  .live-chat-msg{ font-size:13.5px; line-height:1.5; word-break:break-word;}
  .live-chat-msg .author{ font-weight:700; color:var(--navy);}
  .live-chat-msg.me .author{ color:var(--crimson);}
  .live-chat-msg .body{ color:var(--ink);}
  .live-chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}
  .live-chat-form input[type=text]{ flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px;}
  .live-chat-form button{ background:var(--navy); color:#fff; border:none; border-radius:6px; padding:9px 16px; font-weight:700; font-size:13.5px; cursor:pointer;}

  /* ============================================================
     실전연습 (역량검사 연습 + 영상면접 연습)
     ============================================================ */
  .practice-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px;}
  @media (max-width:720px){ .practice-cards{ grid-template-columns:1fr;} }
  .practice-card{
    display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px 26px;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .practice-card:hover{ border-color:var(--navy); box-shadow:0 20px 44px -28px rgba(46,27,61,0.28); transform:translateY(-2px);}
  .practice-card-icon{ font-size:30px; margin-bottom:12px;}
  .practice-card h3{ font-size:19px; font-weight:900; color:var(--navy); margin-bottom:8px;}
  .practice-card p{ font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:16px;}
  .practice-card-meta{ font-size:12.5px; color:var(--muted);}
  .practice-card-link{ color:var(--navy); font-weight:700;}

  /* 역량검사 문제/결과 카드 */
  .quiz-question{ padding:22px 24px;}
  .quiz-question-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .quiz-question-num{ font-weight:900; color:var(--navy); font-size:15px;}
  .quiz-question-category{ font-size:12px; color:var(--muted); background:var(--panel); padding:2px 9px; border-radius:20px;}
  .quiz-question-prompt{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.6; margin-bottom:16px;}
  .quiz-choices{ display:flex; flex-direction:column; gap:9px;}
  .quiz-choice{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
    font-size:14.5px; cursor:pointer; transition:border-color .12s ease, background .12s ease;
  }
  .quiz-choice:hover{ border-color:var(--navy);}
  .quiz-choice input[type=radio]{ flex-shrink:0;}
  .quiz-choice.review{ cursor:default;}
  .quiz-choice.review-choice.is-correct{ border-color:var(--gold); background:#F2FAF8; font-weight:700;}
  .quiz-choice.review-choice.is-chosen-wrong{ border-color:var(--crimson); background:#FBEFF2;}
  .quiz-explanation{ margin-top:16px; padding:14px 16px; background:var(--panel); border-radius:8px; font-size:13.5px; color:var(--ink); line-height:1.7;}
  .quiz-score-badge{ font-size:40px; font-weight:900; color:var(--navy); font-family:'Space Mono', monospace;}

  /* 영상면접 질문 목록 */
  .interview-question-list{ display:flex; flex-direction:column; gap:12px;}
  .interview-question-card{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 22px;
    transition:border-color .12s ease;
  }
  .interview-question-card:hover{ border-color:var(--navy);}
  .interview-question-track{ font-size:12px; color:var(--muted); margin-bottom:6px;}
  .interview-question-prompt{ font-size:15.5px; font-weight:700; color:var(--ink); flex:1; min-width:220px;}

  /* 영상면접 녹화 화면 */
  .recorder-panel{ max-width:640px;}
  .interview-prompt-box{ margin-bottom:18px;}
  .interview-prompt-text{ font-size:18px; font-weight:800; color:var(--navy); line-height:1.6; margin:8px 0 10px;}
  .recorder-stage{
    position:relative; background:var(--navy-deep); border-radius:10px; overflow:hidden;
    aspect-ratio:4/3; max-height:420px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .recorder-video{ width:100%; height:100%; object-fit:cover; background:#000; border-radius:10px;}
  .recorder-timer{
    position:absolute; top:12px; right:14px; background:rgba(0,0,0,0.55); color:#fff; font-family:'Space Mono', monospace;
    font-weight:700; font-size:14px; padding:5px 12px; border-radius:20px; display:none;
  }
  .recorder-timer.active{ display:block;}
  .recorder-controls{ display:flex; gap:10px; flex-wrap:wrap;}
  .recorder-status{ margin-top:12px; font-size:13.5px; color:var(--muted); line-height:1.6;}
  .recorder-status.error{ color:var(--crimson); font-weight:700;}
  .recorder-status.success{ color:#1F7A44; font-weight:700;}
  .recorder-help, .inline-help{ margin-top:18px; border-top:1px solid var(--line); padding-top:14px;}
  .recorder-help summary, .inline-help summary{ font-size:13px; font-weight:700; color:var(--navy); cursor:pointer;}
  .recorder-help-body, .inline-help-body{ margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.75;}
  .recorder-help-body p, .inline-help-body p{ margin-bottom:8px;}
  .recorder-help-body p:last-child, .inline-help-body p:last-child{ margin-bottom:0;}
  .inline-help-body a{ color:var(--navy); font-weight:700;}
  .inline-help-body ol, .inline-help-body ul{ margin:0 0 8px 20px;}
  .inline-help-body li{ margin-bottom:4px;}

  /* 저작권/안내 디스클레이머 배너 (역량검사 종합형 전반에서 사용) */
  .practice-disclaimer{
    background:#FFF8EC; border:1px solid #F0DDB0; color:#7A5A16; border-radius:10px;
    padding:14px 18px; font-size:13px; line-height:1.7; margin:16px 0 22px;
  }

  /* 1년이용권 회원 - 역량검사/영상면접 이용 횟수 안내 */
  .practice-usage-note{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#F3EEFD; border:1px solid #DACCF7; color:var(--navy-deep);
    border-radius:10px; padding:12px 18px; font-size:13px; line-height:1.6; margin:16px 0 22px;
  }
  .practice-usage-note strong{ color:var(--navy); }
  .practice-usage-note.is-limit{
    background:#FDEEEE; border-color:#F3C6C6; color:#8A2323;
  }
  .practice-usage-note .usage-bar{
    display:inline-block; width:90px; height:7px; border-radius:5px; background:#E3D8FA; overflow:hidden; vertical-align:middle;
  }
  .practice-usage-note.is-limit .usage-bar{ background:#F5D6D6; }
  .practice-usage-note .usage-bar-fill{
    display:block; height:100%; background:var(--navy); border-radius:5px;
  }
  .practice-usage-note.is-limit .usage-bar-fill{ background:#C23B3B; }

  /* 영어면접 연습 - 음성재생(사진/아바타 없이 음성만) + 질문 캡션 */
  .english-category-badge{
    display:inline-block; font-size:12px; font-weight:700; color:var(--navy);
    background:rgba(143,86,236,0.1); padding:4px 12px; border-radius:20px; margin-bottom:14px;
  }
  .english-avatar-box{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:16px 20px; background:var(--panel); border-radius:12px; border:1px solid var(--line); margin-bottom:18px;
    min-height:20px; justify-content:center;
  }
  .english-speaking-badge{ font-size:14px; color:var(--navy); font-weight:700; display:none;}
  .english-speaking-badge.is-active{ display:block;}
  .english-question-caption{
    font-size:19px; font-weight:700; color:var(--ink); text-align:center; line-height:1.55; margin-bottom:16px;
  }
  .english-tts-controls{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px;}

  /* 성향파악 - 우선순위 선택(multi) 문항 */
  .personality-rank-choices{ display:flex; flex-direction:column; gap:9px;}
  .personality-rank-choice{
    display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
    font-size:14.5px; text-align:left; background:#fff; cursor:pointer; transition:border-color .12s ease, background .12s ease;
    width:100%;
  }
  .personality-rank-choice:hover{ border-color:var(--navy);}
  .personality-rank-choice.picked{ border-color:var(--navy); background:#F5F0FD; font-weight:700;}
  .personality-rank-badge{
    display:inline-flex; align-items:center; justify-content:center; min-width:22px; font-weight:900; color:var(--navy);
  }

  /* 성향파악 결과 */
  .personality-result-card{ text-align:center; padding:38px 24px;}
  .personality-result-type-en{ font-size:13px; letter-spacing:0.12em; color:var(--muted); margin-bottom:6px;}
  .personality-result-type-ko{ font-size:26px; font-weight:900; color:var(--navy); margin-bottom:14px;}
  .personality-result-desc{ font-size:15px; color:var(--ink); line-height:1.75; max-width:560px; margin:0 auto;}
  .personality-score-bars{ display:flex; flex-direction:column; gap:9px;}
  .personality-score-row{ display:flex; align-items:center; gap:12px;}
  .personality-score-label{ width:110px; flex-shrink:0; font-size:13px; color:var(--ink);}
  .personality-score-track{ flex:1; height:10px; background:var(--panel); border-radius:20px; overflow:hidden;}
  .personality-score-fill{ height:100%; background:var(--navy); border-radius:20px;}
  .personality-score-value{ width:28px; text-align:right; font-size:12.5px; color:var(--muted);}

  /* 전략게임 */
  .game-panel{ max-width:640px; text-align:center; padding:32px 26px;}
  .game-stage{ min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; margin-bottom:16px;}
  .game-status{ font-size:14.5px; font-weight:700; color:var(--navy); min-height:22px; margin-bottom:16px;}
  .game-status.done{ color:#1F7A44;}
  .game-controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

  .rps-opponent{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; color:var(--muted);}
  .rps-hand-emoji{ font-size:48px; line-height:1;}
  .rps-buttons{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
  .rps-choice-btn{
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 18px; border:1px solid var(--line);
    border-radius:10px; background:#fff; cursor:pointer; font-size:13.5px; font-weight:700; transition:border-color .12s ease;
  }
  .rps-choice-btn:hover{ border-color:var(--navy);}

  .seq-grid{ display:grid; grid-template-columns:repeat(4, 60px); gap:10px; justify-content:center;}
  .seq-btn{
    width:60px; height:60px; border-radius:10px; border:1px solid var(--line); background:#fff; font-weight:900;
    font-size:18px; color:var(--ink); cursor:pointer; transition:border-color .12s ease, background .12s ease;
  }
  .seq-btn.done{ background:var(--panel); border-color:var(--navy); color:var(--navy);}
  .seq-btn.wrong{ border-color:var(--crimson); background:#FBEFF2;}

  .mem-display{ font-size:56px; min-height:70px; display:flex; align-items:center; justify-content:center; color:var(--navy);}
  .mem-display.active{ transform:scale(1.15);}
  .mem-shape-buttons{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .mem-shape-btn{
    width:56px; height:56px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:22px;
    cursor:pointer; transition:border-color .12s ease;
  }
  .mem-shape-btn:hover{ border-color:var(--navy);}

  .count-boxes{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
  .count-box{
    width:220px; min-height:140px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;
    font-size:20px; line-height:1.5; letter-spacing:3px; color:var(--navy); padding:16px; word-break:break-all;
    transition:border-color .12s ease;
  }
  .count-box:hover{ border-color:var(--navy);}

  .stroop-word{ font-size:48px; font-weight:900; line-height:1;}
  .stroop-buttons{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .stroop-choice-btn{
    display:flex; align-items:center; gap:8px; padding:12px 16px; border:1px solid var(--line);
    border-radius:10px; background:#fff; cursor:pointer; font-size:13.5px; font-weight:700; transition:border-color .12s ease;
  }
  .stroop-choice-btn:hover{ border-color:var(--navy);}
  .stroop-swatch{ display:inline-block; width:16px; height:16px; border-radius:50%; border:1px solid var(--line);}

  .reaction-box{
    width:100%; max-width:420px; min-height:160px; border-radius:14px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; cursor:pointer;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .reaction-box.reaction-wait{ background:var(--panel); color:var(--muted);}
  .reaction-box.reaction-go{ background:#EAF6EE; border-color:#1F7A44; color:#1F7A44;}

  .pattern-sequence{ font-size:34px; font-weight:900; letter-spacing:6px; color:var(--ink);}
  .pattern-blank{ color:var(--navy);}
  .pattern-buttons{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
  .pattern-choice-btn{
    width:60px; height:60px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:26px;
    cursor:pointer; transition:border-color .12s ease;
  }
  .pattern-choice-btn:hover{ border-color:var(--navy);}