/* LCHENTER 공통 스타일. 단일 밝은 테마, 시스템 글꼴, 장식 없음. */
:root {
    --text: #1b1f24;
    --muted: #5c6670;
    --border: #d9dee3;
    --bg: #ffffff;
    --bg-soft: #f4f6f8;
    --link: #0b57d0;
    --primary: #0b57d0;
    --primary-text: #ffffff;
    --danger: #b3261e;
    --focus: #0b57d0;
    --radius: 4px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
p { margin: 0 0 0.75rem; }
code { background: var(--bg-soft); padding: 0 0.3em; border-radius: var(--radius); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--primary); color: #fff; padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

.container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
main.container { padding-top: 1.25rem; padding-bottom: 2rem; min-height: 60vh; }

.nav { border-bottom: 1px solid var(--border); background: var(--bg); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.nav-brand { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.nav-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--text); }
.footer { border-top: 1px solid var(--border); padding: 1rem 16px; color: var(--muted); font-size: 0.875rem; }

.badge { display: inline-block; min-width: 1.25em; padding: 0 0.4em; border-radius: 1em; background: var(--primary); color: #fff; font-size: 0.75rem; text-align: center; line-height: 1.5; }
.badge-muted { background: var(--muted); }
.muted { color: var(--muted); }
.num { text-align: right; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.page-head h1 { margin: 0; }
.crumb { font-size: 0.875rem; margin-bottom: 0.25rem; }

table.list { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
table.list th, table.list td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.list th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
table.list tr.unread td { font-weight: 600; }

.btn { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--bg-soft); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover { filter: brightness(0.95); background: var(--primary); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.link-button { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.inline { display: inline; }
.actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }

.alert { padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--bg-soft); }
.alert-success { border-left-color: #1e7e34; }
.alert-error, .alert-danger { border-left-color: var(--danger); }
.notice-box { padding: 0.8rem 1rem; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--bg-soft); margin: 0.75rem 0 1rem; }
.notice-box p:last-child { margin-bottom: 0; }

.form .field { margin-bottom: 1rem; }
.form label, .form .label, form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    width: 100%; max-width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: var(--bg); color: var(--text);
}
textarea { resize: vertical; }
.form-inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.form-inline input, .form-inline select { width: auto; flex: 1 1 200px; }
.errorlist { color: var(--danger); margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.helptext { color: var(--muted); font-size: 0.85rem; }

.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }

.post .meta, .comment .meta, .chat .meta { color: var(--muted); font-size: 0.875rem; }
.post-body { padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
/* 질문 답변(마크다운) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 0.75rem; }
.md h3, .md h4, .md h5, .md h6 { margin: 1.1rem 0 0.4rem; line-height: 1.4; }
.md h3 { font-size: 1.1rem; }
.md h4, .md h5, .md h6 { font-size: 1rem; }
.md ul, .md ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.md li > ul, .md li > ol { margin: 0.2rem 0 0; }
.md li { margin: 0.15rem 0; }
.md blockquote { margin: 0 0 0.75rem; padding: 0.1rem 0 0.1rem 0.8rem; border-left: 3px solid var(--border); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.md code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; background: var(--bg-soft); padding: 0.05rem 0.25rem; border-radius: var(--radius); }
.md pre { background: var(--bg-soft); padding: 0.6rem 0.75rem; border-radius: var(--radius); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md .md-table { overflow-x: auto; margin: 0 0 0.75rem; }
.md table { border-collapse: collapse; font-size: 0.95rem; }
.md th, .md td { border: 1px solid var(--border); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
.md th { background: var(--bg-soft); font-weight: 600; }
.attachments { list-style: none; padding: 0; margin: 0.5rem 0; }
.attachments li { margin-bottom: 0.4rem; }
.attachments img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.comments { margin-top: 1.5rem; }
.comment { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.comment-form { margin-top: 1rem; }
.comment-form textarea { margin-bottom: 0.5rem; }

.chat { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.chat-msg { max-width: 80%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; background: #e8f0fe; border-color: #c6d8f8; }
.chat-msg img { max-width: 100%; height: auto; display: block; margin-top: 0.25rem; }

.pagination { display: flex; gap: 1rem; align-items: center; margin: 0.5rem 0 1rem; }
.narrow { max-width: 480px; }
.narrow form { margin-bottom: 1rem; }
.narrow form > div, .narrow form p { margin-bottom: 0.75rem; }
.narrow button, .narrow a.button { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--primary); color: #fff; font: inherit; cursor: pointer; }
.narrow button.secondary { background: var(--bg); color: var(--text); border-color: var(--border); }

/* 하단 탭 막대: 휴대폰 폭에서만 보인다. */
.tabbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 600px) {
    /* 상단: 이름 + 관리·로그아웃만 남기고 주 메뉴는 하단 탭으로 옮긴다. */
    .nav { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
    .nav-inner { height: 48px; flex-wrap: nowrap; }
    .nav-links { gap: 0.9rem; flex-wrap: nowrap; font-size: 0.9rem; }
    .nav-links .nav-main { display: none; }
    .container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
    main.container { padding-top: 1rem; }

    .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
    .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--muted); font-size: 0.7rem; text-decoration: none; }
    .tabbar a[aria-current="page"] { color: var(--primary); }
    .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 1.15rem; padding: 0 0.3rem; border-radius: 1rem; background: var(--primary); color: #fff; font-size: 0.65rem; font-weight: 600; line-height: 1.15rem; text-align: center; }
    .tab-badge-muted { background: var(--muted); }
    body:has(.tabbar) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body:has(.tabbar) .footer { display: none; }

    h1 { font-size: 1.3rem; }
    .page-head { flex-wrap: wrap; }

    /* 손가락으로 누르기 쉬운 크기(44px). 입력창 16px은 아이폰이 확대하지 않게 한다. */
    .btn, .narrow button, .narrow a.button { min-height: 44px; padding: 0.6rem 1rem; display: inline-flex; align-items: center; justify-content: center; }
    .btn-small { min-height: 36px; padding: 0.35rem 0.75rem; }
    input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea, select { font-size: 16px; padding: 0.7rem 0.75rem; }
    .actions { gap: 0.6rem; }
    .actions .btn-primary { flex: 1 1 auto; }
    .narrow button[type="submit"] { width: 100%; }
    .form-inline input, .form-inline select { flex: 1 1 100%; }

    /* 목록 표: 첫 칸을 제목 줄로, 나머지 칸을 그 아래 작은 글씨로 보여 준다. */
    table.list thead { display: none; }
    table.list, table.list tbody { display: block; }
    table.list tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
    table.list td { display: block; padding: 0; border: 0; }
    table.list td:first-child { flex: 1 1 100%; font-size: 1rem; }
    table.list td:not(:first-child) { font-size: 0.82rem; color: var(--muted); }
    table.list td.num::before { content: "글 "; }
    table.list td[colspan] { flex: 1 1 100%; }

    .chat-msg { max-width: 88%; }
    .card { padding: 0.9rem; }
    .kv { grid-template-columns: 1fr; gap: 0 0; }
    .kv dd { margin-bottom: 0.5rem; }
}

/* 청년정책 상담(apps.youth). 상담 말풍선과 사업 카드. */
.yc-notice { font-size: 0.875rem; margin-bottom: 0.75rem; }
.yc-messages { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0 1rem; }
.yc-msg { max-width: 92%; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 12px; }
.yc-user { align-self: flex-end; background: var(--bg-soft); white-space: pre-wrap; }
.yc-bot { align-self: flex-start; background: var(--bg); }
.yc-bot .md > :last-child { margin-bottom: 0; }
.yc-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.yc-error { border-color: var(--danger); color: var(--danger); }
.yc-cards { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.yc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; font-size: 0.9rem; background: var(--bg); }
.yc-card h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.yc-tag { display: inline-block; margin-left: 0.35em; padding: 0 0.45em; border: 1px solid var(--border); border-radius: 1em; color: var(--muted); font-size: 0.75rem; font-weight: 400; vertical-align: middle; }
.yc-card dl { margin: 0; }
.yc-card dt { color: var(--muted); font-size: 0.8rem; }
.yc-card dd { margin: 0 0 0.35rem; white-space: pre-wrap; }
.yc-card dd:last-child { margin-bottom: 0; }
.yc-input { display: flex; gap: 0.5rem; align-items: flex-end; position: sticky; bottom: 0; padding: 0.5rem 0; background: var(--bg); }
.yc-input button { white-space: nowrap; }
.yc-input textarea { flex: 1 1 auto; min-height: 44px; resize: vertical; font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); }
.yc-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.yc-credit { margin: 2rem 0 0.5rem; color: var(--muted); font-size: 0.8rem; text-align: center; }
.yc-cover td.empty { color: var(--danger); }

@media (max-width: 600px) {
    .yc-msg { max-width: 96%; }
    .yc-input { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .yc-input button { min-height: 44px; white-space: nowrap; }
}

/* 첫 화면(랜딩). 위쪽 바로 가기 단추 두 개. */
.landing-actions { margin: 0 0 1.25rem; }
.landing-actions .btn { flex: 1 1 200px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.landing .card .btn { margin-top: 0.25rem; }
/* 랜딩 단추: 평소 연파란색, 마우스를 올리면 원래 색(도우미는 진한 파랑, 커뮤니티는 흰 바탕). */
.landing .btn { background: #e8f0fe; border-color: #c6d8f8; color: var(--primary); }
.landing .btn.btn-primary:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-text); filter: none; }
.landing .btn:not(.btn-primary):hover { background: var(--bg); border-color: var(--border); color: var(--text); }