/* ========================================================================
   common-guide.css — 활용 가이드 공통 스타일 (v3 카드 카탈로그형)
   ----------------------------------------------------------------------
   메인 페이지(middle/index.html, high/index.html)에 EoGuide 모듈과 함께
   로드. .popup-overlay / .popup 기본 스타일은 메인 페이지에 정의된 것을
   상속해 사용한다.
======================================================================== */

.guide-popup{max-width:760px;width:92%;max-height:85vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.guide-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border,#e4e6f0);flex-shrink:0;gap:8px}
.guide-header .guide-title{margin:0;font-size:16px;font-weight:800;flex:1;text-align:center}
.guide-back{background:none;border:1px solid var(--border,#e4e6f0);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--dim,#7a7a9a);cursor:pointer;font-family:inherit;flex-shrink:0}
.guide-back:hover{border-color:var(--u1,#10b981);color:var(--u1,#10b981);background:var(--u1bg,#ecfdf5)}
.guide-x{background:none;border:none;font-size:22px;color:var(--dim,#7a7a9a);cursor:pointer;line-height:1;padding:4px 8px;flex-shrink:0;font-family:inherit}
.guide-x:hover{color:var(--text,#1a1a2e)}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px;overflow-y:auto}
.guide-grid[hidden],.guide-detail[hidden]{display:none !important}
.guide-card{background:#fff;border:1px solid var(--border,#e4e6f0);border-radius:14px;padding:18px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;font-family:inherit}
.guide-card:hover{box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.06));border-color:var(--u1,#10b981)}
.guide-card .gc-emoji{font-size:26px}
.guide-card .gc-title{font-size:14px;font-weight:700;color:var(--text,#1a1a2e);line-height:1.3}
.guide-card .gc-desc{font-size:11px;color:var(--dim,#7a7a9a);line-height:1.45}

.guide-detail{padding:18px 26px 24px;overflow-y:auto}
.guide-detail article h4{font-size:18px;font-weight:800;margin:0 0 6px;color:var(--text,#1a1a2e)}
.guide-detail .gd-lead{font-size:13px;color:var(--dim,#7a7a9a);margin-bottom:16px;line-height:1.6}
.guide-detail .gd-section{margin-bottom:14px}
.guide-detail .gd-section h5{font-size:13px;font-weight:700;color:var(--u1,#10b981);margin-bottom:5px}
.guide-detail .gd-section p{font-size:13px;line-height:1.7;color:#444}
.guide-detail .gd-list{font-size:13px;line-height:1.8;color:#444;padding-left:18px;margin:4px 0}
.guide-detail code{background:#f3f4f6;padding:1px 6px;border-radius:4px;font-size:12px;font-family:inherit;color:#0f766e}

.gd-compare{display:flex;gap:12px;margin-bottom:16px}
.gd-compare-col{flex:1;background:var(--u1bg,#ecfdf5);border:1px solid var(--u1lt,#d1fae5);border-radius:12px;padding:14px}
.gd-compare-col:nth-child(2){background:var(--u3bg,#f5f3ff);border-color:var(--u3lt,#ede9fe)}
.gd-compare-col .gcc-emoji{font-size:22px;margin-bottom:4px}
.gd-compare-col .gcc-title{font-size:14px;font-weight:800;margin-bottom:6px;color:var(--text,#1a1a2e)}
.gd-compare-col ul{font-size:12px;line-height:1.6;color:#444;padding-left:16px}
.gd-compare-col ul li{margin-bottom:3px}

.gd-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;background:#f9fafb;border:1px dashed var(--border,#e4e6f0);border-radius:10px;padding:12px;margin-bottom:16px}
.gd-flow .gf-step{font-size:12px;font-weight:600;background:#fff;border:1px solid var(--border,#e4e6f0);border-radius:8px;padding:6px 10px;color:var(--text,#1a1a2e);white-space:nowrap}
.gd-flow .gf-arrow{color:var(--dim,#7a7a9a);font-weight:700}

.gd-tip{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:10px 14px;font-size:12px;line-height:1.6;color:#78350f;margin-top:8px}

.gd-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:14px}
.gd-table th,.gd-table td{padding:8px 10px;border:1px solid var(--border,#e4e6f0);text-align:left;vertical-align:top}
.gd-table th{background:var(--u1bg,#ecfdf5);font-weight:700;color:var(--text,#1a1a2e)}
.gd-table td small{font-size:10px;color:var(--dim,#7a7a9a)}

.gd-faq{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f3f4f6}
.gd-faq:last-of-type{border-bottom:none}
.gd-faq strong{display:block;font-size:13px;color:var(--text,#1a1a2e);margin-bottom:4px}
.gd-faq p{font-size:12px;line-height:1.7;color:#555}
.gd-sep{border:none;border-top:1px solid var(--border,#e4e6f0);margin:14px 0}

@media(max-width:600px){
    .guide-popup{max-height:92vh}
    .guide-header{padding:12px 16px}
    .guide-header .guide-title{font-size:15px}
    .guide-grid{grid-template-columns:1fr;padding:16px;gap:10px}
    .guide-card{padding:14px}
    .guide-card .gc-emoji{font-size:24px}
    .guide-detail{padding:14px 16px 20px}
    .gd-compare{flex-direction:column}
    .gd-flow{padding:10px}
    .gd-flow .gf-step{font-size:11px;padding:5px 8px}
    .gd-table{font-size:11px}
    .gd-table th,.gd-table td{padding:6px 8px}
}