/* 표기 규정(design-system/rules.json)의 값을 그대로 쓴다.
   관리 화면과 고객 화면이 다른 색을 쓰면 규정이 두 개가 된다.
   값을 바꿀 일이 있으면 rules.json을 먼저 고친다. */
:root {
    color-scheme: dark;
    --bg: #07111f;          /* 화면 바탕 */
    --panel: #11233a;       /* 패널 */
    --panel-soft: #0a1a2c;  /* 표 */
    --accent-bg: rgba(37,212,244,.07);  /* 강조 영역 · 안내문 */
    --line: #263d57;
    --cyan: #9beeff;
    --cyan-soft: #9beeff;
    --text: #f5f8fc;
    --muted: #9cafc5;
    --gold: #efd17e;
    --on-fill: #17200f;   /* 채워진 버튼 글자 — 이 자리에만 */
    --danger: #ff7d83;
    --success: #7ee0b0;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    min-width: 1024px;
    background:
        radial-gradient(circle at 82% 12%, rgba(34, 211, 238, .08), transparent 28rem),
        linear-gradient(145deg, #081322 0%, #0a1424 55%, #07101d 100%);
    color: var(--text);
    font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
    /* 지정하지 않은 곳은 브라우저 기본 16px가 되어 규정 4단계를 벗어난다.
       본문 크기를 여기서 한 번 못 박는다. */
    font-size: 14px;
    line-height: 1.55;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.desktop-only { min-height: 100vh; }
.mobile-only { display: none; }
.eyebrow {
    margin: 0 0 .55rem;
    color: var(--cyan-soft);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
}
.muted, .help { color: var(--muted); }
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 5rem 2rem;
}
.auth-card {
    width: min(100%, 540px);
    padding: 3.4rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}
h1, h2, h3, p { overflow-wrap: anywhere; }
/* 브라우저 기본 제목 크기(h3 = 1.17em)가 규정 4단계를 벗어난다.
   따로 지정하지 않은 제목은 패널 소제목 크기로 맞춘다. */
h3 { font-size: 20px; }
.auth-card h1 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.lead { margin: 1rem 0 2rem; color: var(--muted); word-break: keep-all; }
.stack { display: grid; gap: 1.15rem; }
label { color: var(--text); font-weight: 700; }
input, textarea {
    width: 100%;
    margin-top: .45rem;
    border: 1px solid #35506e;
    border-radius: 3px;
    outline: none;
    background: var(--bg);
    color: var(--text);
}
input { min-height: 52px; padding: 0 1rem; }
textarea { padding: 1rem; resize: vertical; min-height: 120px; }
input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .1); }
textarea:disabled { opacity: .42; }
.code-input { font-size: 34px; letter-spacing: .35em; text-align: center; }
button {
    border: 0;
    cursor: pointer;
    font-weight: 800;
}
/* 버튼 규격 — 관리 화면과 같다(D-023). 채워진 것까지 모두 같은 크기다.
   채워진 버튼은 금색 바탕에 어두운 글자를 쓰지 않는다 — 그 글자색이 규정 6색에
   없기 때문이다(D-040, 대표 결정 2026-08-05). 바탕을 가장 어두운 규정색으로 채우고
   글자와 테두리를 금색으로 쓴다. */
.primary, .secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-height: 28px;
    min-width: 4.5rem;
    padding: 0 10px;
    font-weight: 700;
    line-height: 1;
}
.primary { border: 1px solid var(--gold); background: var(--gold); color: var(--on-fill); }
.secondary { border: 1px solid #4a6d89; background: transparent; color: var(--text); }
.secondary.small { height: 28px; min-height: 28px; padding: 0 10px; }
.link-button { padding: .3rem; background: transparent; color: var(--cyan-soft); }
.inline-action { margin-top: 1rem; text-align: center; }
.help { margin: 1.2rem 0 0; font-size: 14px; text-align: center; word-break: keep-all; }
.flash { margin: 0 0 1.35rem; padding: .9rem 1rem; border-left: 1px solid var(--line); background: var(--accent-bg); }
.flash.success { border-color: var(--success); color: var(--success); }
.flash.error { border-color: var(--danger); color: var(--danger); }
.service-header {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(4vw, 48px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--bg);
}
.service-header > div { display: flex; align-items: center; gap: .8rem; font-size: 13px; letter-spacing: .08em; }
.brand-mark { font-size: 20px; font-weight: 900; letter-spacing: -.08em; }
/* #90: 로그인 이후 화면에도 실제 로고를 쓴다. 예전에는 "DM" 글자였다. */
.header-logo { height: 26px; width: auto; display: block; }
.portal-shell { width: min(1440px, calc(100% - 7vw)); margin: 0 auto; padding: 3.2rem 0 5rem; }
.project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(480px, .9fr);
    gap: 4rem;
    align-items: end;
    margin-bottom: 2.2rem;
}
.project-hero h1 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -.055em; }
.project-hero p:not(.eyebrow) { color: var(--muted); }
.project-hero dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }
.project-hero dl div { padding: 1rem 1rem 0; border-left: 1px solid var(--line); }
.project-hero dt { color: var(--muted); font-size: 13px; }
.project-hero dd { margin: .3rem 0 0; font-weight: 800; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 1.4rem; align-items: start; }
.files-panel { margin: 0 0 1.4rem; padding: 1.6rem; border: 1px solid var(--line); background: var(--panel); }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.file-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding: 1rem; border: 1px solid rgba(255,255,255,.09); background: var(--panel-soft); }
.file-card > div { min-width: 0; }
.file-card h3 { margin: .25rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.file-card p { margin: 0; color: var(--muted); font-size: 13px; }
.file-type { color: var(--cyan-soft); font-size: 13px; font-weight: 800; }
.panel { border: 1px solid var(--line); background: var(--panel); }
.editor { padding: 2.2rem; }
.history { padding: 1.6rem; position: sticky; top: 1.5rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-head h2, .history h2 { margin: 0; font-size: 20px; }
/* 상태 표시에는 테두리를 두르지 않는다 — 네모는 클릭할 수 있는 것의 표시다(D-022). */
.status { padding: 0 8px; border: 0; color: var(--cyan-soft); font-size: 13px; }
.notice { margin: 1.6rem 0 .6rem; padding: 1rem 1.1rem; background: var(--accent-bg); color: var(--text); }
.question { padding: 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.question-title { display: flex; gap: .65rem; align-items: center; }
.question h3 { margin: 0; font-size: 20px; }
.question > p { margin: .45rem 0 .8rem; color: var(--muted); font-size: 14px; }
.required, .optional { padding: .18rem .45rem; font-size: 13px; }
.required { color: var(--gold); font-weight: 700; }
.optional { background: var(--accent-bg); color: var(--cyan-soft); }
.none-check { display: flex; align-items: center; width: fit-content; margin-top: .65rem; color: var(--muted); font-size: 14px; }
.none-check input { width: 17px; min-height: 17px; margin: 0 .45rem 0 0; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; padding-top: 1.6rem; }
.history-item { display: flex; justify-content: space-between; gap: .6rem; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.history-item span { color: var(--muted); font-size: 13px; }
.history-detail { margin-top: 1.4rem; padding: 2.2rem; }
.review-row { padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.review-row h3 { margin: 0 0 .45rem; font-size: 14px; color: var(--cyan-soft); }
.review-row p { margin: 0; color: #d7e2f1; }

/* PC 전용 화면이라는 것을 **레이아웃이 실제로 무너지는 폭에서** 알린다.
   기준은 위의 `body { min-width: 1024px }`와 같은 숫자다. 두 숫자가 다르면
   그 사이 폭에서 안내도 안 나오고 화면이 가로로 잘린다.
   실제로 600px과 1024px 사이가 비어 있었다 — 아이패드 세로(768px)나 노트북 창을
   반으로 나눈 경우가 여기 들어가고, 그때 로그인 칸이 화면 밖으로 밀렸다.
   고객이 **처음 보는 화면**이 그랬다. */
/* 2026-08-21 대표 확정 — 고객서비스는 아직 PC 전용이다.
   전체 개발이 끝난 뒤에 모바일을 따로 만든다. 지금 모바일에 힘을 쓸 때가 아니다.
   다만 **현황판까지만** 예외로 열어 둔다. 고객이 폰으로 여는 일이 잦고,
   현황판은 보기만 하는 화면이라 위험이 없다. 그 아래 입력 화면은 예전대로 막는다. */
@media (max-width: 1023px) {
    body { min-width: 0; }

    /* 머리글이 한 줄에 안 들어가 화면 밖으로 밀린다(390px 실측). 접어 준다. */
    .service-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .service-header > * { min-width: 0; }
    .cp-guidelink { margin-left: 0; }

    .portal-shell { padding: 14px; }
    .project-hero { display: block; }
    .project-hero dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 12px; }

    /* 현황판 아래는 PC 전용이다. 탭과 본문을 감추고 안내만 남긴다. */
    .cp-tabs, .cp-tabbody, .scenario-tabs { display: none; }
    .cb-pconly { display: block; }

    /* 로그인 화면은 예전 그대로 PC 안내만 띄운다. 현황판은 로그인 뒤에만 있다. */
    .auth-page .desktop-only { display: none; }
    .auth-page .mobile-only {
        min-height: 100vh;
        display: grid;
        align-content: center;
        padding: 2.2rem;
        text-align: center;
        background: var(--bg);
    }
    .auth-page .mobile-only strong { font-size: 20px; }
    .auth-page .mobile-only p { color: var(--muted); }

    .portal-page .mobile-only {
        display: block;
        margin: 0;
        padding: 10px 14px;
        text-align: left;
        background: #11233a;
        border-bottom: 1px solid var(--line, #263d57);
    }
    .portal-page .mobile-only strong { display: block; font-size: 14px; }
    .portal-page .mobile-only p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
}

/* 휴대폰에서만 보이는 안내. PC 에서는 없다. */
.cb-pconly {
    display: none;
    border: 1px solid var(--line, #263d57);
    background: #11233a;
    padding: 16px 14px;
    margin-top: 14px;
    font-size: 14px;
}
.cb-pconly p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.attach-queue { margin-top: .5rem; }
.attach-queue-item { padding: .25rem 0; font-size: 14px; }
.attach-drop-hover { outline: 2px dashed var(--cyan-soft); outline-offset: 4px; }

.staff-entry { margin-top: 1.4rem; text-align: right; }
.staff-entry a { color: var(--muted); font-size: 13px; text-decoration: underline; }
.staff-entry a:hover { color: var(--cyan-soft); }

/* v1.7: company logo on login */
.login-logo { display: block; width: 240px; max-width: 78%; height: auto; margin: 0 0 1.1rem; }
.help.notice { text-align: left; line-height: 1.7; word-break: keep-all; }


/* v2.0-r3k: 목록 항목 구분선 제거 — 여백으로 구분(관리자 화면과 동일 기준, 대표 지시) */
.question { border-bottom: 0; }
.history-item { border-bottom: 0; }
.review-row { border-bottom: 0; }
table tbody td { border-bottom: 0; }


input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan-soft); }


/* 요청사항 세 칸 표 (D-052) — 제목 · 고객 요청사항 · 담당자 의견
   관리 화면과 같은 표다. 다른 것은 어느 칸을 고칠 수 있느냐뿐이다. */
/* 남는 폭은 **고객이 쓰는 칸**이 갖는다. 여기가 이 화면의 주인공이다.
   제목과 담당자 의견은 폭을 못 박아 남는 폭을 빨아들이지 못하게 한다. */
.req-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.req-table th { padding: 10px; text-align: left; color: var(--cyan-soft); font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.req-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.req-table .q-title { width: 17rem; }
.req-table .q-mine { width: auto; }
.req-table .q-title .sub { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.req-table .q-staff { width: 15rem; color: var(--muted); word-break: break-word; }
.req-table textarea { width: 100%; }
.field-block label { display: block; margin-bottom: 8px; font-size: 14px; }
.field-block textarea { width: 100%; }


/* 글자수 표시(#106) — 관리 화면과 같은 규칙이다. */
.field-count {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 13px; color: var(--muted); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.field-count.full { color: var(--danger); }
.has-count { position: relative; }
.has-count > input, .has-count > textarea { padding-right: 56px; }


/* 시나리오별 탭 (대표 확정 2026-08-06).
   연출이 둘 이상일 때만 나온다. 하나면 아예 그리지 않는다.
   지금 고른 것에만 금색 밑줄을 둔다 — 테두리를 두르면 표 안의 네모처럼 과하다. */
.scenario-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.scenario-tab {
  padding: 8px 12px; font-size: 14px; font-weight: 700;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.scenario-tab:hover { color: var(--text); }
.scenario-tab.on { color: var(--text); border-bottom-color: var(--gold); }
.scenario-hint { margin: 0 0 8px; font-size: 13px; }
.request-shared-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(16rem,2fr);gap:1.15rem}
.contribution-list{list-style:none;margin:0 0 .65rem;padding:0;display:grid;gap:.4rem}.contribution-list li{padding:.55rem .65rem;border:1px solid #294968;border-radius:4px}
.contribution-list strong{display:block;margin-bottom:.18rem;color:inherit}.contribution-empty{margin:.4rem 0}.request-question-v2>h3{font-size:20px}

/* ===== 고객 포털 5탭 (2026-08-09) ===== */
.cp-tabs { display: flex; gap: 2px; margin: 1.4rem 0 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cp-tab {
    padding: .7rem 1.25rem; font-size: 14px; color: var(--muted); text-decoration: none;
    border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; position: relative; top: 1px;
}
.cp-tab:hover { color: var(--text); }
.cp-tab.on { color: var(--text); font-weight: 700; background: var(--panel); border-color: var(--line); border-bottom: 1px solid var(--panel); }
.cp-lock { font-size: 13px; margin-left: 3px; }
.cp-tabbody { padding-top: 1.4rem; }

.cp-summary .cp-info {
    background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
    padding: 1rem 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem 0; margin-bottom: 1.3rem;
}
.cp-info > div { padding-right: 1.25rem; }
.cp-info dt { color: var(--muted); font-size: 13px; margin-bottom: .25rem; }
.cp-info dd { margin: 0; font-size: 14px; font-weight: 700; }
.cp-warn { color: var(--gold); }

.cp-sec { margin-bottom: 1.3rem; }
.cp-sec-t { font-size: 20px; font-weight: 700; margin: 0 0 .4rem; }
.cp-sec-t .cp-n { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: .5rem; }

.cp-tbl {
    width: 100%; border-collapse: collapse; background: var(--panel);
    border: 1px solid var(--line); border-radius: 9px; overflow: hidden; table-layout: fixed;
}
/* 열 폭 — 인라인 style은 CSP(style-src 'self')가 막으므로 여기서 준다.
   세 표가 열 성격이 달라 표마다 따로 맞춘다. 명칭 열은 내용이 대략 차도록,
   숫자(드론수량)·배지 열은 좁게 둬 남는 폭이 한 열에 쏠리지 않게 한다(열폭낭비 방지). */
.cp-t-shows col:nth-child(1) { width: 20%; } /* 드론쇼 */
.cp-t-shows col:nth-child(2) { width: 15%; } /* 예정일시 */
.cp-t-shows col:nth-child(3) { width: 20%; } /* 장소 */
.cp-t-shows col:nth-child(4) { width: 9%;  } /* 드론 수량 */
.cp-t-shows col:nth-child(5) { width: 24%; } /* 시나리오 */
.cp-t-shows col:nth-child(6) { width: 12%; } /* 비행허가 */
.cp-t-locs  col:nth-child(1) { width: 22%; } /* 장소 */
.cp-t-locs  col:nth-child(2) { width: 16%; } /* 사용 드론쇼(병합) */
.cp-t-locs  col:nth-child(3) { width: 18%; } /* 〃 일자·시간 */
.cp-t-locs  col:nth-child(4) { width: 8%;  } /* 드론 수량 */
.cp-t-locs  col:nth-child(5) { width: 24%; } /* 시나리오 */
.cp-t-locs  col:nth-child(6) { width: 12%; } /* 비행허가 */
.cp-t-scen  col:nth-child(1) { width: 27%; } /* 시나리오 */
.cp-t-scen  col:nth-child(2) { width: 18%; } /* 사용 드론쇼(병합) */
.cp-t-scen  col:nth-child(3) { width: 18%; } /* 〃 */
.cp-t-scen  col:nth-child(4) { width: 8%;  } /* 드론 수량 */
.cp-t-scen  col:nth-child(5) { width: 15%; } /* 고객요청 */
.cp-t-scen  col:nth-child(6) { width: 14%; } /* 제공자료 */
.cp-tbl th {
    text-align: left; font-size: 13px; color: var(--muted); font-weight: 700;
    padding: .65rem 1rem; background: var(--panel-soft); border-bottom: 1px solid var(--line); word-break: keep-all;
}
.cp-tbl td { font-size: 14px; text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.cp-tbl tr:last-child td { border-bottom: none; }
.cp-tbl td .sub { display: block; font-size: 13px; color: var(--muted); margin-top: .15rem; }
.cp-tbl .cno { color: var(--cyan); font-weight: 700; }

.cp-chip { display: inline-block; font-size: 13px; font-weight: 700; padding: .18rem .6rem; border-radius: 20px; white-space: nowrap; }
.cp-chip.ok { background: var(--panel-soft); color: var(--success); border: 1px solid #2f5138; }
.cp-chip.wait { background: var(--panel-soft); color: var(--gold); border: 1px solid #6a5a2a; }
.cp-chip.no { background: var(--panel-soft); color: var(--danger); border: 1px solid #5a2a2a; }

.cp-foot { color: var(--muted); font-size: 13px; line-height: 1.7; border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .3rem; }
.cp-foot b { color: var(--text); }

.cp-placeholder {
    background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2.2rem 1.5rem; text-align: center;
}
.cp-placeholder h2 { margin: 0 0 .5rem; font-size: 20px; }

@media (max-width: 720px) {
    .cp-summary .cp-info { grid-template-columns: repeat(2, 1fr); }
    .cp-tab { padding: .6rem .9rem; font-size: 14px; }
}

/* ===== 텍스트 넘침 규칙 (대표 확정 2026-08-09) — 전 화면 공통 ===== */
/* 정해진 공간을 넘치면 한 줄로 자르고, 실제로 넘칠 때만 시안 점선 밑줄 + 클릭 펼침. */
.clip { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.clip.is-clipped { border-bottom: 1px dashed var(--cyan); cursor: pointer; }
.clip-pop {
    position: absolute; z-index: 9999; max-width: min(90vw, 420px);
    background: var(--panel); color: var(--text); border: 1px solid var(--cyan);
    border-radius: 8px; padding: .55rem .8rem; font-size: 14px; line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
}

/* ===== 비행허가 탭 (2026-08-09) ===== */
.cp-intro { color: var(--muted); font-size: 14px; margin: 0 0 1.2rem; }
.cp-permit { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.cp-permit-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.cp-permit-n { min-width: 0; }
.cp-permit-n b { font-size: 20px; }
.cp-permit-sub { display: block; color: var(--muted); font-size: 13px; margin-top: .2rem; }
.cp-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem 0; margin: 0; }
.cp-pgrid > div { padding-right: 1.25rem; min-width: 0; }
.cp-pgrid dt { color: var(--muted); font-size: 13px; margin-bottom: .25rem; }
.cp-pgrid dd { margin: 0; font-size: 14px; font-weight: 700; }
@media (max-width: 720px) { .cp-pgrid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 만족도 응답(고객 포털, 2026-08-09) ===== */
.cp-satwrap.cp-locked { opacity: .55; }
.cp-satform { display: block; }
.cp-satq { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.cp-satq-sum { border-color: #6a5a2a; background: #14161b; }
.cp-satlbl { font-size: 20px; font-weight: 700; margin-bottom: .4rem; }
.cp-satguide { font-size: 14px; color: var(--muted, #8fa0b4); margin-bottom: .8rem; line-height: 1.5; }
.cp-scale { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.cp-scale-opt { flex: 1; min-width: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    border: 1px solid var(--line); border-radius: 8px; padding: .6rem .3rem; cursor: pointer; background: var(--panel-soft); text-align: center; }
.cp-scale-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-scale-n { font-size: 20px; font-weight: 800; color: var(--muted); }
.cp-scale-l { font-size: 13px; color: var(--muted); word-break: keep-all; }
.cp-scale-opt:hover { border-color: var(--cyan); }
.cp-scale-opt:has(input:checked) { border-color: var(--gold); background: #2a2410; }
.cp-scale-opt:has(input:checked) .cp-scale-n { color: var(--gold); }
.cp-scale-opt:has(input:checked) .cp-scale-l { color: var(--text); font-weight: 700; }
.cp-scale-opt:has(input:disabled) { cursor: default; }
.cp-satq textarea { width: 100%; box-sizing: border-box; }
.cp-lockbar { margin-top: .3rem; background: var(--panel-soft); border: 1px solid var(--gold); border-radius: 8px; padding: .8rem 1rem; font-size: 14px; color: var(--text); }
.cp-lockbar b { color: var(--gold); }

/* 로그인 동의 3항목(2026-08-09): 활용·법적고지 필수, 안내문자 선택 */
.consent-block { margin: 2px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.consent-item label { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.consent-item .consent-text { min-width: 0; flex: 1 1 auto; }
.consent-item input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; align-self: flex-start; width: 16px !important; height: 16px !important; min-height: 0 !important; }
.consent-req { color: var(--danger); font-weight: 700; }
.consent-opt { color: var(--muted); }
.consent-item details { margin: 3px 0 0 24px; }
.consent-item summary { font-size: 13px; color: var(--cyan-soft); cursor: pointer; list-style: none; }
.consent-item summary::-webkit-details-marker { display: none; }
.consent-item summary::before { content: "▸ "; }
.consent-item details[open] summary::before { content: "▾ "; }
.consent-detail { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* 고객 화면번호(2026-08-09 대표 지시) — 제목 옆 작은 회색 */
.screen-no { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.project-hero .eyebrow .screen-no { color: var(--cyan-soft); }

/* 907C 만족도 — 질문 우측 1~5, 의견 두 줄, 척도 범례는 상단 한 번만 표시한다. */
.cp-satwrap{max-width:880px}
.cp-satlegend{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;font-size:13px;color:#f5f8fc;padding:8px 12px;border:1px solid var(--line);background:rgba(37,212,244,.07);margin-bottom:8px;max-width:880px}
.cp-satlegend b{color:#efd17e;margin-right:2px;font-size:14px}
.cp-satrow{border:1px solid var(--line);background:#11233a;padding:8px 12px;margin-bottom:8px}
.cp-satrow-sum{border-color:rgba(239,209,126,.55);background:#0a1a2c}
.cp-satrow-main{display:flex;align-items:center;gap:16px}
.cp-satrow-t{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.5;color:#f5f8fc}
.cp-satrow-g{display:block;font-size:13px;font-weight:400;color:#9cafc5}
.cp-scale5{display:inline-flex;gap:8px;flex-shrink:0}
.cp-ck{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.cp-ck input{position:absolute;opacity:0;width:0;height:0}
.cp-ck i{width:16px;height:16px;border:1px solid #4a6d89;background:#07111f;display:inline-block;position:relative}
.cp-ck span{font-size:13px;color:#9cafc5}
.cp-ck:hover i{border-color:#25d4f4}
.cp-ck:has(input:checked) i{background:#efd17e;border-color:#efd17e}
.cp-ck:has(input:checked) i::after{content:"✓";position:absolute;inset:0;color:#17200f;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cp-ck:has(input:checked) span{color:#efd17e;font-weight:700}
.cp-satrow-ans{display:flex;align-items:center;gap:8px;margin-top:4px}
.cp-satrow-ans textarea{flex:1;min-width:0;height:58px;min-height:58px;padding:8px 56px 8px 12px;line-height:1.5}
.cp-satrow.cp-miss{border-color:#ff7d83;box-shadow:0 0 0 2px rgba(255,125,131,.25)}
.cp-satrow-sum .cp-satrow-ans textarea{height:96px;min-height:96px}

/* 905C 요청서 — 이전 답변과 새 입력을 한 박스에 두고, 파일은 하단 공통 영역에서만 받는다. */
.request-question-v2 .q-mine h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:20px}
.request-question-v2 h3 .none-check{margin-left:auto;font-size:13px;color:#9cafc5;font-weight:400;white-space:nowrap}
.request-question-v2 .q-staff{margin-top:36px}
.request-columns-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(16rem,2fr);gap:1.15rem;padding:0 0 6px}
.request-columns-head strong{font-size:14px;color:#9cafc5}
.q-box{position:relative;border:1px solid var(--line);background:#0a1a2c;padding:0}
.q-box .contribution-list{margin:0;padding:8px 12px 4px;list-style:none;display:block;gap:0}
.q-box .contribution-list li{font-size:13px;color:#9cafc5;padding:2px 0;border:0;border-radius:0}
.q-box .contribution-list li strong{display:inline;color:#9beeff;margin:0 6px 0 0;font-weight:700}
.q-box textarea{border:0;min-height:58px;height:58px;width:100%;background:#07111f}
.request-shared-grid.one-col{grid-template-columns:minmax(0,1fr)}
.q-box textarea.is-none{opacity:.55;cursor:not-allowed}

/* ── 908C 이용안내 (2026-08-20 대표 확정) ─────────────────────────────
   탭이 아니라 머리글 오른쪽 링크로 연다. 가로 스크롤은 만들지 않는다. */
.service-header > div:first-child { margin-right: auto; }
.cp-guidelink { order: 1; margin-right: 1.2rem; color: var(--cyan-soft); font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; }
.cp-guidelink:hover, .cp-guidelink.on { border-bottom-color: var(--cyan-soft); }
.service-header > form { order: 2; }

/* 908C 고객 이용안내 — 2026-08-21 대표 확정.
   코덱스 시안(207-customer-platform-guide)의 구성을 그대로 옮긴다.
   색과 글자 크기는 고객포털 규칙 안에서만 쓴다. 둥근 모서리는 두지 않는다. */
.cg { line-height: 1.7; text-align: left; }
.cg-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .4px; color: var(--cyan-soft); }
.cg-title { margin: .3rem 0 .5rem; font-size: 34px; line-height: 1.25; }
.cg-lead { margin: 0 0 1.6rem; font-size: 14px; color: var(--muted); }

.cg-purpose { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px;
              border: 1px solid var(--line); background: var(--panel-soft); padding: 20px 22px; }
.cg-purpose h3 { margin: .4rem 0 .6rem; font-size: 20px; line-height: 1.35; }
.cg-purpose p { margin: 0; font-size: 14px; color: var(--muted); }
.cg-purpose p b { color: var(--text); }
.cg-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.cg-benefits article { border: 1px solid var(--line); padding: 10px 12px; background: var(--bg); }
.cg-benefits b { display: block; font-size: 14px; color: var(--cyan-soft); }
.cg-benefits span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

.cg-block { margin-top: 1.8rem; }
.cg-block > h3 { margin: 0 0 .7rem; font-size: 20px; color: var(--cyan-soft); }
.cg-note { margin: 0 0 .8rem; font-size: 13px; color: var(--muted); }

.cg-steps { margin: 0; padding-left: 1.3rem; }
.cg-steps li { margin: .45rem 0; font-size: 14px; }
.cg-steps b { color: var(--text); }
.cg-steps span { display: block; font-size: 13px; color: var(--muted); }
.cg-list { margin: .4rem 0 0; padding-left: 1.3rem; }
.cg-list li { margin: .35rem 0; font-size: 14px; }

.cg-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cg-menu article { border: 1px solid var(--line); padding: 14px; background: var(--panel-soft); }
.cg-no { display: inline-block; font-size: 13px; font-weight: 700; color: var(--gold, #efd17e); }
.cg-menu h4 { margin: .2rem 0 .5rem; font-size: 20px; }
.cg-menu p { margin: 0 0 .5rem; font-size: 14px; color: var(--muted); }
.cg-menu ul { margin: 0; padding-left: 1.1rem; }
.cg-menu li { font-size: 13px; margin: .25rem 0; color: var(--muted); }
.cg-menu li b { color: var(--text); }
.cg-when { display: block; margin-top: .7rem; font-size: 13px; color: var(--cyan-soft); }

.cg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 1rem; }
.cg-flow span { border: 1px solid var(--line); background: var(--panel-soft); padding: 8px 12px; font-size: 13px; }
.cg-flow i { font-style: normal; color: var(--muted); font-size: 13px; }

.cg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cg-two article { border: 1px solid var(--line); padding: 14px; }
.cg-two h4 { margin: 0 0 .5rem; font-size: 14px; }
.cg-two ul { margin: 0; padding-left: 1.1rem; }
.cg-two li { font-size: 13px; margin: .3rem 0; color: var(--muted); }
.cg-ok { color: #7ee0b0; }
.cg-need { color: #efd17e; }

.cg-tbl { width: 100%; table-layout: fixed; border-radius: 0; }
.cg-tbl th { width: 30%; text-align: left; vertical-align: top; font-weight: 700; font-size: 14px; }
.cg-tbl td { font-size: 14px; word-break: keep-all; }

.cg-help { margin-top: 1.8rem; border: 1px solid var(--line); background: var(--panel-soft); padding: 20px 22px; }
.cg-help h3 { margin: 0 0 .5rem; font-size: 20px; }
.cg-help p { margin: 0 0 .4rem; font-size: 14px; color: var(--muted); }
.cg-help p b { color: var(--text); }

@media (max-width: 1200px) {
  .cg-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cg-purpose, .cg-benefits, .cg-menu, .cg-two { grid-template-columns: 1fr; }
}

/* ── 현황판 (2026-08-21 대표 확정) ─────────────────────────────
   로그인하면 탭이 아니라 이것이 먼저 보인다.
   담는 것은 넷뿐이다 — 남은 날 · 진행 막대 · 지금 하실 일 하나 · 담당자. */
.cb { margin: 0 0 18px; }
.cb-dday { float: right; text-align: right; margin: 0 0 6px 14px; }
.cb-dday b { display: block; font-size: 34px; line-height: 1; color: #efd17e; }
.cb-dday span { font-size: 13px; color: #9cafc5; }

.cb-flow { display: grid; grid-template-columns: repeat(5, 1fr);
           border: 1px solid #263d57; background: #11233a; margin-bottom: 14px; clear: both; }
.cb-step { padding: 12px 4px; text-align: center; border-right: 1px solid #263d57; }
.cb-step:last-child { border-right: 0; }
.cb-step i { display: block; width: 12px; height: 12px; margin: 0 auto 8px;
             border: 2px solid #263d57; background: #07111f; }
.cb-step b { display: block; font-size: 13px; font-weight: 700; color: #9cafc5; }
.cb-step span { display: block; font-size: 13px; color: #9cafc5; }
.cb-step.done i { background: #7ee0b0; border-color: #7ee0b0; }
.cb-step.done b { color: #7ee0b0; }
.cb-step.now i { background: #efd17e; border-color: #efd17e; }
.cb-step.now b { color: #efd17e; }

.cb-todo { display: flex; align-items: center; justify-content: space-between; gap: 18px;
           border: 2px solid #25d4f4; background: #11233a; padding: 12px 16px; margin-bottom: 12px; }
.cb-todo-txt { min-width: 0; }
.cb-todo .cb-tag { font-size: 13px; font-weight: 700; color: #25d4f4; }
.cb-todo h2 { font-size: 20px; margin: 2px 0; }
.cb-todo p { font-size: 14px; color: #9cafc5; margin: 0; }
.cb-todo .cb-go { flex: 0 0 auto; }
.cb-todo.calm { border-color: #263d57; }
.cb-todo.calm .cb-tag { color: #9cafc5; }
.cb-todo.done { border-color: #7ee0b0; }
.cb-todo.done .cb-tag { color: #7ee0b0; }
.cb-go { display: inline-block; background: #efd17e; color: #07111f; font-size: 14px; font-weight: 700;
         height: 44px; line-height: 44px; padding: 0 18px; text-decoration: none; }

.cb-staff { margin: 6px 0 0; font-size: 14px; color: #9cafc5; }
.cb-staff b { color: #f5f8fc; }
.cb-call { font-size: 14px; color: #efd17e; text-decoration: none;
           border: 1px solid #263d57; padding: 3px 10px; margin-left: 6px; }

/* 휴대폰에서는 5칸이 한 줄에 안 들어간다. 3칸씩 접는다. */
@media (max-width: 560px) {
  .cb-flow { grid-template-columns: repeat(3, 1fr); }
  .cb-step:nth-child(3) { border-right: 0; }
  .cb-step:nth-child(-n+3) { border-bottom: 1px solid #263d57; }
}

/* 디자인 확인 (906C) — 자료 카드에 붙는다. */
.cp-checked { margin: 4px 0 0; font-size: 13px; color: #7ee0b0; }
.cp-checkwait { margin: 4px 0 0; font-size: 13px; color: #efd17e; }
.cp-checkform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; width: 100%; }
.cp-checkform input { flex: 1; min-width: 160px; font-size: 13px; }

/* 확인이 필요한 자료는 한 줄을 통째로 쓴다. 세 칸짜리 카드에 넣으면
   파일명도 단추도 글자가 세로로 쪼개진다(1200px 실측). */
.file-card-wide { grid-column: 1 / -1; flex-wrap: wrap; align-items: flex-start; }
.file-card-wide > div { flex: 1 1 240px; }
.file-card-wide h3 { white-space: normal; }

/* 이용안내 탭 — 맨 앞에서 눈에 띄게 (2026-08-21 대표 지시).
   처음 오신 고객이 가장 먼저 찾아야 하는 화면이라 다른 탭과 다르게 보인다. */
.cp-tab-guide { color: #07111f; background: #efd17e; font-weight: 700; border-color: #efd17e; }
.cp-tab-guide:hover { color: #07111f; }
.cp-tab-guide.on { color: #07111f; background: #efd17e; border-color: #efd17e; }

/* 남은 날의 단위 — 숫자만 있으면 무엇의 숫자인지 알 수 없다. */
.cb-dday b i { font-style: normal; font-size: 20px; margin-left: 2px; }

/* 행사명과 담당자를 한 줄에 (대표 지시 2026-08-21 「행사명 옆으로」). */
.hero-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.hero-name h1 { min-width: 0; flex: 0 1 auto; }
.hero-name .cb-staff { margin: 0; flex: 0 0 auto; white-space: nowrap; }