/* manual.css */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f6fa;color:#1a1a2e;font-size:15px;min-height:100vh;}

/* 앱 헤더 (웹뷰용) */
.app-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-bottom:1px solid #e8e8f0;position:sticky;top:0;z-index:10;}
.app-header h1{font-size:17px;font-weight:700;flex:1;}
.btn-back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;color:#555;font-size:20px;padding:0;}
.btn-back:active{opacity:.6;}

/* 화면 전환 */
.screen{display:none;min-height:calc(100vh - 53px);}
.screen.active{display:block;}

/* 카테고리 필터 */
.cat-filter{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid #f0f0f8;}
.cat-filter::-webkit-scrollbar{display:none;}
.cat-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1.5px solid #e0e0ee;background:#fff;font-size:13px;font-weight:600;color:#666;cursor:pointer;transition:all .15s;}
.cat-pill.active{background:#4A90D9;border-color:#4A90D9;color:#fff;}
.cat-pill:active{opacity:.7;}

/* 카드 목록 (웹뷰) */
.manual-group{margin:12px;}
.group-title{font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.6px;padding:8px 4px 4px;}
.manual-card{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;border:1px solid #ebebf5;display:flex;align-items:center;gap:12px;transition:box-shadow .15s;}
.manual-card:active{box-shadow:0 0 0 2px #4A90D9;background:#f0f6ff;}
.manual-icon{width:40px;height:40px;border-radius:10px;background:#eef4ff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.manual-info{flex:1;min-width:0;}
.manual-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
.manual-meta{font-size:12px;color:#aaa;}
.manual-arrow{color:#c0c0d0;font-size:16px;}

.empty-state{text-align:center;padding:60px 20px;color:#aaa;}
.empty-state .icon{font-size:48px;margin-bottom:16px;}
.loading{text-align:center;padding:40px;color:#aaa;font-size:14px;}
.error-msg{margin:16px;padding:14px;background:#fff3f3;border-radius:10px;color:#c0392b;font-size:14px;border:1px solid #fcd4d4;}

/* 상세 화면 (웹뷰) */
#screen-detail{background:#fff;}
.detail-top{padding:20px 20px 16px;border-bottom:1px solid #f0f0f8;}
.detail-cat-badge{display:inline-block;padding:3px 10px;border-radius:20px;background:#eef4ff;color:#4A90D9;font-size:11px;font-weight:700;margin-bottom:10px;}
.detail-title{font-size:20px;font-weight:800;line-height:1.4;color:#1a1a2e;margin-bottom:8px;}
.detail-meta{font-size:12px;color:#bbb;display:flex;gap:12px;}

/* Markdown */
.md-body{padding:20px;line-height:1.8;font-size:15px;color:#2c2c3e;}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{font-weight:700;margin:24px 0 10px;line-height:1.4;}
.md-body h1{font-size:22px;color:#1a1a2e;}
.md-body h2{font-size:18px;color:#1a1a2e;padding-bottom:6px;border-bottom:2px solid #f0f0f8;}
.md-body h3{font-size:16px;color:#333;}
.md-body h4{font-size:15px;color:#555;}
.md-body p{margin:10px 0;}
.md-body ul,.md-body ol{margin:10px 0 10px 22px;}
.md-body li{margin:4px 0;}
.md-body code{background:#f4f4f9;padding:2px 6px;border-radius:5px;font-family:'Courier New',monospace;font-size:13px;color:#e74c3c;}
.md-body pre{background:#f4f4f9;border-radius:10px;padding:16px;overflow-x:auto;margin:14px 0;}
.md-body pre code{background:none;padding:0;color:#333;font-size:13px;}
.md-body blockquote{border-left:4px solid #4A90D9;margin:14px 0;padding:10px 16px;background:#f0f6ff;border-radius:0 8px 8px 0;color:#555;}
.md-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.md-body th{background:#f0f4ff;padding:10px 12px;text-align:left;font-weight:700;border-bottom:2px solid #d8e5ff;}
.md-body td{padding:9px 12px;border-bottom:1px solid #f0f0f8;}
.md-body tr:last-child td{border-bottom:none;}
.md-body img{max-width:100%;border-radius:8px;margin:8px 0;}
.md-body hr{border:none;border-top:2px solid #f0f0f8;margin:20px 0;}
.md-body a{color:#4A90D9;text-decoration:none;}
.md-body strong{font-weight:700;}
.md-body em{font-style:italic;}

/* 웹 전용 요소 — 기본 숨김 */
.page-hero{display:none;}
.web-back{display:none;}

/* ── 웹뷰 모드 ── */
body.webview-mode nav,
body.webview-mode footer{display:none!important;}

/* ── 웹 모드 (브라우저 접속) ── */
body.web-mode{font-family:'Noto Sans KR',sans-serif;background:#F8FAFB;}

body.web-mode .app-header{display:none!important;}
body.web-mode .screen{min-height:0;}
body.web-mode .screen.active{display:block;}

/* 페이지 히어로 */
body.web-mode .page-hero{
  display:block;
  background:linear-gradient(135deg,#EEF5FF 0%,#E8F4F8 100%);
  border-bottom:1px solid #D8EAF5;
  padding:44px 24px 36px;
}
.hero-inner{max-width:900px;margin:0 auto;}
.hero-inner h1{font-size:30px;font-weight:800;color:#1F3864;margin-bottom:10px;letter-spacing:-.5px;}
.hero-inner p{font-size:16px;color:#546E7A;line-height:1.6;}

/* 목록 화면 — PC */
body.web-mode #screen-list.active{
  max-width:900px;
  margin:0 auto;
  padding:36px 24px 80px;
}

/* 카테고리 필터 — PC */
body.web-mode .cat-filter{
  background:transparent!important;
  border:none!important;
  padding:0 0 28px!important;
  overflow:visible!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
body.web-mode .cat-pill{
  flex-shrink:1!important;
  padding:8px 18px!important;
  font-size:14px!important;
  border:1.5px solid #D8E8F5!important;
  background:#fff!important;
  color:#546E7A!important;
  font-weight:600!important;
  border-radius:24px!important;
  box-shadow:0 1px 4px rgba(43,122,158,.06)!important;
}
body.web-mode .cat-pill.active{
  background:#2B7A9E!important;
  border-color:#2B7A9E!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(43,122,158,.25)!important;
}
body.web-mode .cat-pill:hover{
  border-color:#2B7A9E!important;
  color:#2B7A9E!important;
}
body.web-mode .cat-pill.active:hover{color:#fff!important;}

/* 카드 그룹 — 2열 그리드 */
body.web-mode .manual-group{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:0 0 32px;
}
body.web-mode .group-title{
  grid-column:1/-1;
  font-size:11px;
  font-weight:700;
  color:#90A4AE;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 0 2px;
}
body.web-mode .manual-card{
  flex-direction:column;
  align-items:flex-start;
  padding:22px 22px 18px;
  border-radius:14px;
  box-shadow:0 2px 16px rgba(43,122,158,.09);
  border:1.5px solid #E8F0F8;
  background:#fff;
  gap:8px;
  margin-bottom:0;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
body.web-mode .manual-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 28px rgba(43,122,158,.16);
  border-color:#4A90D9;
}
body.web-mode .manual-icon{
  width:46px;height:46px;font-size:22px;
  border-radius:12px;background:#EEF5FF;
  margin-bottom:2px;
}
body.web-mode .manual-info{min-width:0;width:100%;}
body.web-mode .manual-title{
  font-size:16px;font-weight:700;color:#1A2332;
  white-space:normal;overflow:visible;text-overflow:clip;
  margin-bottom:6px;line-height:1.4;
}
body.web-mode .manual-meta{font-size:13px;color:#90A4AE;}
body.web-mode .manual-arrow{display:none;}

/* 상세 화면 — PC */
body.web-mode #screen-detail{background:#F8FAFB;}
body.web-mode #screen-detail.active{
  max-width:760px;
  margin:0 auto;
  padding:36px 24px 80px;
}
body.web-mode .web-back{
  display:block;
  margin-bottom:24px;
}
body.web-mode .web-back a{
  color:#2B7A9E;text-decoration:none;
  font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
body.web-mode .web-back a:hover{text-decoration:underline;}
body.web-mode .detail-top{
  background:#fff;border-radius:16px;
  padding:28px 28px 22px;
  border-bottom:none;
  margin-bottom:20px;
  box-shadow:0 2px 16px rgba(43,122,158,.08);
  border:1.5px solid #E8F0F8;
}
body.web-mode .detail-cat-badge{font-size:12px;padding:4px 12px;}
body.web-mode .detail-title{font-size:26px;font-weight:800;color:#1A2332;line-height:1.35;}
body.web-mode .detail-meta{font-size:13px;color:#90A4AE;}
body.web-mode .md-body{
  background:#fff;border-radius:16px;
  padding:28px 28px;
  font-size:16px;line-height:1.85;
  box-shadow:0 2px 16px rgba(43,122,158,.06);
  border:1.5px solid #E8F0F8;
}
body.web-mode .md-body h2{border-bottom-color:#E8F0F8;}

/* 반응형: 2열 → 1열 */
@media(max-width:640px){
  body.web-mode .manual-group{grid-template-columns:1fr;}
  body.web-mode .hero-inner h1{font-size:24px;}
}