/* Copilot 활용 가이드 — Microsoft 테마 */
:root {
    --cp-blue: #0078d4;
    --cp-deep: #103a6b;
    --cp-purple: #8661c5;
    --cp-teal: #00b7c3;
    --cp-ink: #16233a;
    --cp-body: #4a5568;
    --cp-line: #e4e9f2;
    --cp-soft: #f5f8fc;
}

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

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fff;
    color: var(--cp-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

/* ===== NAV ===== */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cp-line);
}
.nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo {
    display: flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 1.02rem; color: var(--cp-ink); text-decoration: none;
}
.nav-logo img { height: 26px; }
.nav-links { display: flex; gap: 6px; }
.nav-links a {
    font-size: .84rem; font-weight: 600; color: #6b7a90; text-decoration: none;
    padding: 7px 13px; border-radius: 8px; transition: .2s; white-space: nowrap;
}
.nav-links a:hover { background: var(--cp-soft); color: var(--cp-blue); }

/* ===== HERO ===== */
.hero {
    position: relative; overflow: hidden;
    padding: 140px 24px 96px;
    background: linear-gradient(135deg, #0b2545 0%, #10386b 42%, #6a4ca8 100%);
    color: #fff; text-align: center;
}
.hero::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(680px circle at 18% 12%, rgba(0,183,195,.28), transparent 58%),
        radial-gradient(560px circle at 84% 78%, rgba(134,97,197,.42), transparent 60%);
}
.hero-content { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
    padding: 8px 18px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 26px;
}
.hero h1 {
    font-size: clamp(2rem, 5.2vw, 3.3rem); font-weight: 800;
    line-height: 1.28; letter-spacing: -.02em; margin-bottom: 22px;
}
.hero h1 .accent {
    background: linear-gradient(100deg, #7cd4ff, #b79cff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: clamp(.95rem, 2vw, 1.08rem); color: rgba(255,255,255,.86); line-height: 1.85; }

.hero-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px;
}
.hstat {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px; padding: 16px 26px; min-width: 150px;
}
.hstat b { display: block; font-size: 1.6rem; font-weight: 800; color: #7cd4ff; line-height: 1.2; }
.hstat span { font-size: .78rem; color: rgba(255,255,255,.78); }

/* ===== SECTION ===== */
.s { padding: 88px 24px; }
.s-alt { background: var(--cp-soft); }
.s-inner { max-width: 1040px; margin: 0 auto; }
.s-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cp-blue); background: rgba(0,120,212,.09);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.s-title {
    font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 800; color: var(--cp-ink);
    line-height: 1.35; letter-spacing: -.02em; margin-bottom: 18px;
}
.s-title .hl {
    background: linear-gradient(180deg, transparent 62%, rgba(0,183,195,.32) 62%);
    padding: 0 3px;
}
.s-desc { font-size: 1rem; color: var(--cp-body); line-height: 1.9; max-width: 780px; margin-bottom: 40px; }
.s-desc strong { color: var(--cp-ink); font-weight: 700; }

/* ===== 오해 vs 실제 ===== */
.myth {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch;
    margin-bottom: 18px;
}
.myth-box { border-radius: 16px; padding: 24px 26px; border: 1px solid var(--cp-line); background: #fff; }
.myth-box.no { border-color: #f0d4d4; background: #fdf6f6; }
.myth-box.yes { border-color: #c9e6f5; background: #f2fafd; }
.myth-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 800; padding: 4px 11px; border-radius: 20px; margin-bottom: 12px;
}
.myth-box.no .myth-tag { background: #fbe3e3; color: #c0392b; }
.myth-box.yes .myth-tag { background: #d6eefa; color: #0a6ba8; }
.myth-box h4 { font-size: 1rem; font-weight: 700; color: var(--cp-ink); margin-bottom: 8px; line-height: 1.5; }
.myth-box p { font-size: .89rem; line-height: 1.8; }
.myth-arrow { display: flex; align-items: center; color: var(--cp-blue); font-size: 1.6rem; }

/* ===== 앱별 카드 ===== */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.app {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 18px;
    padding: 26px 24px; transition: .28s;
}
.app:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(16,58,107,.12); border-color: #cfe0f2; }
.app-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.app-ico {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff;
}
.ico-teams { background: linear-gradient(135deg,#5558af,#7b83eb); }
.ico-outlook { background: linear-gradient(135deg,#0a66c2,#28a8ea); }
.ico-excel { background: linear-gradient(135deg,#107c41,#21a366); }
.ico-ppt { background: linear-gradient(135deg,#c43e1c,#ed6c47); }
.ico-word { background: linear-gradient(135deg,#185abd,#2b7cd3); }
.ico-loop { background: linear-gradient(135deg,#6b48b3,#8661c5); }
.app-top h3 { font-size: 1.03rem; font-weight: 800; color: var(--cp-ink); line-height: 1.3; }
.app-top .cat { font-size: .74rem; color: #8a97ab; font-weight: 600; }
.app > p { font-size: .88rem; line-height: 1.8; margin-bottom: 14px; }
.app-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.app-list li { font-size: .85rem; line-height: 1.65; padding-left: 22px; position: relative; color: #55637a; }
.app-list li::before {
    content: '\ea6c'; font-family: 'remixicon'; position: absolute; left: 0; top: 1px;
    color: var(--cp-teal); font-size: .95rem;
}

/* ===== 프롬프트 박스 ===== */
.prompt {
    margin-top: 14px; background: #0f1e33; border-radius: 12px; padding: 15px 17px;
    position: relative; border-left: 3px solid var(--cp-teal);
}
.prompt-lab {
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #7cd4ff; display: block; margin-bottom: 7px;
}
.prompt p { font-size: .84rem; line-height: 1.75; color: #dbe6f5; font-family: inherit; }

/* ===== 직무 시나리오 ===== */
.case { background: #fff; border: 1px solid var(--cp-line); border-radius: 18px; overflow: hidden; margin-bottom: 22px; }
.case-head {
    display: flex; align-items: center; gap: 12px; padding: 18px 24px;
    background: linear-gradient(100deg, #103a6b, #2a5ea3); color: #fff;
}
.case-head i { font-size: 1.3rem; }
.case-head h3 { font-size: 1.02rem; font-weight: 800; }
.case-head .role { margin-left: auto; font-size: .74rem; background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 20px; font-weight: 700; }
.case-body { padding: 24px; }
.case-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.flow-side h5 {
    font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.flow-side.before h5 { color: #b4432c; }
.flow-side.after h5 { color: #0a7d55; }
.flow-side ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.flow-side li { font-size: .86rem; line-height: 1.7; padding: 11px 14px; border-radius: 10px; }
.flow-side.before li { background: #fdf4f2; color: #7a4034; }
.flow-side.after li { background: #f0faf5; color: #24634b; }
.case-gain {
    margin-top: 18px; padding: 14px 18px; border-radius: 12px;
    background: linear-gradient(100deg, rgba(0,183,195,.1), rgba(134,97,197,.1));
    font-size: .88rem; color: var(--cp-ink); font-weight: 600;
    display: flex; align-items: center; gap: 9px;
}
.case-gain i { color: var(--cp-teal); font-size: 1.1rem; }

/* ===== 단계별 스텝 ===== */
.steps { position: relative; padding-left: 8px; }
.step { display: flex; gap: 22px; position: relative; padding-bottom: 34px; }
.step:last-child { padding-bottom: 0; }
.step::before {
    content: ''; position: absolute; left: 25px; top: 54px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, #cfe0f2, rgba(207,224,242,.25));
}
.step:last-child::before { display: none; }
.step-num {
    width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0; z-index: 1;
    background: linear-gradient(135deg, var(--cp-blue), var(--cp-purple));
    color: #fff; font-weight: 800; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,120,212,.26);
}
.step-body { flex: 1; padding-top: 3px; min-width: 0; }
.step-body h3 {
    font-size: 1.12rem; font-weight: 800; color: var(--cp-ink);
    margin-bottom: 5px; line-height: 1.45;
}
.step-time {
    display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700;
    color: var(--cp-teal); background: rgba(0,183,195,.1);
    padding: 3px 10px; border-radius: 20px; margin-bottom: 11px;
}
.step-body > p { font-size: .92rem; line-height: 1.85; margin-bottom: 13px; }
.step-body > p strong { color: var(--cp-ink); font-weight: 700; }
.ui-path {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    background: var(--cp-soft); border: 1px solid var(--cp-line);
    border-radius: 10px; padding: 11px 15px; margin-bottom: 13px;
    font-size: .84rem; font-weight: 600; color: var(--cp-ink);
}
.ui-path i { color: #a9b6c8; font-size: .8rem; }
.ui-path .k {
    background: #fff; border: 1px solid #d8e3f0; border-radius: 6px;
    padding: 3px 9px; font-size: .8rem; color: var(--cp-blue); font-weight: 700;
}
.tip {
    background: #fffdf4; border: 1px solid #f3e6c4; border-radius: 11px;
    padding: 13px 16px; font-size: .85rem; line-height: 1.75; color: #6b5b2e;
    display: flex; gap: 10px; align-items: flex-start;
}
.tip i { color: #d9a441; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.tip strong { color: #4d411f; font-weight: 700; }

/* ===== 스크린샷 ===== */
.shot { margin: 16px 0; }
.shot img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--cp-line); border-radius: 13px;
    box-shadow: 0 10px 30px rgba(16,58,107,.1);
    background: #fff;
}
.shot figcaption {
    margin-top: 10px; font-size: .8rem; color: #8a97ab; line-height: 1.65;
    display: flex; align-items: flex-start; gap: 7px;
}
.shot figcaption i { color: var(--cp-blue); font-size: .9rem; flex-shrink: 0; margin-top: 2px; }
.shot-lead { max-width: 780px; margin: 0 auto 40px; }

/* ===== 프롬프트 공식 ===== */
.formula { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 30px; }
.fm {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 14px; padding: 20px 18px; text-align: center;
}
.fm .n {
    width: 34px; height: 34px; margin: 0 auto 11px; border-radius: 10px;
    background: linear-gradient(135deg, var(--cp-blue), var(--cp-purple));
    color: #fff; font-weight: 800; font-size: .92rem;
    display: flex; align-items: center; justify-content: center;
}
.fm h4 { font-size: .95rem; font-weight: 800; color: var(--cp-ink); margin-bottom: 6px; }
.fm p { font-size: .82rem; line-height: 1.7; }

/* ===== 표 ===== */
.tbl-wrap { background: #fff; border: 1px solid var(--cp-line); border-radius: 16px; padding: 24px; overflow-x: auto; }
.tbl-wrap h3 { font-size: 1.02rem; font-weight: 800; color: var(--cp-ink); margin-bottom: 16px; }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.tbl th {
    background: var(--cp-soft); font-size: .78rem; font-weight: 800; color: var(--cp-ink);
    padding: 12px 14px; text-align: left; border-bottom: 2px solid var(--cp-line); white-space: nowrap;
}
.tbl td { padding: 13px 14px; font-size: .86rem; border-bottom: 1px solid #eef2f7; line-height: 1.65; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #fafcfe; }
.tbl .lbl { font-weight: 700; color: var(--cp-ink); }
.tag-g { background: #e3f6ec; color: #0a7d55; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.tag-b { background: #e2f0fb; color: #0a6ba8; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.tag-y { background: #fdf3dc; color: #97650a; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.tag-r { background: #fce8e6; color: #b4432c; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; }

/* ===== 인사이트 ===== */
.insight {
    background: linear-gradient(100deg, rgba(0,120,212,.07), rgba(134,97,197,.07));
    border-left: 4px solid var(--cp-blue); border-radius: 0 14px 14px 0;
    padding: 22px 26px; margin-top: 26px;
}
.insight h4 {
    font-size: .95rem; font-weight: 800; color: var(--cp-ink); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.insight h4 i { color: var(--cp-blue); }
.insight p { font-size: .9rem; line-height: 1.85; }
.insight strong { color: var(--cp-ink); font-weight: 700; }

/* ===== 체크리스트 ===== */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.check {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 14px; padding: 20px 22px;
    display: flex; gap: 14px; align-items: flex-start;
}
.check i { color: var(--cp-blue); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.check h4 { font-size: .94rem; font-weight: 700; color: var(--cp-ink); margin-bottom: 5px; }
.check p { font-size: .85rem; line-height: 1.75; }

/* ===== 하단 ===== */
.ch-nav {
    max-width: 1040px; margin: 0 auto; padding: 26px 24px 44px;
    display: flex; align-items: center; gap: 16px;
}
.ch-nav .spacer { flex: 1; }
.ch-nav a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .88rem; font-weight: 700; color: var(--cp-blue); text-decoration: none;
    padding: 11px 20px; border: 1px solid #cfe0f2; border-radius: 10px; transition: .2s;
}
.ch-nav a:hover { background: var(--cp-blue); color: #fff; border-color: var(--cp-blue); }
.source-bar { background: var(--cp-soft); border-top: 1px solid var(--cp-line); padding: 24px; text-align: center; }
.source-bar p { font-size: .8rem; color: #8a97ab; line-height: 1.75; max-width: 800px; margin: 0 auto; }
.source-bar a { color: var(--cp-blue); text-decoration: none; }
.source-bar a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .myth { grid-template-columns: 1fr; }
    .myth-arrow { transform: rotate(90deg); justify-content: center; }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero { padding: 108px 20px 66px; }
    .s { padding: 60px 20px; }
    .app-grid, .checks { grid-template-columns: 1fr; }
    .case-flow { grid-template-columns: 1fr; }
    .tbl-wrap { padding: 16px; }
    .ch-nav { flex-wrap: wrap; }
}