/* IHLAB 포털 — 세련되고 심플하게(대표 11/11). 색·크기는 아래 변수만 바꾸면 전체가 바뀝니다. */
:root {
  --bg: #f7f7f6;
  --surface: #ffffff;
  --text: #1b1b1a;
  --muted: #6b6b67;
  --faint: #9a9a95;
  --line: #ececea;
  --line-strong: #dcdcd8;
  --ink: #1b1b1a;
  --hover: #f4f4f2;
  --ok: #2e6b47;
  --ok-soft: #edf5f0;
  --warn: #8a5a00;
  --warn-soft: #fbf4e6;
  --danger: #a3352a;
  --radius: 10px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 기준 글자 14px (rem 도 14px 기준) */
html { font-size: 14px; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 1rem; line-height: 1.6; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1 { font-size: 1.4rem; font-weight: 600; margin: 0 0 .35rem; letter-spacing: -0.02em; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .6rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .4rem; }
p { margin: .25rem 0; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center-text { text-align: center; padding: 3rem 1rem; }
.hidden { display: none !important; }
.row { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: .5rem; }

button, .btn {
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  padding: 0 .8rem; min-height: 34px; transition: background .15s, border-color .15s;
}
button:hover { background: var(--hover); }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover { background: #333331; }
button.link { border: none; background: none; color: var(--text); padding: .15rem .3rem; min-height: auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
button.link:hover { text-decoration-color: var(--text); background: none; }
button.danger { color: var(--danger); }
button:disabled { opacity: .45; cursor: default; }
input, textarea, select {
  font: inherit; border: 1px solid var(--line-strong); border-radius: 7px; padding: .5rem .65rem;
  background: #fff; color: var(--text); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(27, 27, 26, .08); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 첫 화면·로그인 */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.card.narrow { width: 100%; max-width: 380px; padding: 1.6rem 1.5rem; }
.brand { font-weight: 600; letter-spacing: .18em; color: var(--faint); font-size: .8rem; margin: 0 0 1rem; }
.pin { font-size: 1.4rem; letter-spacing: .5em; text-align: center; padding: .6rem; }
.card.narrow form button { width: 100%; min-height: 40px; }
.notice { border-radius: 7px; padding: .55rem .75rem; background: var(--warn-soft); color: var(--warn); font-size: .9rem; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
/* 빈 칸으로 보낼 때 그 자리에 뜨는 짧은 안내(입력하면 사라짐) */
.field-hint { margin: 0; font-size: .82rem; color: var(--danger); }
.field-hint[hidden] { display: none; }

/* 고객 포털 */
.top { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: .8rem 20px .7rem; }
.top .client { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.top .sub { color: var(--muted); font-size: .9rem; }
.top .small { color: var(--muted); margin-top: .35rem; }
.bar { height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: .35rem; }
.bar > span { display: block; height: 100%; background: var(--ink); width: 0; transition: width .3s; }
.layout { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; }
/* 칸이 내용 때문에 화면보다 넓어지지 않게(11/12 테스트: 390px 자료 목록에서 화면 전체가 옆으로 밀림) */
.layout > * { min-width: 0; }
.item-row .head > .name { min-width: 0; overflow-wrap: anywhere; }
.item-row .files { overflow-wrap: anywhere; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tabs { display: none; }

.checklist { padding: .4rem 0 .8rem; max-height: calc(100vh - 150px); overflow: auto; }
.group-title { font-size: .84rem; font-weight: 600; color: var(--faint); letter-spacing: .02em; padding: 1rem 1rem .35rem; }
.group-title:first-child { padding-top: .6rem; }
/* 지금 필요한 자료 / 다음 단계 자료(접힘) — 11/12 테스트 의견 */
.stage-title { font-size: .9rem; font-weight: 700; padding: .8rem 1rem 0; }
.stage-title + .group-title { padding-top: .45rem; }
.checklist button.later-toggle { display: block; width: calc(100% - 2.4rem); margin: 1rem 1.2rem .5rem; padding: .75rem 1rem; min-height: 44px; text-align: left; background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--link, var(--text)); font-size: .86rem; font-weight: 500; }
html.client .checklist button.later-toggle { border-radius: 14px; background: transparent; color: var(--link); }
html.client .checklist button.later-toggle:hover { background: var(--fill-hover); }
.later-note { padding: 0 1.2rem; margin: 0 0 .2rem; }
/* 고르는 답: 하나 고르기(보기 버튼) · 여러 개 체크(체크 상자) */
.opt-choices { flex-wrap: wrap; }
.opt-checks { display: grid; gap: .35rem; margin: .3rem 0 .5rem; }
.opt-check { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: .9rem; }
.opt-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent, #111); }
.opt-check:has(input:checked) { border-color: var(--line-strong); background: var(--hover); }
/* 대표 화면 자료 목록: 묶음 머리 줄 */
tr.group-row td { background: var(--bg, #f7f7f5); padding-top: .55rem; padding-bottom: .55rem; }
.item-row { padding: .6rem 1rem; cursor: pointer; border-left: 2px solid transparent; }
.item-row + .item-row { border-top: 1px solid var(--line); }
.item-row:hover { background: #fafaf9; }
.item-row.current { background: var(--hover); border-left-color: var(--ink); }
.item-row .head { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.item-row .name { font-weight: 500; }
.item-row .files { color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.badge { display: inline-block; font-size: .8rem; font-weight: 500; border-radius: 99px; padding: .05rem .5rem; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.badge.req { color: var(--text); }
.badge.got { color: var(--ok); border-color: transparent; background: var(--ok-soft); }
.badge.again { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.badge.off { color: var(--faint); border-style: dashed; }
.dropzone { border: 1px dashed var(--line-strong); border-radius: 7px; padding: .45rem; text-align: center; color: var(--muted); font-size: .88rem; margin-top: .45rem; }
.dropzone.over { border-color: var(--ink); background: var(--hover); color: var(--text); }

.chat { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 480px; }
.messages { flex: 1; overflow: auto; padding: 1.1rem 1.1rem .4rem; }
.msg { max-width: 86%; margin-bottom: .55rem; padding: .55rem .8rem; border-radius: 12px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; font-size: 1rem; }
.msg.bot { background: var(--hover); border-top-left-radius: 4px; }
.msg.me { background: var(--ink); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.msg.me .who { color: rgba(255, 255, 255, .6); }
.msg.owner { background: #fff; border: 1px solid var(--ok); }
.msg .who { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .1rem; }
.msg .actions { margin-top: .45rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.item-card { border: 1px solid var(--line-strong); background: #fff; border-radius: 12px; padding: .95rem 1rem; margin: .3rem 0 .8rem; }
.item-card .title { font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; }
.item-card .desc { margin: .35rem 0; white-space: pre-wrap; }
.item-card .meta { font-size: .88rem; color: var(--muted); }
.item-card .controls { margin-top: .7rem; }
.item-card .answer { background: var(--bg); border-radius: 8px; padding: .45rem .65rem; font-size: .93rem; margin-top: .45rem; white-space: pre-wrap; }
.progress { font-size: .93rem; }
.progress .bar { height: 3px; }
.composer { border-top: 1px solid var(--line); padding: .6rem .7rem; }
/* 아래 질문 칸: 「담당자에게 질문」 이름 줄 + 입력칸·버튼 줄(11/12 테스트 의견: 자료 답 칸과 헷갈림) */
.composer-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0 0 .4rem .2rem; }
.composer-row { display: flex; gap: .5rem; align-items: flex-end; }
.composer textarea { min-height: 40px; height: 40px; max-height: 140px; }
.composer button { flex-shrink: 0; min-height: 40px; }
.privacy { font-size: .84rem; color: var(--faint); padding: .2rem 1.1rem .5rem; }
.field-hint.ask-hint { padding: 0 1.1rem .4rem; }
.chat.over { outline: 1px dashed var(--ink); outline-offset: -8px; }

/* 상단 메뉴 · 홈 · 확인 요청 · 문서 */
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.main-tabs { display: flex; gap: 1.2rem; margin-top: .6rem; overflow-x: auto; scrollbar-width: none; }
.main-tabs::-webkit-scrollbar { display: none; }
.main-tabs button { border: none; background: none; min-height: auto; padding: .35rem 0; border-radius: 0; color: var(--muted); border-bottom: 2px solid transparent; }
.main-tabs button:hover { background: none; color: var(--text); }
.main-tabs button.on { color: var(--text); border-bottom-color: var(--ink); font-weight: 600; }
.page { max-width: 760px; margin: 0 auto; padding: 20px; display: grid; gap: 14px; }
.panel.pad { padding: 1.1rem 1.2rem; }
.progress-line { max-width: 1200px; margin: 0 auto; padding: 14px 20px 0; color: var(--muted); }
/* 원청 화면은 어떤 경우에도 페이지 전체가 옆으로 밀리지 않게 — 넘치는 것은 잘라 둠(위 칸 최소 폭 고침과 함께 · 대표 화면은 표가 넓어 제외) */
html.client:not(.admin-ui) #app { overflow-x: clip; }
/* 문서 열기: 보기(그림·PDF는 새 창에서 바로) · 내려받기 · 읽기(11/12 대표 「문서 보기도 브라우저 안에서」) */
.doc-act { white-space: nowrap; font-size: .86rem; margin-left: .6rem; }
.doc-file { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; }
.doc-file .doc-act { margin-left: 0; }
.review-target { flex-wrap: wrap; row-gap: .25rem; }
.review-related { margin-top: .55rem; }
.review-related ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .2rem; }
.review-related li { flex-wrap: wrap; row-gap: .15rem; }
.review-related li .grow { min-width: 0; overflow-wrap: anywhere; }
/* 확인·승인 카드: 상태 배지는 작은 윗줄 오른쪽 · 제목은 아래 한 줄 전체(긴 제목 끝 글자만 떨어지던 것) */
.review-meta { align-items: center; }
.review-title { margin: .25rem 0 .35rem; overflow-wrap: anywhere; }
/* 계정 연결 상자(대표 11/12 「계정 묶음 상자」) */
.acct-box { margin: .8rem 1.2rem .5rem; padding: .9rem 1rem .5rem; border-radius: 14px; background: var(--bg, #f5f5f7); }
.acct-head { font-size: .92rem; overflow-wrap: anywhere; }
.acct-why { margin: .35rem 0 .45rem; }
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; }
.acct-li { padding: .5rem .3rem; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.acct-li:first-child { border-top: none; }
.acct-li.current { background: var(--surface); }
.acct-li .acct-name { font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.acct-li .acct-state { margin-top: .1rem; overflow-wrap: anywhere; }
.acct-li .acct-state.now { color: var(--accent, var(--text)); font-weight: 500; }
.acct-li .acct-state.done { color: var(--ok); }
/* 입력하는 동안·수정 요청/승인 칸이 열려 있는 동안에는 떠 있는 「질문하기」를 숨김(휴대폰에서 입력칸을 가리던 것) */
body.typing .ask-fab, body:has(.actions-area textarea, .actions-area input) .ask-fab { visibility: hidden; pointer-events: none; }
/* 제출 현황 숫자 칩(11/12 테스트 의견: 핵심 숫자만 짧게) */
.stat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.stat-chip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .32rem .75rem; border-radius: 980px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.stat-chip .stat-num { color: var(--text); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { list-style: none; display: flex; gap: 0; padding: 0; margin: .4rem 0 0; }
.stepper li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .86rem; color: var(--faint); position: relative; text-align: center; word-break: keep-all; line-height: 1.3; }
.stepper li::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 1px; background: var(--line-strong); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); position: relative; z-index: 1; }
.stepper li.done { color: var(--muted); }
.stepper li.done .dot { background: var(--muted); border-color: var(--muted); }
.stepper li.now { color: var(--text); font-weight: 600; }
.stepper li.now .dot { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(27, 27, 26, .08); }
/* 지금 단계 강조(대표 11/12 A안 「검정 칩」): 끝낸 단계까지 선을 진하게 · 지금 단계 이름에 먹색 바탕 */
.stepper li.done::before, .stepper li.now::before { background: var(--ink); height: 2px; top: 4.5px; }
.stepper li.done .dot { background: var(--ink); border-color: var(--ink); }
.stepper li.now > span:not(.dot) { background: var(--ink); color: #fff; border-radius: 99px; padding: .08rem .45rem; white-space: nowrap; }
.todo { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.todo:first-of-type { border-top: none; }
.todo-title { font-weight: 500; }
.warn-text { color: var(--warn); }
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { display: flex; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.activity li:first-child { border-top: none; }
.activity .when { color: var(--faint); font-size: .86rem; white-space: nowrap; min-width: 6.6rem; }
/* 지난 질문 접기 · 전체 공정률 설명 줄(11/12 시험 의견) */
.old-qa { margin: 0 0 .55rem; }
.old-qa button.link { color: var(--muted); }
.progress-sum { margin: -.6rem 0 .9rem; }
.doc-pc-hint { display: none; }
/* 큰 파일 「다른 경로로 보내기」(대표 11/12) */
.handoff { border: 1px dashed var(--line-strong); border-radius: 8px; padding: .65rem .75rem; margin-top: .45rem; gap: .45rem; }
.handoff select, .handoff input:not([type=checkbox]) { width: 100%; }
/* 자료별 서식·샘플(대표 11/12) */
.item-card .templates { margin: .45rem 0; padding: .5rem .65rem; background: var(--bg); border-radius: 8px; }
.item-card .templates ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .3rem; }
.item-card .templates a { color: var(--text); font-weight: 500; }
/* 11/12 마지막 시험 의견: 질문과 답 구분선 · 문서 아래 바로 결정(읽는 동안 아래에 붙어 있음 · 누르면 그 자리에 펼침) · 좁은 화면 메뉴 줄임 */
.qa-title { margin: 1rem 0 .45rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.doc-decide { position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-top: 1px solid var(--line); padding: .7rem 1.2rem .8rem; display: grid; gap: .45rem; }
.doc-decide.open { position: static; }
/* 문서 판(panel)의 overflow:hidden 이 아래 결정 줄을 화면 아래에 못 붙게 막음 → 모서리 잘라내기만(clip · 옛 브라우저는 visible) */
.panel.doc-page { overflow: visible; overflow: clip; }
.main-tabs .tab-short { display: none; }
@media (max-width: 380px) {
  .main-tabs .tab-long { display: none; }
  .main-tabs .tab-short { display: inline; }
  .main-tabs { gap: .95rem; }
}
.review h2 { margin: .1rem 0 .2rem; font-size: 1.1rem; }
.review .desc { white-space: pre-wrap; margin: .5rem 0; }
.review .links { margin: .5rem 0; }
.feedback-list { margin-top: .8rem; display: grid; gap: .6rem; }
.feedback { background: var(--bg); border-radius: 8px; padding: .65rem .8rem; }
.feedback .desc { margin: .3rem 0; }
.feedback .answer { background: #fff; border-radius: 6px; padding: .4rem .6rem; margin-top: .4rem; font-size: .93rem; }
.actions-area { margin-top: .9rem; }
.confirm { background: var(--bg); border-radius: 8px; padding: .8rem; }
.check { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; font-size: .93rem; }
.check input { width: auto; margin: .3rem 0 0; flex-shrink: 0; }
.review-target { background: var(--bg); border-radius: 7px; padding: .45rem .7rem; margin: .5rem 0; }
.review-target a { color: var(--text); white-space: nowrap; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { padding: .8rem 1.2rem; border-top: 1px solid var(--line); }
.docs li:first-child { border-top: none; }
.docs a { color: var(--text); font-weight: 500; text-decoration: none; }
.docs a:hover { text-decoration: underline; }
.docs-note { margin: 0; padding: .7rem 1.2rem .9rem; border-top: 1px solid var(--line); }

/* 진행 상황 첫 화면 · 이용 순서 · 공정률(대표 11/12 A안) */
.guide h2 { margin: 0; }
.guide-steps { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.guide-step { display: flex; gap: .7rem; align-items: flex-start; width: 100%; text-align: left; white-space: normal; padding: .6rem .75rem; min-height: auto; border-color: var(--line); border-radius: 8px; font-weight: 400; }
.guide-step:hover { border-color: var(--line-strong); background: #fafaf9; }
.guide-step .num { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem; }
.guide-step .g-body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.guide-step .g-title { font-weight: 600; }
.guide-step .g-desc { color: var(--muted); font-size: .86rem; line-height: 1.5; word-break: keep-all; }
.guide-closed { text-align: right; margin-bottom: -6px; }
.bar.big { height: 6px; margin: .2rem 0 1rem; }
.track + .track { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }
.track-head { display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.track-name { font-weight: 600; }
.track-pct { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.track .stepper { margin-top: .65rem; }
.now-note { margin-top: 1rem; padding: .55rem .75rem; background: var(--bg); border-radius: 7px; }
.progress-line .legend { color: var(--faint); margin-top: .35rem; }

/* 문서 판·상태·의견(대표 11/12 「추천안대로」) */
.doc-st { font-weight: 500; }
.doc-st.st-review { color: var(--warn); }
.doc-st.st-final { color: var(--ok); }
.doc-versions { margin: .35rem 0 1rem; }
.doc-versions button.link { padding: 0 .1rem; }
.doc-old { margin: .7rem 0 0; }
.doc-comments { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.doc-comments h2 { margin: 0; }
.cmt-list, .cmt-drafts { display: grid; gap: .5rem; }
.cmt { background: var(--bg); border-radius: 8px; padding: .55rem .75rem; display: grid; gap: .25rem; }
.cmt.draft { background: var(--surface); border: 1px dashed var(--line-strong); }
.cmt.draft.editing { border-color: var(--ink); }
.cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.cmt .answer { background: var(--surface); border-radius: 6px; padding: .4rem .6rem; font-size: .88rem; white-space: pre-wrap; }
.cmt-form select { max-width: 100%; width: auto; }
.doc-status-row { margin-top: .3rem; gap: .25rem; }
.doc-status-row button { min-height: 24px; padding: 0 .45rem; font-size: .78rem; }
.doc-more { margin-top: .35rem; }
.doc-thread { margin-top: .4rem; }

/* 일정(캘린더 · 대표 11/12 「추천안대로」): PC = 한 달 달력 · 휴대폰 = 날짜순 목록 */
.cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; align-items: center; gap: .3rem; }
.cal-month { font-size: .88rem; font-weight: 600; min-width: 6.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.cal .cal-arrow { min-height: auto; padding: .1rem .55rem; font-size: 1rem; line-height: 1.2; border-color: var(--line); }
.cal-grid { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cal-week.cal-dow { border-top: none; background: var(--bg); }
.cal-dowcell { font-size: .72rem; color: var(--muted); text-align: center; padding: .3rem 0; }
.cal-dowcell.sun { color: var(--danger); }
.cal-bg { border-left: 1px solid var(--line); }
.cal-bg:first-child { border-left: none; }
.cal-bg.out { background: #fbfbfa; }
.cal-num { display: flex; align-items: baseline; gap: .3rem; padding: .3rem .4rem .15rem; font-size: .74rem; min-width: 0; z-index: 1; }
.cal-num .n { font-variant-numeric: tabular-nums; }
.cal-num.sun .n { color: var(--danger); }
.cal-num.out .n { color: var(--faint); }
.cal-num .n.today { background: var(--ink); color: #fff; border-radius: 99px; padding: 0 .38rem; }
.cal-num .hol { color: var(--danger); font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-bar { z-index: 1; margin: 1px 3px; height: 17px; line-height: 17px; font-size: .68rem; padding: 0 .4rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: default; }
.cal-bar.st-todo { background: var(--hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-bar.st-doing { background: var(--ink); color: #fff; }
.cal-bar.st-done { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.cal-bar.late { box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger); background: #fdf3f2; }
.cal-pts { z-index: 1; padding: .1rem .4rem .35rem; min-height: 1.7rem; min-width: 0; display: grid; align-content: start; gap: 1px; }
.cal-pt { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pt.k-review_due, .cal-pt.k-materials_due { color: var(--warn); }
.cal-pt.k-done, .cal-pt.k-approved { color: var(--ok); }
.cal-legend { margin: .45rem 0 0; color: var(--faint); }
.cal-list-wrap { display: none; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cal-li { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.cal-list .cal-li:first-child { border-top: none; }
.cal-li-date { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-li-body { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cal-li-title { font-size: .9rem; }
.cal-li.st-done .cal-li-title { color: var(--muted); }
.cal-li.k-review_due .cal-li-title, .cal-li.k-materials_due .cal-li-title { color: var(--warn); }
.cal-li.hol .cal-li-title { color: var(--danger); font-size: .84rem; }
.cal-list.past { margin-top: .3rem; opacity: .75; }
@media (max-width: 640px) {
  .cal-grid-wrap, .cal-nav { display: none; }
  .cal-list-wrap { display: block; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; gap: 12px; }
  .page { padding: 12px 16px; }
  .progress-line { padding: 12px 16px 0; }
  .stepper li { font-size: .78rem; }
  .top { padding: .7rem 16px .6rem; }
  .tabs { display: flex; gap: .4rem; padding: .7rem 16px 0; }
  .tabs button { flex: 1; }
  .tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .layout.show-list .chat-panel, .layout.show-chat .list-panel { display: none; }
  .checklist { max-height: none; }
  .chat { height: calc(100vh - 240px); }
  .msg { max-width: 94%; }
  /* 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대하므로 입력칸만 16px */
  input, textarea, select { font-size: 16px; }
}

/* 대표 화면 */
body.admin { font-size: 13px; }
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.env { font-size: .74rem; border-radius: 99px; padding: .15rem .6rem; background: var(--warn-soft); color: var(--warn); }
section.block, details.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .9rem; overflow-x: auto; }
details.block > summary { cursor: pointer; font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: .5rem .45rem; vertical-align: top; }
th { color: var(--faint); font-weight: 500; font-size: .85rem; white-space: nowrap; }
td .row { gap: .3rem; }
td button { min-height: 28px; padding: 0 .55rem; font-size: .85rem; }
.step-dates .row { flex-wrap: nowrap; align-items: center; }
.step-dates input { width: 8.6rem; padding: .2rem .35rem; font-size: .82rem; min-height: 28px; }
.admin-cal { margin-bottom: .9rem; }
.linkbox { background: var(--ok-soft); border-radius: 8px; padding: .8rem; word-break: break-all; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.project-card { cursor: pointer; margin-top: .5rem; }
.project-card:hover { border-color: var(--line-strong); background: #fafaf9; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.alert { background: #fbeceb; color: var(--danger); border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } table { font-size: .85rem; } .admin-wrap { padding: 12px 16px; } }

/* 문서 읽기(페이지 문서) — 세련·심플 · 글자 작게 */
.doc-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .65rem 1.2rem; border-bottom: 1px solid var(--line); }
.doc-inner { padding: 1.4rem 1.3rem 2rem; }
.doc-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .25rem; }
.doc-meta { color: var(--muted); font-size: .82rem; margin-bottom: 1.3rem; }
.doc-body { font-size: .95rem; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.doc-body > :first-child { margin-top: 0; }
.doc-body h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin: 1.7rem 0 .55rem; }
.doc-body h3 { font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .45rem; }
.doc-body h4, .doc-body h5 { font-size: .95rem; font-weight: 600; margin: 1.1rem 0 .35rem; }
.doc-body p { margin: .5rem 0; }
.doc-body ul, .doc-body ol { margin: .45rem 0; padding-left: 1.25rem; }
.doc-body li { margin: .18rem 0; }
.doc-body li > ul, .doc-body li > ol { margin: .15rem 0; }
.doc-body blockquote { margin: .8rem 0; padding: .15rem 0 .15rem .9rem; border-left: 2px solid var(--line-strong); color: var(--muted); }
.doc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--hover); padding: .05rem .3rem; border-radius: 4px; }
.doc-body pre { background: var(--hover); padding: .8rem .9rem; border-radius: 8px; overflow-x: auto; font-size: .84rem; line-height: 1.55; }
.doc-body pre code { background: none; padding: 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.doc-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.doc-table { overflow-x: auto; margin: .8rem 0; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.55; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: .45rem .55rem; border-bottom: 1px solid var(--line); }
.doc-body th { color: var(--text); font-weight: 600; font-size: .86rem; border-bottom-color: var(--line-strong); white-space: nowrap; }
/* 표 칸은 단어 단위로만 줄바꿈(anywhere 는 칸 최소 폭을 한 글자로 잡아 좁은 화면에서 글자가 세로로 갈라짐 · 11/12 테스트 의견) */
.doc-body th, .doc-body td { overflow-wrap: break-word; }
.doc-body .al-c { text-align: center; }
.doc-body .al-r { text-align: right; }
/* 휴대폰: 3칸 이상 표는 줄마다 카드(첫 칸 = 카드 제목 · 나머지 = 「머리글」 이름표 + 내용) · PC·인쇄는 표 그대로 */
@media screen and (max-width: 640px) {
  .doc-table-cards table, .doc-table-cards tbody, .doc-table-cards tr, .doc-table-cards td { display: block; width: 100%; }
  .doc-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc-table-cards tr { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem .55rem; margin: 0 0 .6rem; background: var(--surface); }
  .doc-body .doc-table-cards td { border: none; padding: .12rem 0 .4rem; text-align: left; }
  .doc-body .doc-table-cards td:first-child { font-weight: 600; font-size: 1.04em; padding-bottom: .5rem; }
  .doc-table-cards td[data-label]::before { content: attr(data-label); display: block; font-size: .8em; color: var(--muted); margin-bottom: .05rem; }
  .doc-table-cards td:first-child::before { display: none; }
  .doc-table-cards td:empty { display: none; }
}
textarea.mono { line-height: 1.55; }
.doc-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--surface); }
/* PDF로 저장은 PC에서만: 휴대폰·태블릿(좁은 화면 또는 손가락 터치 화면)에서는 버튼·안내를 숨김 */
@media (max-width: 860px), (pointer: coarse) { .doc-actions .doc-pdf, .doc-actions .doc-hint { display: none; } .doc-actions .doc-pc-hint { display: inline; } }
/* 고객 화면 휴대폰(11/12 시험 의견): 누르는 곳은 44px 이상 · 자료 화면은 대화 칸 안쪽 스크롤 없이 페이지 하나로만(입력칸은 아래에 붙음) */
@media (max-width: 860px) {
  body:not(.admin) #app button:not(.link):not(.guide-step), body:not(.admin) #app a.btn { min-height: 44px; }
  body:not(.admin) #app .main-tabs button { min-height: 44px; padding: 0 .1rem; }
  body:not(.admin) .chat-panel { overflow: visible; }
  body:not(.admin) .chat { height: auto; min-height: 0; }
  body:not(.admin) .messages { flex: none; overflow: visible; }
  body:not(.admin) .composer { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
  /* 글자 버튼(나가기·담당자 연결·이 항목 질문하기·지난 질문 보기)은 보이는 크기는 그대로, 누르는 영역만 투명하게 44px 가까이(11/12 시험 의견) */
  body:not(.admin)[data-mview="chat"] .progress-line .legend { display: none; }
  body:not(.admin) #app button.link { position: relative; }
  body:not(.admin) #app button.link::after { content: ''; position: absolute; inset: -10px -6px; }
}
@media (max-width: 860px) { .doc-inner { padding: 1.1rem 1rem 1.6rem; } }

/* PDF로 저장(인쇄 창): 문서만 깔끔하게 */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  html { font-size: 13px; }
  body { background: #fff; }
  .top, .main-tabs, .no-print, .progress-line { display: none !important; }
  .page { max-width: none; padding: 0; margin: 0; display: block; }
  .panel.doc-page { border: none; border-radius: 0; overflow: visible; }
  .doc-inner { padding: 0; }
  .doc-body a { text-decoration: none; }
  .doc-table { overflow: visible; }
  .doc-body h2, .doc-body h3, .doc-body h4 { break-after: avoid; page-break-after: avoid; }
  .doc-body tr, .doc-body pre, .doc-body blockquote, .doc-body li { break-inside: avoid; page-break-inside: avoid; }
}

/* ===== 애플 홈페이지 느낌(대표 11/12 「UI/UX는 애플 홈페이지 느낌 최대한 · 폰트·폰트 크기·애니메이션까지」) =====
   원청 화면(html.client = p.html·index.html)에만 · 대표 화면은 그대로 · 인쇄(PDF로 저장)는 위 print 그대로(screen 에만 적용)
   글꼴: 애플 기기에서는 기기 글꼴(SF·Apple SD Gothic Neo)로 보이고, 그 밖에서는 Pretendard — 애플 글꼴 파일은 웹에 넣지 않음(사용 조건)
   크기: 본문 17px · 큰 제목 28px · 숫자 56px(애플 홈페이지 단계) · 버튼·링크 색 = 애플 파랑(대표 11/12 「A 애플 파랑」 · --accent 하나만 바꾸면 전체가 바뀜) */
@media screen {
  html.client {
    font-size: 17px;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --faint: #86868b;
    --line: #e8e8ed;
    --line-strong: #d2d2d7;
    --hover: #f5f5f7;
    --ok: #248a3d;
    --ok-soft: #e9f5ec;
    --warn: #b64400;
    --warn-soft: #fff3e8;
    --danger: #d70015;
    --radius: 18px;
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --link: #0066cc;
    --accent-soft: rgba(0, 113, 227, .1);
    --ring: rgba(0, 125, 250, .35);
    --ink: var(--accent);
    --fill: #e8e8ed;
    --fill-hover: #dedee3;
    --ease: cubic-bezier(.28, .11, .32, 1);
    --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", system-ui, sans-serif;
  }
  html.client body { font-family: var(--font); font-size: 1rem; line-height: 1.47059; letter-spacing: -.022em; background: var(--bg); color: var(--text); }
  html.client h1 { font-size: 2rem; line-height: 1.125; font-weight: 600; letter-spacing: -.003em; }
  html.client h2 { font-size: 1.65rem; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; margin: 0 0 .9rem; }
  html.client h3 { font-size: 1.24rem; line-height: 1.19; font-weight: 600; letter-spacing: .011em; }
  html.client .small { font-size: .824rem; line-height: 1.42859; letter-spacing: -.016em; }
  html.client a { color: var(--link); }

  /* 버튼: 알약 모양 · 기본 = 옅은 회색 · 주 버튼 = 강조색 · 누르면 살짝 작아짐 */
  html.client button, html.client .btn {
    border: none; border-radius: 980px; background: var(--fill); color: var(--text);
    font-size: .824rem; font-weight: 400; letter-spacing: -.016em; padding: .5rem 1.05rem; min-height: 36px;
    transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  }
  html.client button:hover { background: var(--fill-hover); }
  html.client button:active:not(:disabled) { transform: scale(.97); }
  html.client button.primary { background: var(--accent); color: #fff; }
  html.client button.primary:hover { background: var(--accent-hover); }
  html.client button.link { background: none; color: var(--link); padding: .1rem .2rem; min-height: auto; text-decoration: none; border-radius: 6px; }
  html.client button.link:hover { background: none; text-decoration: underline; text-decoration-color: currentColor; }
  html.client button.danger { color: var(--danger); }
  html.client button:focus-visible, html.client a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
  html.client input, html.client textarea, html.client select {
    border: 1px solid var(--line-strong); border-radius: 12px; padding: .65rem .85rem; background: #fff; font-size: 1rem; letter-spacing: -.022em;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  html.client input:focus, html.client textarea:focus, html.client select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
  html.client input[type=checkbox], html.client input[type=radio] { padding: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
  html.client .notice { border-radius: 12px; padding: .75rem 1rem; font-size: .882rem; }

  /* 위 메뉴: 반투명 흐림 막대(애플 홈페이지 위쪽 줄) · 메뉴 밑줄은 미끄러지듯 */
  html.client .top {
    background: rgba(251, 251, 253, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08); padding: .9rem 22px 0;
  }
  html.client .top .client { font-size: 1.24rem; font-weight: 600; letter-spacing: .011em; line-height: 1.2; }
  html.client .top .sub { font-size: .706rem; color: var(--muted); letter-spacing: -.01em; margin-top: .15rem; }
  html.client .main-tabs { gap: 1.6rem; margin-top: .55rem; }
  html.client .main-tabs button {
    position: relative; background: none; border: none; border-radius: 0; padding: .45rem 0 .6rem; min-height: auto;
    font-size: .824rem; color: var(--muted); font-weight: 400;
  }
  html.client .main-tabs button::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--text);
    transform: scaleX(0); transition: transform .45s var(--ease);
  }
  html.client .main-tabs button:hover { background: none; color: var(--text); }
  html.client .main-tabs button:active { transform: none; }
  html.client .main-tabs button.on { color: var(--text); font-weight: 600; }
  html.client .main-tabs button.on::after { transform: scaleX(1); }

  /* 판(카드): 테두리 없이 흰 판 · 넉넉한 여백 · 큰 둥근 모서리 · 메뉴와 본문을 같은 가운데 폭(애플 홈페이지 980px)으로 */
  html.client .top > * { max-width: 936px; margin-left: auto; margin-right: auto; }
  html.client .page { max-width: 980px; padding: 28px 22px 72px; gap: 20px; }
  html.client .layout { max-width: 980px; gap: 20px; padding: 24px 22px 48px; }
  html.client .progress-line { max-width: 980px; }
  html.client .panel, html.client .card { border: none; border-radius: var(--radius); }
  html.client .panel.pad { padding: 1.65rem 1.75rem; }
  html.client .progress-line { padding: 22px 22px 0; font-size: .824rem; }
  html.client .bar { height: 6px; background: var(--fill); }
  html.client .bar > span { background: var(--accent); transition: width 1.2s var(--ease); }

  /* 진행 상황: 큰 숫자(애플 제품 소개의 숫자처럼) */
  html.client .eyebrow { font-size: 1.06rem; font-weight: 600; color: var(--muted); letter-spacing: .011em; margin: 0; }
  html.client .big-num { font-size: 3.3rem; line-height: 1.07; font-weight: 600; letter-spacing: -.005em; margin: .2rem 0 .15rem; font-variant-numeric: tabular-nums; }
  html.client .big-num .unit { font-size: .5em; margin-left: .06em; color: var(--muted); font-weight: 600; }
  html.client .bar.big { height: 8px; margin: 1rem 0 1.5rem; }
  html.client .stepper li { font-size: .765rem; letter-spacing: -.01em; }
  html.client .stepper li.now > span:not(.dot) { background: var(--accent); }
  html.client .track + .track { border-top-color: var(--line); margin-top: 1.2rem; padding-top: 1.2rem; }
  html.client .now-note { background: var(--bg); border-radius: 12px; padding: .8rem 1rem; }
  html.client .todo { padding: 1rem 0; border-top-color: var(--line); }
  html.client .todo-title { font-weight: 600; }
  html.client .activity li { padding: .75rem 0; font-size: .941rem; border-top-color: var(--line); }
  html.client .activity .when { font-size: .765rem; min-width: 7.4rem; }
  html.client .guide-step { background: var(--bg); border: none; border-radius: 14px; padding: .95rem 1.05rem; transition: background .25s var(--ease), transform .35s var(--ease); }
  html.client .guide-step:hover { background: #ececef; transform: translateY(-1px); }
  html.client .guide-step .num { background: var(--accent); width: 1.6rem; height: 1.6rem; font-size: .765rem; }
  html.client .guide-step .g-desc { font-size: .824rem; }

  /* 표시(배지): 작은 알약 */
  html.client .badge { border: none; background: var(--fill); color: var(--muted); font-size: .706rem; font-weight: 500; padding: .2rem .62rem; letter-spacing: -.01em; }
  html.client .badge.req { background: var(--accent-soft); color: var(--accent); }
  html.client .badge.got { background: var(--ok-soft); color: var(--ok); }
  html.client .badge.again { background: var(--warn-soft); color: var(--warn); }
  html.client .badge.off { background: transparent; border: 1px dashed var(--line-strong); }

  /* 자료 보내기: 메시지 앱 같은 말풍선 · 자료 카드는 옅은 회색 판 */
  html.client .group-title { font-size: .765rem; color: var(--faint); padding: 1.2rem 1.2rem .4rem; letter-spacing: .02em; }
  html.client .item-row { padding: .8rem 1.2rem; border-left: 3px solid transparent; transition: background .2s var(--ease); }
  html.client .item-row + .item-row { border-top-color: var(--line); }
  html.client .item-row:hover { background: #fafafa; }
  html.client .item-row.current { background: var(--bg); border-left-color: var(--accent); }
  html.client .messages { padding: 1.4rem 1.3rem .6rem; }
  html.client .msg { border-radius: 20px; padding: .55rem .95rem; line-height: 1.41; max-width: 82%; }
  html.client .msg.bot { background: #e9e9eb; border-top-left-radius: 6px; }
  html.client .msg.me { background: var(--accent); border-top-right-radius: 6px; }
  html.client .msg.owner { background: var(--ok-soft); border: none; }
  html.client .msg .who { font-size: .706rem; }
  html.client .item-card { background: var(--bg); border: none; border-radius: 18px; padding: 1.2rem 1.25rem; }
  html.client .item-card .title { font-size: 1.24rem; font-weight: 600; letter-spacing: .011em; }
  html.client .item-card .meta { font-size: .824rem; }
  html.client .item-card .answer, html.client .item-card .templates { background: #fff; border-radius: 12px; }
  html.client .item-card .confirm { background: #fff; }
  html.client .confirm { border-radius: 14px; padding: 1rem 1.05rem; }
  html.client .dropzone { border-radius: 12px; border-color: var(--line-strong); }
  html.client .handoff { border-radius: 14px; }
  html.client .composer { border-top-color: var(--line); padding: .75rem .85rem; }
  html.client .composer textarea { min-height: 44px; height: 44px; border-radius: 22px; padding: .58rem 1rem; }
  html.client .composer button { min-height: 44px; }
  /* 질문 칸 안내 글은 한 줄에 들어가게 작게(입력하는 글자는 그대로 17px — 아이폰 확대 방지) */
  html.client .composer textarea::placeholder { font-size: .824rem; }
  html.client .privacy { font-size: .706rem; }
  html.client .tabs button.on { background: var(--accent); color: #fff; }

  /* 확인·승인 · 받은 문서 */
  html.client .review h2 { font-size: 1.41rem; }
  html.client .feedback { background: var(--bg); border-radius: 14px; padding: .9rem 1rem; }
  html.client .feedback .answer { border-radius: 10px; }
  html.client .review-target { background: var(--bg); border-radius: 12px; padding: .65rem .9rem; }
  html.client .review-target a, html.client .item-card .templates a { color: var(--link); }
  html.client .docs li { padding: 1.15rem 1.6rem; border-top-color: var(--line); }
  html.client .docs a { color: var(--text); font-weight: 600; font-size: 1.06rem; }
  html.client .docs-note { padding: 1rem 1.6rem 1.25rem; font-size: .765rem; border-top-color: var(--line); }
  html.client .doc-actions { padding: .8rem 1.6rem; border-bottom-color: var(--line); }
  html.client .doc-inner { padding: 2.4rem 2.6rem 3rem; }
  html.client .doc-title { font-size: 2.35rem; line-height: 1.1; font-weight: 700; letter-spacing: -.005em; }
  html.client .doc-meta { font-size: .824rem; margin: .55rem 0 1.6rem; }
  html.client .doc-body { font-size: 1rem; line-height: 1.58824; letter-spacing: -.022em; }
  html.client .doc-body h1 { font-size: 1.88rem; line-height: 1.125; }
  html.client .doc-body h2 { font-size: 1.65rem; line-height: 1.15; margin: 2.4rem 0 .8rem; letter-spacing: .007em; }
  html.client .doc-body h3 { font-size: 1.24rem; margin: 1.8rem 0 .55rem; }
  html.client .doc-body table { font-size: .824rem; }
  html.client .doc-body th { font-size: .765rem; color: var(--muted); }
  html.client .doc-body blockquote { border-left-width: 3px; }
  html.client .doc-body a { color: var(--link); text-decoration: none; }
  html.client .doc-body a:hover { text-decoration: underline; }
  html.client .doc-decide {
    background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, .08); padding: .9rem 1.6rem 1rem;
  }
  html.client .doc-comments { border-top-color: var(--line); }
  html.client .cmt { border-radius: 14px; padding: .8rem 1rem; }
  html.client .cmt .answer { border-radius: 10px; }

  /* 일정 */
  html.client .cal-grid { border-color: var(--line); border-radius: 14px; }
  html.client .cal-month { font-size: .941rem; }
  html.client .cal .cal-arrow { background: var(--fill); border: none; width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; font-size: 1.05rem; }
  html.client .cal-num .n.today { background: var(--accent); }
  html.client .cal-bar.st-doing { background: var(--accent); }
  /* 일정마다 색(대표 11/12 「A 선명한 색」 · 애플 캘린더 색): 예정 = 옅은 바탕 + 같은 색 글자 · 진행 중 = 진한 바탕 + 흰 글자 · 완료 = 흐리게(✓)
     진한 바탕은 흰 글자가 잘 읽히는 짙은 쪽 색(대비 4.5 이상) · 예정이 지난 단계(대표 화면)는 빨간 테두리 그대로 */
  .cal .c0 { --cs: #0071e3; --cd: #0058b9; --ct: rgba(0, 122, 255, .14); }
  .cal .c1 { --cs: #1f7f37; --cd: #1e7a34; --ct: rgba(52, 199, 89, .18); }
  .cal .c2 { --cs: #b85a00; --cd: #9a4f00; --ct: rgba(255, 149, 0, .18); }
  .cal .c3 { --cs: #8944ab; --cd: #7e3aa6; --ct: rgba(175, 82, 222, .14); }
  .cal .c4 { --cs: #d30f45; --cd: #b8143a; --ct: rgba(255, 45, 85, .12); }
  .cal .c5 { --cs: #0a7f94; --cd: #0b6e80; --ct: rgba(48, 176, 199, .16); }
  .cal .c6 { --cs: #5856d6; --cd: #3634a3; --ct: rgba(88, 86, 214, .13); }
  .cal .c7 { --cs: #8a6d4a; --cd: #6e5639; --ct: rgba(162, 132, 94, .18); }
  .cal .cal-bar.colored.st-todo { background: var(--ct); color: var(--cd); box-shadow: none; }
  .cal .cal-bar.colored.st-doing { background: var(--cs); color: #fff; box-shadow: none; }
  .cal .cal-bar.colored.st-done { background: var(--ct); color: var(--cd); box-shadow: none; opacity: .55; }
  .cal .cal-bar.colored.late { background: #fdf3f2; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); opacity: 1; }
  .cal .cal-pt.colored.k-done, .cal .cal-pt.colored.k-start { color: var(--cd); }
  .cal .cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cs); flex: none; }
  /* 대표 「전체 일정」 업체 표시(대표 11/12 「업체마다 색」): 누르면 그 업체 일정을 숨기거나 다시 보임 · 숨긴 업체 = 빈 점·흐린 글자 */
  .cal .ov-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .7rem; }
  .cal .ov-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; padding: .3rem .8rem; min-height: 30px; }
  .cal .ov-chip.off { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
  .cal .ov-chip.off .cal-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cs); }

  /* 프로젝트 관리(대표 11/12 「진행 중 / 끝난 것 나누기」·「작업 종류 + 자유 태그」·「기본 정보 고치기」) */
  .pj-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
  html.client .pj-filter .pj-chip { font-size: .8rem; padding: .28rem .85rem; min-height: 30px; }
  html.client .pj-filter .pj-chip.on { background: var(--accent); color: #fff; }
  .pj-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; color: var(--muted); margin: .15rem 0 .2rem; }
  .pj-tag { color: var(--link, var(--muted)); }
  .pj-ended { margin-top: .9rem; }
  .pj-ended > summary { cursor: pointer; font-size: .86rem; color: var(--muted); padding: .35rem 0; }
  .pj-ended .project-card.ended { opacity: .78; }
  .pj-info h3 { margin: .6rem 0 .1rem; font-size: .95rem; }
  .pj-type-checks { flex-wrap: wrap; gap: .4rem 1.1rem; }
  .pj-type-checks label { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }
  .pj-tag-edit { flex-wrap: wrap; gap: .4rem; align-items: center; }
  .pj-tag-edit input { max-width: 16rem; }
  .pj-tag-chip { display: inline-flex; align-items: center; gap: .1rem; background: var(--fill); border-radius: 99px; padding: .15rem .35rem .15rem .75rem; font-size: .84rem; }
  html.client .pj-tag-chip button.link { padding: 0 .3rem; min-height: auto; color: var(--muted); }

  /* 다른 메뉴에서 질문 챗봇으로 가는 「질문하기」 버튼(오른쪽 아래에 떠 있음 · 대표 11/12) */
  html.client .ask-fab {
    position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 6;
    padding: .7rem 1.3rem; font-size: .941rem; font-weight: 500; min-height: 46px;
    box-shadow: 0 8px 24px rgba(0, 113, 227, .28);
  }
  html.client .ask-fab.fab-in { animation: a-fade-up .6s var(--ease) both; }
  /* 받은 문서 목록: 버튼 한 단계 작게 · 마지막 문서 설명이 버튼 위로 올라오게 아래 여백(11/12 테스트 의견) — 휴대폰 누르는 높이 44px 은 그대로 */
  html.client body.tab-docs .ask-fab { padding: .5rem 1rem; font-size: .824rem; min-height: 38px; box-shadow: 0 6px 18px rgba(0, 113, 227, .24); }
  html.client body.tab-docs .page { padding-bottom: 116px; }
  html.client .ask-fab:hover { box-shadow: 0 10px 28px rgba(0, 113, 227, .34); }

  /* 들어가기(링크 + 뒷 4자리) */
  html.client body.center-page { background: var(--bg); }
  html.client .card.narrow { max-width: 440px; padding: 2.6rem 2.2rem 2.3rem; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .06); text-align: center; animation: a-fade-up .8s var(--ease) both; }
  html.client .card.narrow h1 { font-size: 1.88rem; line-height: 1.125; margin-bottom: .55rem; }
  html.client .card.narrow .muted { font-size: 1rem; }
  html.client .pin { font-size: 1.65rem; letter-spacing: .6em; padding: .75rem .8rem .75rem 1.4rem; border-radius: 14px; text-align: center; }
  html.client .card.narrow form button { min-height: 50px; font-size: 1rem; font-weight: 500; }

  /* 움직임: 화면에 들어올 때 아래에서 살짝 떠오름(애플 홈페이지처럼) · 숫자는 0부터 올라감 · 줄은 차오름 */
  @keyframes a-fade-up { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
  html.client .a-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
  html.client .a-reveal.is-in { opacity: 1; transform: none; }

  @media (max-width: 860px) {
    /* 휴대폰 위쪽 줄 여백을 조금 넓힘(11/12 테스트 의견: 상단이 빡빡함) */
    html.client .top { padding: 1rem 16px 0; }
    html.client .top .sub { margin-top: .25rem; }
    html.client .main-tabs { margin-top: .75rem; }
    html.client .page { padding: 16px 12px 92px; gap: 14px; }
    html.client .ask-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
    html.client .layout { padding: 14px 12px 32px; }
    html.client .progress-line { padding: 16px 16px 0; }
    html.client .panel.pad { padding: 1.3rem 1.2rem; }
    html.client h2 { font-size: 1.41rem; }
    html.client .big-num { font-size: 2.82rem; }
    html.client .doc-inner { padding: 1.6rem 1.25rem 2rem; }
    html.client .doc-title { font-size: 1.76rem; }
    html.client .doc-body h2 { font-size: 1.41rem; }
    html.client .doc-actions, html.client .doc-decide { padding-left: 1.25rem; padding-right: 1.25rem; }
    html.client .docs li { padding: 1rem 1.25rem; }
    /* 휴대폰: 단계 이름이 옆 단계와 겹치지 않게 한 단계 작게 · 지금 단계 표시도 좁게 */
    html.client .stepper li { font-size: .706rem; }
    html.client .stepper li.now > span:not(.dot) { padding: .04rem .38rem; }
  }
  @media (max-width: 380px) { html.client .main-tabs { gap: 1.1rem; } }

  /* PC 자료 보내기: 화면 높이에 맞춤 — 페이지는 움직이지 않고 왼쪽 목록·오른쪽 칸 두 곳만 스크롤(질문 칸은 늘 화면 아래)
     (11/12 테스트 의견: 목록·오른쪽 칸·페이지 전체 세 군데가 스크롤 · 대표 「화면 높이에 맞추기」) · 낮은 창(560px 미만)은 예전처럼 */
  @media (min-width: 861px) and (min-height: 560px) {
    html.client body.tab-materials { height: 100vh; height: 100dvh; overflow: hidden; }
    html.client body.tab-materials #app { height: 100%; display: flex; flex-direction: column; }
    html.client body.tab-materials #app > .top, html.client body.tab-materials #app > .progress-line { flex: none; }
    html.client body.tab-materials #app > .progress-line { width: 100%; }
    html.client body.tab-materials .materials-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    html.client body.tab-materials .layout { flex: 1; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr); padding-bottom: 22px; }
    html.client body.tab-materials .list-panel, html.client body.tab-materials .chat-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    html.client body.tab-materials .checklist { max-height: none; flex: 1; min-height: 0; overflow: auto; }
    html.client body.tab-materials .chat { height: auto; min-height: 0; flex: 1; }
  }

  /* 대표 화면(대표 11/12 「내 화면에도 반영」): 같은 글꼴·색·알약 버튼·둥근 판 · 표가 많아 글자는 한 단계 작게(14px) */
  html.client.admin-ui { font-size: 14px; }
  html.admin-ui body.admin { font-size: 1rem; line-height: 1.5; }
  html.admin-ui h1 { font-size: 1.71rem; }
  html.admin-ui h2 { font-size: 1.29rem; margin-bottom: .75rem; }
  html.admin-ui button, html.admin-ui .btn { font-size: .929rem; }
  html.admin-ui .badge { font-size: .786rem; }
  html.admin-ui .admin-wrap { max-width: 1240px; padding: 28px 24px 72px; }
  html.admin-ui .admin-top { margin-bottom: 1.3rem; }
  html.admin-ui section.block, html.admin-ui details.block { border: none; border-radius: 18px; padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
  html.admin-ui details.block > summary { font-size: 1.07rem; }
  html.admin-ui .block .card { background: var(--bg); border: none; border-radius: 14px; }
  html.admin-ui .project-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s var(--ease); }
  html.admin-ui .project-card:hover { background: #ececef; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
  html.admin-ui th, html.admin-ui td { border-bottom-color: var(--line); }
  html.admin-ui td button { min-height: 30px; padding: 0 .85rem; font-size: .857rem; }
  html.admin-ui .doc-status-row button { min-height: 26px; padding: 0 .6rem; font-size: .786rem; }
  html.admin-ui .step-dates input { border-radius: 8px; padding: .25rem .45rem; font-size: .857rem; min-height: 30px; }
  html.admin-ui .linkbox, html.admin-ui .alert { border-radius: 14px; }
  html.admin-ui .doc-preview { border: none; background: var(--bg); border-radius: 14px; }
  html.admin-ui .env { border-radius: 980px; }
  html.admin-ui body > .notice { border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); animation: a-fade-up .45s var(--ease) both; }
  @media (max-width: 860px) { html.admin-ui .admin-wrap { padding: 16px 12px 48px; } html.admin-ui section.block, html.admin-ui details.block { padding: 1.1rem 1rem; } }
  /* 움직임을 줄이도록 설정한 기기에서는 움직이지 않음 */
  @media (prefers-reduced-motion: reduce) {
    html.client *, html.client *::before, html.client *::after { animation: none !important; transition: none !important; }
    html.client .a-reveal { opacity: 1; transform: none; }
  }
}