/* 쉬운AI 위키 — 디자인 A(카드 비교형) 기반 사이트 공통 스타일 */
:root{
  --desk:#6d5efc; --desk-soft:#eeecff; --desk-ink:#3a2fb0;
  --code:#0fb894; --code-soft:#e2f7f1; --code-ink:#0a7a63;
  --pink:#ff5a7a; --pink-soft:#ffeef2;
  --ink:#1a1a2e; --muted:#6b6b80; --line:#e9e9f2; --bg:#f6f6fb;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--desk);outline-offset:2px;border-radius:4px}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* ── 사이트 헤더 ── */
.siteHead{display:flex;align-items:center;gap:10px;padding:22px 0;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--desk),var(--code));display:grid;place-items:center;color:#fff;font-size:15px}
.logo small{font-size:12px;font-weight:600;color:var(--muted)}

/* ── 홈: 히어로 ── */
.hero{padding:52px 0 8px;text-align:center}
.hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--desk)}
.hero p{margin-top:14px;font-size:16px;color:var(--muted)}
.hero p b{color:var(--ink)}

/* ── 홈: 카테고리 칩 ── */
.cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0 36px}
.cats button{font-family:inherit;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:20px}
.cats button.cur{background:var(--desk);border-color:var(--desk);color:#fff}

/* ── 홈: 질문 카드 그리드 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding-bottom:70px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,26,46,.08)}
.card .top{display:flex;align-items:center;gap:8px}
.card .emo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.card .cat{font-size:12px;font-weight:700;padding:3px 10px;border-radius:8px}
.c-tool .emo{background:var(--desk-soft)} .c-tool .cat{background:var(--desk-soft);color:var(--desk-ink)}
.c-how .emo{background:var(--code-soft)} .c-how .cat{background:var(--code-soft);color:var(--code-ink)}
.c-rule .emo{background:var(--pink-soft)} .c-rule .cat{background:var(--pink-soft);color:#c03555}
.c-tip .emo{background:#fff6e0} .c-tip .cat{background:#fff6e0;color:#9a6b00}
.c-money .emo{background:#e2f6e9} .c-money .cat{background:#e2f6e9;color:#177245}
.card h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em;line-height:1.45}
.card .desc{font-size:14px;color:var(--muted);flex:1}
.card .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}
.card .meta .go{margin-left:auto;font-weight:700;color:var(--desk)}
.card.soon{opacity:.62}
.card.soon .meta .go{color:var(--muted);font-weight:600}

/* ── 작성일 고지 띠 (글 위아래) ── */
.factBand{background:var(--ink);color:#c9c9e0;text-align:center;font-size:12.5px;padding:10px 20px;line-height:1.55}
.factBand b{color:#8fe9d5;font-weight:800;margin-right:8px;white-space:nowrap}

/* ── 글: 상단 바 ── */
.artBar{position:sticky;top:0;z-index:20;background:rgba(246,246,251,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.artBar .in{max-width:920px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:12px;font-size:13.5px}
.artBar .back{font-weight:700;color:var(--desk)}
.artBar .crumb{color:var(--muted)}

/* ── 글 본문 ── */
.art{max-width:920px;margin:0 auto;padding:20px 24px 30px}
.artHero{text-align:center;padding:40px 0 8px}
.artHero .cat{display:inline-block;font-size:12.5px;font-weight:700;background:var(--desk-soft);color:var(--desk-ink);padding:4px 12px;border-radius:8px;margin-bottom:16px}
.art h1{font-size:clamp(24px,3.6vw,33px);font-weight:800;letter-spacing:-.02em;line-height:1.32}
.art h1 .vs{color:var(--pink)}
.art .sub{margin-top:14px;font-size:16.5px;color:var(--muted)}
.art .sub b{color:var(--ink)}
.oneline{max-width:720px;margin:30px auto 0;display:grid;grid-template-columns:1fr auto 1fr;gap:14px}
.oneline .ocard{border-radius:18px;padding:22px;text-align:center}
.oneline .ocard.desk{background:var(--desk-soft)}
.oneline .ocard.code{background:var(--code-soft)}
.oneline .emo2{font-size:36px}
.oneline .role{font-weight:800;margin-top:6px;font-size:17px}
.oneline .desk .role{color:var(--desk-ink)}
.oneline .code .role{color:var(--code-ink)}
.oneline .desc2{font-size:13.5px;color:var(--muted);margin-top:4px}
.oneline .mid{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--pink);font-size:19px}
.art section{padding:28px 0}
.art .kicker{font-size:13px;font-weight:700;color:var(--desk);letter-spacing:.04em;text-transform:uppercase}
.art h2{font-size:22px;font-weight:800;margin:6px 0 18px;letter-spacing:-.01em}
.premise{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.premise p{margin-bottom:10px;font-size:15px}
.premise p:last-child{margin-bottom:0}
.pill{display:inline-block;background:var(--desk-soft);color:var(--desk-ink);font-weight:700;font-size:13px;padding:2px 10px;border-radius:8px}
.diff{display:grid;gap:16px}
.diffcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.diffcard .dtop{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}
.num{width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.diffcard .dtop h3{font-size:17px;font-weight:800}
.cols{display:grid;grid-template-columns:1fr 1fr}
.col{padding:20px 22px}
.col.desk{background:linear-gradient(180deg,#faf9ff,#fff)}
.col.code{background:linear-gradient(180deg,#f5fdfb,#fff);border-left:1px solid var(--line)}
.col .h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-bottom:10px}
.col.desk .h{color:var(--desk-ink)}
.col.code .h{color:var(--code-ink)}
.col ul{list-style:none;display:grid;gap:8px}
.col li{font-size:14.5px;padding-left:22px;position:relative;color:#3a3a4d}
.col li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%}
.col.desk li::before{background:var(--desk)}
.col.code li::before{background:var(--code)}
.note2{margin-top:14px;font-size:12.5px;color:var(--muted);background:#fff8e6;border:1px solid #ffe9a8;border-radius:10px;padding:8px 12px}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mode{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.mode .mi{font-size:26px}
.mode .mt{font-weight:800;font-size:14px;margin-top:6px}
.mode .md{font-size:12px;color:var(--muted);margin-top:4px}
.mode.warn{border-color:#ffcdd6;background:#fff5f7}
.when{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.when .box{border-radius:16px;padding:22px}
.when .box.desk{background:var(--desk-soft)}
.when .box.code{background:var(--code-soft)}
.when h4{font-size:16px;font-weight:800;margin-bottom:10px}
.when .box.desk h4{color:var(--desk-ink)}
.when .box.code h4{color:var(--code-ink)}
.when ul{list-style:none;display:grid;gap:6px}
.when li{font-size:14px}
/* 글 공용: 말풍선 인용, 표, 스크린샷, 인라인 명령 */
.ask{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--desk);border-radius:12px;padding:14px 16px;margin:12px 0;font-size:14.5px;color:#3a3a4d}
.ask .who{flex:none;font-size:18px}
.tblWrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{white-space:nowrap}
.tbl th{background:var(--bg);font-weight:800;font-size:13px;padding:11px 14px;text-align:left}
.tbl td{padding:11px 14px;border-top:1px solid var(--line);color:#3a3a4d}
.tbl td b{color:var(--ink)}
.tbl tr.hl td{background:#fffaf0}
.shot{display:block;width:100%;border:1px solid var(--line);border-radius:12px;margin:14px 0}
.shotCap{font-size:12.5px;color:var(--muted);text-align:center;margin:-6px 0 14px}
code.k{background:var(--desk-soft);color:var(--desk-ink);border-radius:6px;padding:1px 8px;font-size:.92em;font-weight:700;font-family:ui-monospace,'SF Mono',Menlo,monospace}

.summary{background:var(--ink);color:#fff;border-radius:20px;padding:32px;text-align:center}
.summary h2{color:#fff}
.summary p{font-size:15.5px;color:#c9c9e0;max-width:640px;margin:0 auto}
.summary .big{font-size:18px;color:#fff;font-weight:700;margin-top:14px}
.summary .big em{color:#8fe9d5;font-style:normal}
.summary .big b{color:#b3aaff}

/* ── 글 하단: 다른 궁금증 카드 리스트 ── */
.nextZone{max-width:1040px;margin:0 auto;padding:16px 24px 60px;border-top:1px solid var(--line)}
.nextZone .head{display:flex;align-items:baseline;gap:12px;margin:26px 0 18px}
.nextZone .lab{font-size:17px;font-weight:800}
.nextZone .all{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--desk)}
.miniGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mini{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:9px;transition:transform .15s,box-shadow .15s}
a.mini:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,26,46,.07)}
.mini .top{display:flex;align-items:center;gap:7px}
.mini .emo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px}
.mini .cat{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:7px}
.mini h4{font-size:14.5px;font-weight:800;line-height:1.45}
.mini .meta{font-size:12px;color:var(--muted);margin-top:auto}
.mini.soon{opacity:.6}

/* ── 글 + 댓글 사이드 패널 레이아웃 ──
   넓은 화면(≥1671px): 본문이 화면 정중앙, 댓글은 본문 오른쪽에 고정
   중간(1081~1670px): 본문+댓글 묶음을 중앙 정렬(그리드)
   좁은 화면(≤1080px): 댓글이 본문 아래로 */
.pageGrid{position:relative;margin:0 auto;padding:0 24px}
.pageGrid .art{padding-left:0;padding-right:0;margin:0 auto}

/* ── 댓글 패널 (PC: 본문 우측, 배경과 한 몸 — 글자만 보이게)
   시작 위치는 제목 아래(300px), 스크롤하면 상단 60px에 스티키로 따라붙음 ── */
.cmtRail{position:absolute;top:630px;bottom:0;left:calc(50% + 486px);width:350px}
.cmtPanel{position:sticky;top:60px;display:flex;flex-direction:column;max-height:calc(100vh - 84px)}
.cmtPanel .head{flex:none;font-size:15px;font-weight:800;padding:0 4px 12px}
.cmtPanel .head span{color:var(--desk)}
.cmtScroll{overflow-y:auto;flex:1;padding:0 4px;min-height:120px}
.cmt .empty{font-size:13.5px;color:var(--muted);padding:16px 0;text-align:center}
.cmtItem{padding:10px 0;margin:0}
.cmtItem + .cmtItem{border-top:1px solid var(--line)}
.cmtItem .meta{display:flex;align-items:baseline;gap:7px;font-size:12.5px}
.cmtItem .nick{font-weight:800}
.cmtItem .time{color:var(--muted);font-size:11.5px}
.cmtItem .del{margin-left:auto;font-size:11.5px;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;padding:2px 4px}
.cmtItem .del:hover{color:#c03555}
.cmtItem .body{margin-top:4px;font-size:13.5px;color:#3a3a4d;white-space:pre-wrap;word-break:break-word;line-height:1.55}
.cmtForm{flex:none;padding:12px 4px}
.cmtForm .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmtForm input,.cmtForm textarea{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff;color:var(--ink);width:100%}
.cmtForm input:focus,.cmtForm textarea:focus{outline:2px solid var(--desk);outline-offset:0}
.cmtForm textarea{margin-top:8px;min-height:60px;resize:vertical}
.cmtForm .foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.cmtForm .hint{font-size:11.5px;color:var(--muted)}
.cmtForm button{margin-left:auto;font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--desk);border:none;border-radius:9px;padding:8px 16px;cursor:pointer}
.cmtForm button:hover{background:var(--desk-ink)}
.cmtForm button:disabled{opacity:.5;cursor:default}
.cmtMsg{font-size:12.5px;margin-top:6px}
.cmtMsg.err{color:#c03555}

/* 중간 화면: 본문+댓글 묶음을 중앙 정렬 (본문은 중앙에서 약간 왼쪽) */
@media(max-width:1670px){
  .pageGrid{max-width:1360px;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:26px;align-items:stretch}
  .pageGrid .art{width:100%;max-width:920px;justify-self:center;margin:0}
  .cmtRail{position:static;width:auto;padding-top:630px}
  .cmtPanel{position:sticky;top:60px}
}

/* 모바일/좁은 화면: 댓글이 본문 아래로 */
@media(max-width:1080px){
  .pageGrid{display:block}
  .cmtRail{padding-top:0}
  .cmtPanel{position:static;max-height:none;margin-top:10px;width:auto}
  .cmtScroll{overflow-y:visible;flex:none}
  .cmtForm .row{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.cmtForm .row{grid-template-columns:1fr}}

/* ── 푸터 ── */
footer{text-align:center;padding:30px 20px 50px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
footer .wrap{border-top:none}

@media(max-width:640px){
  /* 표 헤더: 아이콘을 윗줄로 분리하고 가운데 정렬 */
  .ith{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2px}
  .ith .ie{display:block;font-size:18px}
  .oneline{grid-template-columns:1fr}.oneline .mid{transform:rotate(90deg)}
  .cols{grid-template-columns:1fr}.col.code{border-left:none;border-top:1px solid var(--line)}
  .modes{grid-template-columns:1fr 1fr}
  .when{grid-template-columns:1fr}
}