/* =========================================================
   셰익스컴퍼니 수강생 앱 — 홈페이지(shakes.co.kr) 디자인 시스템
   색·타이포·라운드·호버 규칙을 본 사이트와 동일하게 맞췄습니다.
   ========================================================= */
@import url('https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --bg:#ffffff; --bg2:#fafafa; --bg3:#f5f5f4;
  --ink:#191919; --ink2:#454545; --ink3:#787774;
  --line:#e9e9e7; --line2:#ededec;
  --red:#CE1126; --red-d:#A60E1F;
  --red-soft:rgba(206,17,38,.05);
  --red-line:rgba(206,17,38,.25);
  --r:14px; --r-sm:8px; --r-btn:11px;
  --sidebar:272px;
  --shadow:0 12px 32px rgba(206,17,38,.10);
  --shadow-soft:0 1px 2px rgba(25,25,25,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#131312; --bg2:#1b1b1a; --bg3:#232322;
    --ink:#f0efed; --ink2:#c2c0bc; --ink3:#8b8983;
    --line:#2e2e2c; --line2:#282826;
    --red:#E8324A; --red-d:#F04A60;
    --red-soft:rgba(232,50,74,.09);
    --red-line:rgba(232,50,74,.30);
    --shadow:0 12px 32px rgba(0,0,0,.45);
    --shadow-soft:0 1px 2px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.7; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── 헤더 ───────────────────────────────────────────── */
header.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:10px;height:66px;padding:0 24px}
.logo{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.logo img{width:32px;height:32px;border-radius:50%}
.logo .sub{font-weight:600;color:var(--ink3);font-size:14px;letter-spacing:-.01em}
.spacer{flex:1}

/* ── 칩 / 배지 ──────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--ink3);
  border:1px solid var(--line);background:var(--bg2);
  border-radius:99px;padding:6px 14px;white-space:nowrap;
}
.chip.red{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.chip.warn{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;color:var(--red);
  border:1px solid var(--red-line);background:var(--red-soft);
  border-radius:99px;padding:6px 16px;
}

/* ── 버튼 ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:15px;font-weight:600;padding:13px 26px;
  border-radius:var(--r-btn);border:1px solid transparent;
  transition:.15s;cursor:pointer;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d);transform:translateY(-1px)}
.btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--bg2)}
.btn-sm{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:var(--r-sm)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-icon{
  background:none;border:none;color:var(--ink3);cursor:pointer;
  padding:6px;border-radius:var(--r-sm);line-height:0;transition:.15s;
}
.btn-icon:hover{background:var(--bg3);color:var(--red)}

/* ── 본문 레이아웃 ──────────────────────────────────── */
.wrap{max-width:820px;margin:0 auto;padding:40px 24px 80px}
h1{font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:34px 0 12px}
h1 .red,h2 .red{color:var(--red)}
p.lead{color:var(--ink2);margin-top:10px;font-size:16px}

.card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:26px 24px;transition:.18s;margin-bottom:16px;
}
.card.hoverable:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
.card h2{margin-top:0}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
a.tile{
  display:block;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);padding:24px;transition:.18s;
}
a.tile:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
a.tile .name{font-size:18px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
a.tile .desc{color:var(--ink3);font-size:14px;margin-top:7px;font-weight:500;line-height:1.6}
a.tile .more{margin-top:16px;font-size:14px;font-weight:700;color:var(--red);display:inline-flex;gap:6px}
a.tile:hover .more .arr{transform:translate(3px,-3px)}
a.tile .more .arr{transition:.15s;display:inline-block}
a.tile[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ── 폼 ─────────────────────────────────────────────── */
label{display:block;font-size:13.5px;font-weight:700;margin:16px 0 7px;letter-spacing:-.01em}
label .muted{font-weight:500;color:var(--ink3)}
input[type=text],input[type=tel],input[type=number],
input[type=datetime-local],textarea,select{
  width:100%;padding:11px 14px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-btn);
  transition:.15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
textarea{resize:vertical;min-height:84px;line-height:1.7}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:500;font-size:14.5px;
       color:var(--ink2);margin-top:18px;cursor:pointer}
.check input{width:auto;margin-top:5px;accent-color:var(--red)}

/* ── 알림 ───────────────────────────────────────────── */
.msg{padding:12px 16px;border-radius:var(--r-btn);font-size:14.5px;margin:14px 0;font-weight:500}
.msg.err {background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.msg.info{background:var(--bg2);color:var(--ink2);border:1px solid var(--line)}
.msg.good{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.msg a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── 표 ─────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{font-size:12.5px;color:var(--ink3);font-weight:700;letter-spacing:.02em}
td.code{font-weight:800;letter-spacing:.14em;color:var(--red)}
.muted{color:var(--ink3);font-size:13.5px}
.center{text-align:center;padding:64px 20px;color:var(--ink3)}

/* 체크 불릿 — 홈페이지와 동일 */
ul.checks{list-style:none}
ul.checks li{font-size:14.5px;color:var(--ink2);padding:5px 0 5px 26px;position:relative}
ul.checks li::before{
  content:'';position:absolute;left:0;top:11px;width:13px;height:7px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg);
}