/* 참모 공개 홈(도메인 첫 화면). 로그인 뒤 앱과 같은 세계다: 웜 페이퍼 바탕, 레일 네이비는 대화와 도구 띠 한 곳,
   코발트 주 행동, 금색은 고른 도구 칸 한 곳(아이콘과 밑줄). 그림은 HTML로 그린 제품 예시 화면뿐이다.
   값은 전부 lm-tokens.css 변수다(이 파일에 hex를 두지 않는다). CSP 때문에 인라인 스타일이 없다. */

.cl {
  font-size: 16px;
  line-height: 1.65;
}

.cl ::selection {
  background: var(--lm-trust-soft);
  color: var(--lm-text-strong);
}

.cl a {
  text-underline-offset: 4px;
}

.cl :focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
}

.cl-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.cl-skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: var(--lm-z-overlay);
  padding: 10px 14px;
  border-radius: var(--lm-radius);
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink-strong);
  font-weight: 700;
  text-decoration: none;
}

.cl-skip:focus {
  top: 12px;
}

/* ── 상단 막대 ── */

.cl-bar {
  position: sticky;
  top: 0;
  z-index: var(--lm-z-bar);
  background: var(--lm-bg-page);
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.cl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--lm-text-strong);
  text-decoration: none;
}

/* lumanic.ai 공식 로고(698×88)를 그대로 쓴다. 22px은 원본의 1/4이라 2배 화면에서도 화소가 맞는다 */
.cl-logo {
  display: block;
  width: auto;
  height: 22px;
}

.cl-logo--sm {
  height: 16px;
}

.cl-brand__sub {
  padding-left: 10px;
  border-left: 1px solid var(--lm-hairline);
  color: var(--lm-text-muted);
  font-size: 13px;
}

.cl-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.cl-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--lm-radius);
  color: var(--lm-text);
  font-size: 14px;
  text-decoration: none;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-nav a:hover {
  background: var(--lm-bg-subtle);
  color: var(--lm-text-strong);
}

.cl-bar__actions {
  display: flex;
  gap: 8px;
}

/* ── 단추 ── */

.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--lm-radius);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-btn--primary {
  background: var(--lm-primary);
  color: var(--lm-on-primary);
}

.cl-btn--primary:hover {
  background: var(--lm-primary-hover);
}

.cl-btn--primary:active {
  background: var(--lm-primary-pressed);
}

.cl-btn--secondary {
  border-color: var(--lm-border);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
}

.cl-btn--secondary:hover {
  border-color: var(--lm-border-strong);
  background: var(--lm-bg-subtle);
}

.cl-btn--quiet {
  color: var(--lm-primary);
}

/* 옅은 바탕 위에서도 AA를 지키도록 올렸을 때 글자를 한 단 짙게 한다 */
.cl-btn--quiet:hover {
  background: var(--lm-bg-subtle);
  color: var(--lm-primary-pressed);
}

.cl-btn--lg {
  min-height: 52px;
  padding: 0 22px;
  font-size: 16px;
}

.cl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── 첫 화면 ── */

.cl-hero {
  padding: 64px 0 32px;
}

.cl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 56px;
  align-items: end;
}

.cl-hero h1 {
  margin: 0 0 24px;
  color: var(--lm-text-strong);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.cl-hero__lead {
  max-width: 36em;
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.65;
}

.cl-hero__facts {
  margin: 0;
  border-top: 1px solid var(--lm-border-strong);
}

.cl-hero__facts div {
  padding: 16px 0;
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-hero__facts dt {
  color: var(--lm-text-muted);
  font-size: 13px;
  font-weight: 650;
}

.cl-hero__facts dd {
  margin: 4px 0 0;
  color: var(--lm-text-strong);
  font-size: 15px;
  line-height: 1.55;
}

/* ── 대화와 도구 띠(페이지에서 네이비는 여기 한 곳) ──
   2026-09-28부터 번호를 달지 않는다. 대화가 가운데에 있고 나머지는 필요할 때 꺼내 쓰는 도구라,
   차례가 정보가 아니기 때문이다. 칸은 번호 대신 앱 레일과 같은 아이콘으로 알아본다. */

.cl-band {
  padding-top: 32px;
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink);
}

.cl-band__title {
  margin: 0;
  color: var(--lm-rail-ink-strong);
  font-size: 24px;
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.cl-band__sub {
  margin: 6px 0 24px;
  color: var(--lm-rail-muted);
  font-size: 14px;
}

.cl-tools {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--lm-rail-line);
}

.cl-tool {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 124px;
  padding: 20px 20px 26px;
  border-left: 1px solid var(--lm-rail-line);
  color: var(--lm-rail-ink);
  text-decoration: none;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-tool:first-child {
  border-left: 0;
}

.cl-tool:hover {
  background: var(--lm-rail-hover);
}

.cl-tool:focus-visible {
  outline: var(--lm-focus-ring-dark);
  outline-offset: -3px;
}

.cl-tool__icon {
  margin-bottom: 2px;
  color: var(--lm-rail-muted);
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-tool:hover .cl-tool__icon {
  color: var(--lm-rail-ink);
}

.cl-tool__name {
  color: var(--lm-rail-ink-strong);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.cl-tool__line {
  color: var(--lm-rail-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.cl-tool[aria-selected="true"] {
  background: var(--lm-rail-selected);
}

.cl-tool[aria-selected="true"] .cl-tool__icon {
  color: var(--lm-rail-accent);
}

/* 고른 도구는 금색 아이콘과 밑줄로 아래 예시 화면과 잇는다 */
.cl-tool[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--lm-rail-accent);
}

/* ── 도구 예시 화면 ── */

.cl-panels {
  padding-top: 40px;
  padding-bottom: 72px;
}

.cl-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

/* 스크립트가 없으면 여섯 패널이 위에서 아래로 쌓인다. 스크립트가 탭으로 바꾸면(is-tabbed) 고른 것 하나만 남는다 */
.cl-panel + .cl-panel {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--lm-hairline);
}

.cl-panels.is-tabbed .cl-panel + .cl-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 탭으로 바꾸면 고른 패널 하나만 둔다. 바꿀 때는 나가는 패널(is-leaving)을 같은 칸에 겹쳐 둔 채
   160ms 동안 흐리게 하고, 들어오는 패널은 같은 시간 동안 선명해진다. 높이는 전환이 끝나면 새 패널에 맞춘다.
   전환은 첫 선택이 그려진 뒤(is-ready)부터만 건다. 처음부터 걸면 첫 패널이 불필요하게 흐려졌다 나타난다. */
.cl-panels.is-tabbed {
  display: grid;
}

.cl-panels.is-tabbed > .cl-panel {
  grid-area: 1 / 1;
}

.cl-panels.is-tabbed > .cl-panel.is-off {
  display: none;
}

.cl-panels.is-tabbed > .cl-panel.is-leaving {
  display: grid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-panels.is-ready > .cl-panel.is-entering {
  animation: cl-panel-in var(--lm-duration-fast) var(--lm-ease-out);
}

@keyframes cl-panel-in {
  from {
    opacity: 0;
  }
}

.cl-panel__text h3 {
  margin: 0 0 16px;
  color: var(--lm-text-strong);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.cl-panel__text p {
  max-width: 34em;
  margin: 0 0 20px;
  font-size: 17px;
}

.cl-panel__text .cl-panel__list {
  color: var(--lm-text-muted);
  font-size: 15px;
}

.cl-defs {
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--lm-border-strong);
  list-style: none;
}

.cl-defs li {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lm-hairline);
  font-size: 15px;
}

.cl-defs strong {
  font-weight: 700;
}

.cl-defs span {
  color: var(--lm-text-muted);
}

/* 예시 화면: 앱의 흰 표면 그대로. 실제 기록으로 읽히지 않게 '예시 화면' 표를 단다 */
.cl-mock {
  position: relative;
  margin: 0;
  padding: 26px 24px 24px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

.cl-mock__tag {
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 1px 9px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-page);
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cl-mock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-mock__title {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 16px;
  font-weight: 700;
}

/* 이 대화에서 한 것: 앱의 작업 줄과 같은 말. 차례가 아니라 지금까지 한 것만 적는다 */
.cl-mini-work {
  margin: 0;
  color: var(--lm-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cl-mini-work__label {
  margin-right: 4px;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-mini-work b {
  color: var(--lm-text-strong);
  font-weight: 750;
}

.cl-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
  padding: 0;
  color: var(--lm-text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.cl-tally li {
  padding: 3px 10px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
}

.cl-tally b {
  color: var(--lm-text-strong);
  font-weight: 750;
}

.cl-fields {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cl-fields > li {
  padding: 14px 0;
  border-top: 1px solid var(--lm-hairline);
}

.cl-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cl-field__name {
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 700;
}

.cl-field__value {
  margin: 6px 0 0;
  font-size: 15px;
}

.cl-field__hint {
  margin: 6px 0 0;
  color: var(--lm-text-muted);
  font-size: 14px;
}

.cl-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-pill);
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.cl-chip--ok {
  border-color: transparent;
  background: var(--lm-success-surface);
  color: var(--lm-success-text);
}

.cl-chip--open {
  border-style: dashed;
  border-color: var(--lm-border);
  color: var(--lm-text-muted);
}

.cl-quote {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-page);
  color: var(--lm-text-strong);
  font-size: 14px;
  line-height: 1.55;
}

.cl-quote cite {
  display: block;
  margin-top: 6px;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-style: normal;
}

.cl-ask {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-selected);
}

.cl-ask__who {
  flex: none;
  padding-top: 2px;
  color: var(--lm-primary);
  font-size: 12.5px;
  font-weight: 700;
}

.cl-ask p {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 15px;
}

/* 대화 곁의 도구 줄. 번호도 잠금도 없이 나란히 놓는다 */
.cl-mock-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lm-hairline);
}

.cl-mock-tools__label {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-mock-tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-mock-tools__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.cl-mock-tools__list .lm-icon {
  color: var(--lm-text-muted);
}

/* 방책 비교표 */
.cl-coa-legend {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--lm-text-strong);
  font-size: 14px;
  list-style: none;
}

.cl-coa-legend b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink-strong);
  font-size: 12px;
}

.cl-coa {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cl-coa th,
.cl-coa td {
  padding: 8px 6px;
  border-top: 1px solid var(--lm-hairline);
  text-align: left;
}

.cl-coa thead th {
  border-top: 0;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-coa tbody th {
  color: var(--lm-text-strong);
  font-weight: 600;
  white-space: nowrap;
}

.cl-v {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid transparent;
  border-radius: var(--lm-radius-pill);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.cl-v--good {
  background: var(--lm-success-surface);
  color: var(--lm-success-text);
}

.cl-v--mixed {
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.cl-v--bad {
  background: var(--lm-danger-surface);
  color: var(--lm-danger);
}

.cl-v--open {
  border-style: dashed;
  border-color: var(--lm-border);
  color: var(--lm-text-muted);
}

.cl-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lm-hairline);
}

.cl-note__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 700;
}

.cl-note p {
  margin: 0;
  font-size: 14.5px;
}

/* 조치 계획 */
.cl-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.cl-answers div {
  padding: 8px 12px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-inner);
}

.cl-answers dt {
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cl-answers dd {
  margin: 2px 0 0;
  color: var(--lm-text-strong);
  font-size: 14.5px;
  font-weight: 650;
}

.cl-method {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-selected);
}

.cl-method__label {
  margin: 0;
  color: var(--lm-primary);
  font-size: 12px;
  font-weight: 700;
}

.cl-method__name {
  margin: 4px 0;
  color: var(--lm-text-strong);
  font-size: 16px;
  font-weight: 750;
}

.cl-method__line {
  margin: 0;
  font-size: 14px;
}

.cl-plan {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cl-plan th,
.cl-plan td {
  padding: 9px 8px;
  border-top: 1px solid var(--lm-hairline);
  text-align: left;
  vertical-align: top;
}

.cl-plan thead th {
  border-top: 0;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-plan td:nth-child(1),
.cl-plan td:nth-child(2) {
  color: var(--lm-text-strong);
  font-weight: 650;
  white-space: nowrap;
}

/* 문서 미리보기: 회색 책상 위 흰 종이 한 장 */
/* 넘침을 자르면 위에 걸친 '예시 화면' 표가 잘린다. 모서리는 안쪽 막대가 맞춘다 */
.cl-mock--doc {
  padding: 0;
  background: var(--lm-bg-subtle);
}

.cl-mock--doc .cl-mock__tag {
  z-index: 1;
}

.cl-doc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius) var(--lm-radius) 0 0;
  background: var(--lm-bg-surface);
}

.cl-doc__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 14.5px;
  font-weight: 700;
}

.cl-num {
  color: var(--lm-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cl-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-fakebtn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.cl-doc__page {
  margin: 20px;
  padding: 28px 32px;
  background: var(--lm-bg-surface);
  border: 1px solid var(--lm-hairline);
}

.cl-doc__title {
  margin: 0 0 6px;
  color: var(--lm-text-strong);
  font-size: 20px;
  font-weight: 750;
  text-align: center;
}

.cl-doc__meta {
  margin: 0 0 20px;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cl-doc__h {
  margin: 16px 0 6px;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 750;
}

.cl-doc__p,
.cl-doc__list {
  margin: 0;
  font-size: 14px;
}

.cl-doc__list {
  display: grid;
  gap: 4px;
  padding-left: 1.3em;
}

/* 결심 기록 · 결과 */
.cl-record {
  margin: 0;
}

.cl-record div {
  padding: 10px 0;
  border-top: 1px solid var(--lm-hairline);
}

.cl-record div:first-child {
  padding-top: 0;
  border-top: 0;
}

.cl-record dt {
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-record dd {
  margin: 3px 0 0;
  color: var(--lm-text-strong);
  font-size: 15px;
}

.cl-record__label {
  margin: 16px 0 8px;
  color: var(--lm-text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.cl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cl-pills li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  font-size: 13.5px;
}

.cl-pills .is-on {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  color: var(--lm-primary);
  font-weight: 700;
}

.cl-due {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-size: 14px;
  font-weight: 650;
}

.cl-past {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lm-hairline);
}

.cl-past__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 700;
}

.cl-past p {
  margin: 0;
  font-size: 14px;
}

/* ── 이어지는 절 ── */

.cl-section {
  padding: 112px 0;
}

.cl-section--line {
  border-top: 1px solid var(--lm-hairline);
}

.cl-section--surface {
  border-top: 1px solid var(--lm-hairline);
  border-bottom: 1px solid var(--lm-hairline);
  background: var(--lm-bg-surface);
}

.cl-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

.cl-split__head h2,
.cl-section__title {
  margin: 0 0 16px;
  color: var(--lm-text-strong);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 740;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.cl-split__head p {
  max-width: 30em;
  margin: 0;
  font-size: 17px;
}

.cl-rows,
.cl-roles,
.cl-faq {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lm-border-strong);
  list-style: none;
}

.cl-rows li,
.cl-roles li {
  padding: 20px 0;
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-rows__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--lm-text-strong);
  font-size: 16px;
  font-weight: 700;
}

.cl-rows li p:not(.cl-rows__name),
.cl-roles li p:not(.cl-rows__name),
.cl-start li p:not(.cl-rows__name) {
  margin: 0;
  font-size: 15.5px;
}

.cl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-tags span {
  padding: 3px 10px;
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-surface);
  font-size: 13.5px;
}

.cl-relay {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
  margin-top: 72px;
}

.cl-relay__flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-relay__flow li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--lm-hairline);
  color: var(--lm-text-strong);
  font-size: 16px;
}

.cl-relay__flow li:last-child {
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-relay__flow .lm-icon {
  width: 20px;
  height: 20px;
  color: var(--lm-primary);
}

.cl-mock--card {
  width: 100%;
  max-width: 400px;
  justify-self: end;
}

.cl-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--lm-text-strong);
  font-size: 14px;
  font-weight: 700;
}

.cl-card__head .lm-icon {
  color: var(--lm-success-text);
}

.cl-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-card__list li {
  padding: 10px 0;
  border-top: 1px solid var(--lm-hairline);
  font-size: 14px;
}

.cl-card__who {
  display: block;
  margin-bottom: 2px;
  color: var(--lm-text-strong);
  font-size: 13px;
  font-weight: 700;
}

.cl-card__who em {
  margin-left: 6px;
  color: var(--lm-text-muted);
  font-style: normal;
  font-weight: 650;
}

.cl-foot-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 40px 0 0;
  color: var(--lm-text-muted);
  font-size: 15px;
}

.cl-section__title {
  max-width: 22em;
  margin-bottom: 40px;
}

.cl-start {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--lm-border-strong);
  list-style: none;
}

.cl-start li {
  padding: 20px 24px 24px 0;
}

.cl-start li + li {
  padding-left: 24px;
  border-left: 1px solid var(--lm-hairline);
}

.cl-start__no {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  border-radius: var(--lm-radius-pill);
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink-strong);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cl-faq details {
  border-bottom: 1px solid var(--lm-hairline);
}

.cl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  color: var(--lm-text-strong);
  font-size: 17px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.cl-faq summary::-webkit-details-marker {
  display: none;
}

.cl-faq summary .lm-icon {
  color: var(--lm-text-muted);
}

.cl-faq details[open] summary .lm-icon {
  transform: rotate(180deg);
}

.cl-faq details p {
  max-width: 40em;
  margin: 0 0 20px;
  font-size: 16px;
}

.cl-close {
  padding: 96px 0;
  border-top: 1px solid var(--lm-hairline);
}

.cl-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.cl-close h2 {
  max-width: 16em;
  margin: 0 0 12px;
  color: var(--lm-text-strong);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.cl-close p {
  margin: 0;
  color: var(--lm-text-muted);
}

.cl-footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--lm-hairline);
  color: var(--lm-text-muted);
  font-size: 13px;
}

.cl-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cl-footer p {
  margin: 0;
}

.cl-footer p.cl-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cl-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 16px;
  color: var(--lm-text);
}

.cl-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 요구사항정의서: 바닥글에서 유일한 단추. 로그인·가입 신청 링크 옆에 둔다 */
.cl-footer a.cl-footer__doc {
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out);
}

.cl-footer a.cl-footer__doc:hover {
  background: var(--lm-bg-subtle);
}

.cl-footer__doc .lm-icon {
  width: 16px;
  height: 16px;
  color: var(--lm-text-muted);
}

/* ── 좁은 화면 ── */

@media (max-width: 1080px) {
  .cl-nav {
    display: none;
  }

  .cl-bar__actions {
    margin-left: auto;
  }
}

@media (max-width: 960px) {
  .cl-hero__grid,
  .cl-panel,
  .cl-split,
  .cl-relay {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cl-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cl-tool:nth-child(4) {
    border-left: 0;
  }

  .cl-tool:nth-child(n + 4) {
    border-top: 1px solid var(--lm-rail-line);
  }

  .cl-mock--card {
    justify-self: start;
  }

  .cl-start {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cl-start li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .cl-start li:nth-child(n + 3) {
    border-top: 1px solid var(--lm-hairline);
  }
}

@media (max-width: 640px) {
  .cl-wrap {
    padding: 0 16px;
  }

  .cl-brand__sub {
    display: none;
  }

  .cl-bar__actions {
    gap: 4px;
  }

  .cl-bar__actions .cl-btn {
    padding: 0 12px;
  }

  .cl-hero {
    padding: 44px 0 36px;
  }

  .cl-hero h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }

  .cl-hero__lead {
    font-size: 17px;
  }

  .cl-actions .cl-btn--lg {
    flex: 1 1 auto;
  }

  .cl-band {
    padding-top: 28px;
  }

  .cl-band__title {
    font-size: 20px;
  }

  .cl-band__sub {
    margin-bottom: 20px;
  }

  .cl-tool {
    min-height: 0;
    padding: 14px 12px 16px;
  }

  .cl-tool__name {
    font-size: 15px;
  }

  .cl-tool__line {
    display: none;
  }

  .cl-panels {
    padding-top: 36px;
    padding-bottom: 72px;
  }

  .cl-panel + .cl-panel {
    margin-top: 48px;
    padding-top: 48px;
  }

  .cl-mock {
    padding: 22px 16px 16px;
  }

  .cl-mock--doc {
    padding: 0;
  }

  .cl-defs li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .cl-coa th,
  .cl-coa td {
    padding: 8px 3px;
  }

  .cl-coa tbody th {
    font-size: 13px;
    white-space: normal;
  }

  .cl-answers {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-plan th,
  .cl-plan td {
    padding: 8px 5px;
  }

  .cl-doc__page {
    margin: 12px;
    padding: 20px 16px;
  }

  .cl-section {
    padding: 72px 0;
  }

  .cl-relay {
    margin-top: 48px;
  }

  .cl-start {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-start li,
  .cl-start li + li {
    padding: 20px 0;
    border-left: 0;
  }

  .cl-start li + li {
    border-top: 1px solid var(--lm-hairline);
  }

  .cl-close {
    padding: 64px 0;
  }

  .cl-footer a:first-child {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl *,
  .cl *::before,
  .cl *::after {
    animation: none !important;
    transition: none !important;
  }
}