/* =====================================================================
   셀프 윈도우 설치 — 공통 스타일
   초보자용: 큰 글씨, 큰 버튼, 넉넉한 여백, 차분한 색
   ===================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
    --brand:        #2f5fe0;
    --brand-dark:   #1e44b0;
    --brand-soft:   #eaf0ff;
    --ink:          #1f2533;
    --ink-soft:     #5b6478;
    --line:         #e6e9f0;
    --bg:           #f4f6fb;
    --card:         #ffffff;
    --ok:           #18a957;
    --warn:         #e8590c;
    --danger:       #e03131;
    --radius:       16px;
    --shadow:       0 4px 20px rgba(31, 50, 110, 0.07);
    --shadow-lg:    0 10px 40px rgba(31, 50, 110, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 17px;
    word-break: keep-all;
}

a { color: var(--brand); text-decoration: none; }

/* ── 상단바 ───────────────────────────────────────── */
.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
.topbar .inner {
    max-width: 920px; margin: 0 auto; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.brand {
    font-size: 20px; font-weight: 800; color: var(--ink);
    display: flex; align-items: center; gap: 9px;
}
.brand .dot {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: 17px;
}
.topbar .links a {
    color: var(--ink-soft); font-weight: 600; font-size: 15px; margin-left: 18px;
}
.topbar .links a:hover { color: var(--brand); }

/* ── 레이아웃 ─────────────────────────────────────── */
.wrap { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }
.narrow { max-width: 460px; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 20px;
}
.card h2 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.card .sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 22px; }

/* ── 히어로 ───────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 44px 24px 36px;
}
.hero h1 {
    font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.5px;
}
.hero h1 .hl { color: var(--brand); }
.hero p { color: var(--ink-soft); font-size: 18px; margin-top: 14px; }

/* ── 3단계 안내 ───────────────────────────────────── */
.steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin: 8px 0 30px;
}
.step {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; padding: 20px 16px; text-align: center;
}
.step .num {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand);
    font-weight: 800; font-size: 18px;
    display: grid; place-items: center; margin: 0 auto 12px;
}
.step .t { font-weight: 700; font-size: 16px; }
.step .d { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

/* ── 상품 카드 ────────────────────────────────────── */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product {
    position: relative;
    background: var(--card); border: 2px solid var(--line);
    border-radius: 16px; padding: 26px 20px; cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    text-align: center;
}
.product:hover { border-color: #c5cee0; transform: translateY(-2px); }
.product.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.product.popular { border-color: var(--brand); }
.product .badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.product .pname { font-weight: 800; font-size: 18px; }
.product .count { color: var(--brand); font-weight: 800; font-size: 30px; margin: 10px 0 2px; }
.product .count small { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.product .price { font-weight: 700; font-size: 19px; margin-top: 6px; }
.product .desc { color: var(--ink-soft); font-size: 13px; margin-top: 8px; min-height: 34px; }
.product .check {
    margin-top: 12px; height: 24px; color: var(--brand); font-weight: 700; font-size: 14px;
    opacity: 0; transition: opacity .15s;
}
.product.selected .check { opacity: 1; }

/* ── 폼 ───────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.field .hint { color: var(--ink-soft); font-size: 13px; margin-top: 6px; }
input[type=text], input[type=password], input[type=tel], select {
    width: 100%; padding: 15px 16px; font-size: 17px;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: #fbfcfe; color: var(--ink);
    font-family: inherit;
}
input:focus, select:focus {
    outline: none; border-color: var(--brand); background: #fff;
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 17px 20px; font-size: 18px; font-weight: 800;
    border: none; border-radius: 13px; cursor: pointer;
    background: var(--brand); color: #fff; font-family: inherit;
    transition: background .15s, transform .05s;
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: scale(.99); }
.btn:disabled { background: #aab4cc; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.gray { background: #eef1f6; color: var(--ink-soft); }
.btn.lg { padding: 19px; font-size: 19px; }

/* ── 알림 박스 ────────────────────────────────────── */
.alert {
    padding: 15px 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
    margin-bottom: 18px; border: 1px solid transparent;
}
.alert.err  { background: #fff0f0; color: #c92a2a; border-color: #ffd0d0; }
.alert.ok   { background: #e9f9ef; color: #0c7a3e; border-color: #c3ecd2; }
.alert.info { background: var(--brand-soft); color: var(--brand-dark); border-color: #cdd9fb; }

/* ── 정보 행 ──────────────────────────────────────── */
.info-row {
    display: flex; justify-content: space-between; padding: 14px 0;
    border-bottom: 1px solid var(--line); font-size: 16px;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--ink-soft); }
.info-row .v { font-weight: 700; }

/* ── 큰 숫자(남은횟수) ───────────────────────────── */
.bignum {
    text-align: center; padding: 28px 0;
    background: var(--brand-soft); border-radius: 14px; margin-bottom: 22px;
}
.bignum .n { font-size: 52px; font-weight: 800; color: var(--brand); line-height: 1; }
.bignum .l { color: var(--ink-soft); margin-top: 8px; font-weight: 600; }

/* ── 표 ───────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { color: var(--ink-soft); font-weight: 700; font-size: 13px; background: #fafbfd; }
.table tr:hover td { background: #fafbff; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.pill.paid { background: #e9f9ef; color: #0c7a3e; }
.pill.pending { background: #fff7e6; color: #b06900; }
.pill.cancelled { background: #fbeaea; color: #c92a2a; }

.muted { color: var(--ink-soft); font-size: 14px; }
.center { text-align: center; }
.mt { margin-top: 18px; }
.spacer { height: 10px; }

/* ── 모바일 ───────────────────────────────────────── */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .hero h1 { font-size: 26px; }
    .steps { grid-template-columns: 1fr; }
    .products { grid-template-columns: 1fr; }
    .card { padding: 22px; }
    .topbar .links a { margin-left: 12px; font-size: 14px; }
}

/* =====================================================================
   Windows PE 도구 다운로드 섹션 (tools.php · dashboard.php 공용)
   ===================================================================== */
.tl-wrap{max-width:880px;margin:0 auto;padding:24px 16px 80px;}
.tl-head{margin-bottom:22px;}
.tl-head h1{font-size:25px;font-weight:900;letter-spacing:-.03em;margin-bottom:8px;}
.tl-head p{color:var(--sub,#64748b);font-size:14px;line-height:1.6;}
.tl-badge{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:700;background:#eef2ff;color:#4338ca;}
.tl-badge.zero{background:#fef2f2;color:#b91c1c;}

.tl-pe-intro{display:flex;gap:13px;align-items:flex-start;background:#eef2ff;border:1px solid #c7d2fe;
  border-radius:14px;padding:16px 18px;margin-bottom:18px;color:#3730a3;font-size:14px;line-height:1.6;}
.tl-pe-intro .ic{font-size:22px;line-height:1;flex-shrink:0;}
.tl-pe-intro .tx b{color:#4338ca;}

.tl-card{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:18px;padding:26px 26px 24px;margin-bottom:20px;}
.tl-card-hd{display:flex;align-items:center;gap:13px;margin-bottom:6px;}
.tl-card-hd .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;}
.tl-card-hd .ic.usb{background:#cffafe;color:#0e7490;}
.tl-card-hd .ic.boot{background:#ede9fe;color:#6d28d9;}
.tl-card-hd h2{font-size:20px;font-weight:900;letter-spacing:-.03em;}
.tl-lead{font-size:14px;line-height:1.65;color:var(--sub,#64748b);margin:4px 0 18px;}

.tl-steps{display:grid;gap:12px;margin-bottom:20px;}
.tl-step{display:flex;gap:13px;align-items:flex-start;}
.tl-step-n{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#0891b2;}
.tl-step.b .tl-step-n{background:#6d28d9;}
.tl-step-tx{font-size:14px;line-height:1.6;padding-top:3px;}
.tl-step-tx b{color:#0e7490;}
.tl-step.b .tl-step-tx b{color:#6d28d9;}
.tl-step-tx small{display:block;color:var(--sub,#64748b);font-size:12.5px;margin-top:3px;line-height:1.55;}

.tl-dl{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:12px;
  border:none;cursor:pointer;text-decoration:none;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#0891b2,#06b6d4);box-shadow:0 6px 18px rgba(8,145,178,.32);transition:.18s;}
.tl-dl:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,145,178,.42);}
.tl-dl.boot{background:linear-gradient(135deg,#6366f1,#818cf8);box-shadow:0 6px 18px rgba(99,102,241,.3);}
.tl-dl.disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed;pointer-events:none;}
.tl-dl-sub{font-size:12.5px;color:var(--mut,#94a3b8);margin-top:10px;}

.tl-warn{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:13px 15px;border-radius:11px;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;line-height:1.55;}
.tl-note{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:13px 15px;border-radius:11px;
  background:#f0fdfa;border:1px solid #99f6e4;color:#115e59;font-size:13px;line-height:1.55;}

.tl-common{background:#f8fafc;border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:20px 22px;}
.tl-common h3{font-size:15px;font-weight:800;margin-bottom:11px;}
.tl-common ul{list-style:none;display:grid;gap:9px;margin:0;padding:0;}
.tl-common li{font-size:13px;line-height:1.55;color:#374151;}
.tl-common li b{color:#0e7490;}