/* ───────────────────────────────────────────────────────────── * duolink 자체 스타일 — **webi 디자인 시스템의 «보정»만 담는다.** * * 🔴 정본은 design-system.css(이식본)이다. 색·간격·컴포넌트를 여기서 새로 만들지 마라 — * 새 스타일을 발명하면 화면마다 색이 갈리고, 다음 시안이 오면 전부 다시 손봐야 한다. * 필요한 컴포넌트가 없으면 «정본»(webi)에 만들고 다시 이식한다. * * 🔴 여기 남는 것은 셋뿐이다: * ① DS 에 없는 duolink 고유 화면(공개 홈·제품 상세·문의) * ② DS 컴포넌트를 이 사이트에 맞추는 «작은» 보정 * ③ 기반 모달·토스트처럼 DS 와 «구현 방식»이 다른 것 * * ⚠️ 이 파일은 design-system.css «뒤»에 로드된다 — 같은 명시도면 여기가 이긴다. * 그래서 실수로 DS 를 덮기 쉽다. DS 클래스(.ds-*)를 여기서 재정의하지 마라. * ───────────────────────────────────────────────────────────── */ /* 최소 스타일. 디자인 시스템은 사이트마다 갈아끼운다 — 여기선 골격이 보이기만 하면 된다. */ :root{--fg:#0f172a;--muted:#64748b;--bg:#f8fafc;--card:#fff;--line:#e2e8f0;--primary:#2563eb;--danger:#dc2626; --surface-soft:#f1f5f9;--surface-accent:#eff6ff;--primary-strong:#1d4ed8;--on-primary:#fff; --success-bg:#e7f6ec;--success-fg:#17612f;--success-line:#b7e0c4; --wait-bg:#fef3c7;--wait-fg:#92400e;--unknown-bg:#f3f4f6;--unknown-fg:#4b5563} /* 🔴 관리자(.dsx — 관리자 셸·로그인 body)에서는 위 옛 변수를 «DS 토큰으로 잇는다». * 위 :root 값은 라이트 리터럴뿐이라, 이걸 쓰는 규칙(th·.ds-section·.detail …)이 다크 테마에서 * 흰 상자 위 흰 글자가 됐다(2026-10-01 운영 실측: /system·/logs·/audit 의
·표 머리).
 *    DS 토큰은 라이트·다크가 둘 다 정의돼 있어 여기서 한 번 이으면 테마를 저절로 따른다.
 *    ⚠️ 공개 사이트는 design-system.css 를 안 싣고 body 에 .dsx 가 없다 — 위 리터럴 그대로(라이트 전용)다.
 *    ⚠️ --danger 는 DS 와 이름이 같아 잇지 않는다(자기 참조가 된다). 관리자가 안 쓰는 옛 변수도 잇지 않는다.
 *    재발 방지 = tools/check-css-literal-colors.py(요소 선택자에 리터럴 색 금지) · tools/contrast-audit.py(실측). */
.dsx{--fg:var(--text);--muted:var(--text-2);--card:var(--surface);--line:var(--border);
  --surface-soft:var(--surface-2);--primary:var(--brand)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
/* 🔴 PC 에서 960px 은 좁다(오너 2026-09-03). 다만 «무한정» 넓히지 않는다 —
   글줄이 길어지면 눈이 줄 끝에서 다음 줄 머리를 못 찾는다. 카드 그리드가
   넓이를 쓰고 본문은 안쪽에서 제한된다. */
.container{max-width:1400px;margin:0 auto;padding:28px 24px}
a{color:var(--primary)}
code{background:var(--surface-soft);padding:1px 5px;border-radius:4px;font-size:.9em}

.site-header,.admin-header{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}
.admin-nav{display:flex;gap:14px;margin-left:8px}
.admin-header .logout{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{color:var(--muted);font-size:.9rem}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--primary)}
/* 2026-10-21 — 푸터 바탕은 화면 끝까지, 내용은 .site-footer__in(.site-wrap)이 본문과 같은 폭으로 둔다. */
.site-footer{margin:72px 0 0;color:var(--muted);background:var(--card);border-top:1px solid var(--line)}
.site-footer a{color:var(--muted);font-size:.85rem}

.btn{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;font:inherit}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-ghost{background:transparent}
.btn-block{width:100%;padding:12px}

.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--surface-soft);font-size:.85rem;color:var(--muted)}

/* 로그인 */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0}
.auth-wrap{width:100%;max-width:380px;padding:20px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.auth-title{margin:0 0 6px;font-size:1.25rem}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:44px!important}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px}
.pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.sorts{color:var(--muted);font-size:.9rem}

/* ── duolink 브랜드 사이트 ─────────────────────────────────── */
.hero{padding:5.5rem 0 4rem;max-width:52rem}
.hero-kicker,.section-kicker{margin:0 0 .75rem;color:var(--primary);font-size:.75rem;font-weight:700;letter-spacing:.14em}
.hero-title{font-size:clamp(2.35rem,7vw,4.6rem);line-height:1.08;margin:0 0 1.25rem;letter-spacing:-.055em}
.hero-sub{max-width:42rem;color:var(--muted);margin:0;font-size:1.05rem}
.portfolio-stats{display:flex;gap:clamp(1.5rem,5vw,3.5rem);margin:2.5rem 0 0}
.portfolio-stats div{display:flex;flex-direction:column}
.portfolio-stats dt{font-size:1.65rem;font-weight:750;line-height:1.2}
.portfolio-stats dd{margin:.2rem 0 0;color:var(--muted);font-size:.82rem}
.section-head{scroll-margin-top:1rem;display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:1rem 0 1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.section-heading{font-size:1.55rem;margin:0;letter-spacing:-.025em}
.section-copy{max-width:28rem;margin:0;color:var(--muted);font-size:.9rem}

/* 🔴 `repeat(2, …)` 는 화면이 아무리 넓어도 «2개»다(오너 지적). auto-fill 로
   화면이 주는 만큼 채운다 — 1400px 에서 4열, 좁아지면 3·2·1 로 스스로 줄어든다.
   ⚠️ `auto-fit` 이 아니라 `auto-fill` 이다: auto-fit 은 카드가 적을 때 남은
   칸을 없애 카드가 «과하게 늘어난다». 제품이 3개일 때 한 장이 화면을 덮는다. */
.product-grid{list-style:none;padding:0;margin:0 0 4rem;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.product-card{position:relative;cursor:pointer;display:flex;min-width:0;min-height:15rem;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:1.4rem;background:var(--card);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.product-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--fg) 8%,transparent)}
.product-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;gap:.6rem}
/* 🔴 아이콘은 «미리 받아 둔» 파일이다. CSP 가 default-src 'self' 라 외부 이미지는
   통째로 막힌다 — 저장 위치와 다시 받는 법은 assets/product-icons/README.md. */
.product-icon{width:48px;height:48px;border-radius:12px;object-fit:contain;
  background:var(--surface,#fff);border:1px solid var(--line);padding:4px;flex:0 0 auto}
/* 아이콘이 «없는» 제품은 이니셜로. 없는 그림을 지어내지 않고 자리만 지킨다. */
.product-icon--initial{display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.25rem;color:var(--ink-2,#666);padding:0}
/* 🔴 아이콘이 들어오면서 번호가 오른쪽으로 밀린다 — 번호는 «장식»이라 뒤로 보낸다. */
.product-card-head .product-index{margin-left:auto}
.product-index{font:700 .75rem/1 ui-monospace,Menlo,monospace;color:var(--muted)}
.product-name{font-size:1.3rem;line-height:1.3;margin:0 0 .45rem}
.product-name a{color:var(--fg);text-decoration:none}
/* 카드 전체가 눌리는 자리 — 이름 링크의 누를 영역을 카드 크기로 넓힌다(stretched link). 키보드 포커스는 카드 테두리로 보인다. */
.product-name a::after{content:"";position:absolute;inset:0;border-radius:16px}
.product-name a:focus-visible{outline:none}
.product-card:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent)}
.product-tagline{margin:0;color:var(--fg);font-size:.94rem;line-height:1.6;font-weight:600}
.product-summary{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:.75rem 0 1.5rem;color:var(--muted);font-size:.88rem;line-height:1.65}
/* 057 개발 기간 — 카드에서는 하단(.product-card-foot) 바로가기 아래, 상세에서는 배지 옆에 한 줄로. */
.product-period{margin:0;color:var(--muted);font-size:.8rem;font-weight:600}
.product-period--inline{display:inline-block;margin:0 0 0 .5rem;vertical-align:middle}
/* 058 제공 방식 — «정보»라 링크처럼 보이지 않게: 테두리·링크색·화살표 없이 중립색 글 + 장식 아이콘(Codex 검토 2026-10-20). */
.product-platforms{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.product-platforms li{display:inline-flex;align-items:center;gap:.3rem;color:#334155;font-size:.82rem;font-weight:600}
.product-platforms svg,.product-channel svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
/* 카드 하단 — 카드가 flex column 이라 margin-top:auto 로 맨 아래에 붙어 카드마다 위치가 같다.
   위: 바로가기 한 줄(버튼이 줄 폭을 똑같이 나눈다) · 아래: 개발 기간(오너 2026-10-20). */
.product-card-foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.product-links{display:flex;gap:.35rem}
/* 버튼 셋이 «언제나 한 줄» — 폭을 똑같이 나눈다(min-width:0). 이름이 짧아(웹·APP(iOS)·APP(AOS)) 최소 카드 폭 300px 에서도 든다.
   2026-10-20 오너 화면(4열·카드 ~320px)에서 「App Store·Google Play」 이름으로는 두 줄로 접혔다. */
.product-links .product-link{flex:1 1 0;min-width:0;justify-content:center;padding:0 .3rem;font-size:.78rem}
.product-link svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
/* 🔴 카드 전체 덮개(.product-name a::after)보다 «위층» — 안 올리면 덮개가 클릭을 가로챈다(Codex 검토 치명 1).
   44px 이상(터치 영역) · 포커스는 링크마다 따로 보인다(카드의 focus-within 테두리와 별개). */
.product-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.25rem;min-height:44px;padding:0 .6rem;
  border:1px solid #cbd5e1;border-radius:10px;background:var(--card);color:var(--primary-strong);font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap}
.product-link:hover{border-color:var(--primary);background:var(--surface-accent)}
.product-link:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
/* 상세 «어디서 쓸 수 있나요» — 링크 있는 항목만 버튼 모양(.product-channel--link), 없는 항목은 평평한 글. */
.product-channels{margin:1.25rem 0;padding:1rem 1.1rem;border:1px solid #dbeafe;border-radius:14px;background:var(--surface-accent)}
.product-channels .section-title{margin-top:0}
.product-channels__list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.6rem}
.product-channel{display:flex;align-items:center;gap:.75rem;min-height:60px;padding:.6rem .9rem;border-radius:12px;color:var(--fg)}
.product-channel svg{width:20px;height:20px;color:var(--primary)}
.product-channel__text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.product-channel__text span{color:#475569;font-size:.82rem;overflow-wrap:anywhere}
.product-channel--link{background:var(--card);border:1px solid #bfdbfe;text-decoration:none}
.product-channel--link:hover{border-color:var(--primary)}
.product-channel--link:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.product-channel__go{margin-left:auto;color:var(--primary)}
.product-body{margin:1rem 0;line-height:1.85;color:var(--fg)}
.product-actions { margin: 1.5rem 0; }
.product-note { color:var(--muted);background:var(--surface-soft);padding:.7rem .9rem;border-radius:6px; }
.badge-preparing { background: #fff6e5; color: #7a5200; border: 1px solid #f0d9a8;
                   font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 500; }

.empty { color:var(--muted);padding:2.5rem 0;text-align:center; }
.cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2rem 0 3rem;padding:2rem;border:1px solid var(--line);border-radius:16px;background:var(--surface-accent);color:var(--muted)}
.cta p{margin:.25rem 0 0;color:var(--fg)}/* --muted 는 --surface-accent 위에서 4.37 — 4.5 미달(대비 실측 2026-10-01) */.cta-title{margin:0;color:var(--fg);font-size:1.35rem}/* 🔴 밑줄 제거가 `.cta .btn` 에만 걸려 있어, «다른 곳의» 링크형 버튼은 밑줄이 남았다
   (2026-09-04 상세 상단 바에서 드러났다 — 오너가 「버튼이 버튼 모양이 아니다」라고
   지적한 그 축이다). 링크를 버튼으로 쓰면 «어디서든» 밑줄이 없어야 한다. */
a.btn{text-decoration:none}
.cta .btn{flex:none;text-decoration:none}
.back { margin-top: 2rem; }

/* ── 홈 카드 썸네일 · 분류 칩 (2026-10-04 개선 방안 「카드 시각」「분류·필터」) ─────────────
   🔴 카드에 min-width:0 이 «반드시» 있어야 한다. 그리드 칸의 최소 폭은 기본이 «내용 폭»이라, 1200px 짜리
      그림이 들어오는 순간 칸이 1200px 로 벌어져 페이지에 가로 스크롤이 생겼다(2026-10-04 브라우저 실측 scrollWidth 1932).
   🔴 썸네일은 카드 안쪽 여백을 «뚫고» 카드 위 가장자리에 붙인다 — 여백 안에 두면 그림이 떠 보인다.
      비율은 마크업의 width/height(1200×675)가 미리 잡고, 여기 aspect-ratio 가 화면 크기를 정한다.
      그리드 규칙(auto-fill minmax 300px)은 «건드리지 않는다» — 카드 폭이 그림 크기를 정한다. */
.product-thumb{display:block;width:calc(100% + 2.8rem);min-width:0;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;
  margin:-1.4rem -1.4rem 1.2rem;border-radius:15px 15px 0 0;border-bottom:1px solid var(--line);background:var(--surface-soft)}
/* 칩은 «링크»다(JS 없이 동작). 고른 칩만 채운다 — 전부 채우면 무엇을 골랐는지 안 보인다. */
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.filter-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--fg);text-decoration:none;font-size:.88rem}
.filter-chip:hover,.filter-chip:focus-visible{border-color:var(--primary)}
.filter-chip.is-active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.filter-chip__count{font:600 .75rem/1 ui-monospace,Menlo,monospace;opacity:.8}
/* 상세 — 같은 사이트 안의 제품(주소에서 계산). 본문과 문의 블록 사이의 절. */
.product-related{margin:1.5rem 0 0}
/* 상세 — 이전·다음 프로젝트(오너 2026-10-06). 두 칸 격자: 이전은 왼쪽, 다음은 «이전이 없어도» 오른쪽 칸(방향이 자리로 읽힌다).
   🔴 칸에 min-width:0 + 이름 한 줄 말줄임 — 긴 제품명이 칸을 밀어 가로 스크롤을 만들지 않게(카드 썸네일 때 실측한 축과 같다).
   좁은 화면(≤720px, .cta 가 세로로 바뀌는 지점과 같다)에서는 한 줄씩 쌓는다 — 두 칸이면 이름이 몇 글자 안 남는다. */
.product-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0 0}
.product-pager__link{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--fg);text-decoration:none}
.product-pager__link:hover,.product-pager__link:focus-visible{border-color:var(--primary)}
.product-pager__link--next{grid-column:2;text-align:right}
.product-pager__dir{color:var(--muted);font-size:.82rem}
.product-pager__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* 분류 안에서 도는 중이라는 한 줄 — 두 칸 위를 가로지른다. */
.product-pager__scope{grid-column:1/-1;margin:0;color:var(--muted);font-size:.82rem}
/* 상세 — 구조로 보기(RelScope 관계도, 명세가 있는 제품만). 유형 이름은 제목 아래 한 줄. */
.product-structure{margin:1.5rem 0 0}
.product-structure__type{margin:-.35rem 0 .8rem;color:var(--muted);font-size:.85rem}
.product-structure__map{min-width:0}
/* 상세 — 샘플 결과물(가린 공개본이 있는 제품만). 보고서는 SafeMarkdown 출력이라 요소 선택자로 꾸민다
   (관리자 DS 클래스는 공개 레이아웃에 없다). 표는 좁은 화면에서 가로로만 스크롤한다 — 페이지 전체가 밀리지 않게. */
.product-sample{margin:1.5rem 0 0}
.product-sample__note{margin:-.35rem 0 .9rem;color:var(--muted);font-size:.85rem}
.product-sample__card{margin:0 0 1rem;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:0}
.product-sample__label{margin:0 0 .6rem;font-weight:700;font-size:.9rem}
.product-sample__doc{min-width:0;font-size:.9rem;line-height:1.7;overflow-wrap:anywhere}
.product-sample__doc h3{margin:.4rem 0 .5rem;font-size:1rem}
.product-sample__doc h4{margin:1.1rem 0 .4rem;font-size:.92rem}
.product-sample__doc p{margin:.4rem 0}
.product-sample__doc blockquote{margin:0 0 .2rem;padding:.1rem .8rem;border-left:3px solid var(--primary);color:var(--muted-strong);background:var(--surface-accent)}
.product-sample__doc ul{margin:.3rem 0;padding-left:1.15rem}
.product-sample__doc li{margin:.15rem 0}
.product-sample__doc > div{overflow-x:auto;margin:.4rem 0}
/* 🔴 선택자를 .ds-table-wrap .ds-table(고정 레이아웃) 보다 강하게 — 약하면 열이 균등 분배돼 코드가 옆 칸을 덮는다(2026-10-21 실측). */
.product-sample__doc table,.product-sample__doc .ds-table-wrap .ds-table{border-collapse:collapse;table-layout:auto;width:max-content;min-width:100%;font-size:.82rem}
.product-sample__doc th,.product-sample__doc td{padding:.35rem .5rem;border:1px solid var(--line);text-align:left;vertical-align:top;white-space:normal;overflow-wrap:break-word;min-width:5rem;max-width:22rem}
.product-sample__doc code{white-space:normal;overflow-wrap:anywhere}
.product-sample__doc th{background:var(--surface-soft)}
.product-sample__more{margin:.7rem 0 0;border-top:1px dashed var(--line);padding-top:.6rem}
.product-sample__more summary{cursor:pointer;color:var(--primary-strong);font-weight:600}
.product-sample__more summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
/* 🔴 RelScope 토큰 연결 — 공개 사이트 색을 따르게 한다(README §4). 공개 사이트는 «라이트 전용»이라
   «모든» 색 토큰을 잇는다: 하나라도 빠지면 그 토큰만 RelScope 기본 다크값으로 바뀌어(시스템 다크) 한 도식에 두 테마가 섞인다.
   사이트에 없던 값(진한 선·실패 옅은 색·상승/하락·포커스 링)은 :root 에 새로 두고 잇는다.
   ⚠️ --rm-surface-2(묶음 바탕)는 --surface-soft 가 아니라 --bg 다 — --muted 글자가 --surface-soft 위에서 4.34:1 로 대비 미달(site-check 실측).
   ⚠️ --rm-text-muted 도 --muted 보다 한 단 진한 --muted-strong 이다 — 입력·강조 노드의 옅은 파랑 바탕 위 줄 글자가 --muted 로는 4.13:1(같은 실측). */
:root{--line-strong:#cbd5e1;--muted-strong:#475569;--danger-soft:#fdecec;--up:#9a3412;--up-soft:#fde7d6;--down:#1d4ed8;--down-soft:#dbe6fb;
  --focus-ring:0 0 0 3px rgba(37,99,235,.35)}
.relscope{
  --rm-bg:var(--card);--rm-surface:var(--card);--rm-surface-2:var(--bg);
  --rm-border:var(--line);--rm-border-strong:var(--line-strong);
  --rm-text:var(--fg);--rm-text-muted:var(--muted-strong);
  --rm-accent:var(--primary);--rm-on-accent:var(--on-primary);
  --rm-ok:var(--success-fg);--rm-ok-soft:var(--success-bg);
  --rm-warn:var(--wait-fg);--rm-warn-soft:var(--wait-bg);
  --rm-fail:var(--danger);--rm-fail-soft:var(--danger-soft);
  --rm-idle:var(--unknown-fg);--rm-idle-soft:var(--unknown-bg);
  --rm-up:var(--up);--rm-up-soft:var(--up-soft);--rm-down:var(--down);--rm-down-soft:var(--down-soft);
  --rm-focus-ring:var(--focus-ring)}

@media (max-width:720px){
  .hero{padding:3.8rem 0 3rem}/* auto-fill 이 알아서 줄어든다. 강제 1열은 «두 규칙이 같은 것을 정하는» 자리가 되어 뺀다. */.section-head,.cta{align-items:flex-start;flex-direction:column}.product-pager{grid-template-columns:1fr}.product-pager__link--next{grid-column:auto}.product-card{min-height:0}.portfolio-stats{justify-content:space-between}.site-footer{align-items:flex-start;flex-direction:column}.admin-header{align-items:flex-start;flex-wrap:wrap}.admin-nav{order:3;width:100%;overflow-x:auto;margin-left:0;padding-bottom:.25rem}}

/* 폼 */
.form { max-width: 34rem; }
/* 🔴 `.field` 는 «한 번만» 정의한다. 2026-08-31 실측: 골격의 flex 정의와 사이트의 block
   정의가 둘 다 있어서 뒤가 이겼고, 그 결과 `.field-check{flex-direction:row}` 가
   애초에 안 먹고 있었다. CSS 에 «있다»와 «먹는다»는 다르다 —
   tools/check-css-classes.py 가 이제 중복 정의도 잡는다. */
.field { display: block; margin: 0 0 1.1rem; }
.field-label { display: block; font-size: .9rem; margin-bottom: .3rem; font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; padding: .55rem .7rem; border: 1px solid #d1d5db;
                                border-radius: 6px; font: inherit; }
.field-error { display: block; color: #8a1f1f; font-size: .85rem; margin-top: .3rem; }
.req { color: #8a1f1f; }
.hint { font-size: .85rem; color: #6b7280; }
.alert-error { background: #fdecec; border: 1px solid #f0b4b4; color: #8a1f1f;
               padding: .7rem .9rem; border-radius: 6px; }

/* 🔴 허니팟 — 사람에게는 안 보이고 봇은 채운다.
      `display:none` 이면 일부 봇이 «숨겨진 필드»로 인식해 건너뛴다.
      화면 밖으로 밀어내고 스크린리더에는 aria-hidden 으로 감춘다. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 관리자 ─────────────────────────────────────────────── */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.tab { padding: .35rem .7rem; border-radius: 6px; text-decoration: none; color: #4b5563; font-size: .9rem; }
.tab.is-current { background: #111827; color: #fff; }
.tab .count { opacity: .7; margin-left: .3rem; font-size: .8rem; }
.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input[type=search] { padding: .45rem .6rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid #eef0f2; }
.table th { font-weight: 600; color: #4b5563; font-size: .85rem; }
.table .when { color: #6b7280; white-space: nowrap; }

.kv { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.kv dt { color: #6b7280; font-size: .9rem; }
.kv dd { margin: 0; }
.message-box { background: #f9fafb; border: 1px solid #eef0f2; border-radius: 8px;
               padding: 1rem; line-height: 1.8; margin: 1rem 0; white-space: pre-wrap; }

.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1.25rem 0; }
.inline { display: inline; }
.field-inline { display: inline-flex; align-items: center; gap: .4rem; }
/* 🔴 select 만 쓰면 «같은 줄에 선 input» 이 스타일 없이 남는다 — 오류가 안 나므로
   화면을 눈으로 봐야만 드러난다(감사 로그의 날짜 칸이 그랬다). 둘을 같이 잡는다. */
.field-inline select,
.field-inline input { padding: .4rem .5rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
/* 날짜 칸은 .field 의 width:100% 를 물려받아 줄을 통째로 먹는다. 여기서만 되돌린다. */
.field-inline input[type=date] { width: auto; }
/* 🔴 라벨이 «두 글자에서 쪼개지는» 것을 막는다. 브라우저로 보기 전에는 안 보인다 —
   한 줄에 선 항목이 늘면 flex 가 라벨부터 줄인다(감사 로그의 「동작」이 「동/작」이 됐다). */
.field-inline > span { white-space: nowrap; }
.btn-sm { padding: .25rem .55rem; font-size: .85rem; }
.btn-danger { background: #8a1f1f; color: #fff; border: 0; }

.notes { margin-top: 2rem; border-top: 1px solid #eef0f2; padding-top: 1.25rem; }
.note-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.note-list li { border-left: 3px solid #e2e5e9; padding: .3rem 0 .3rem .8rem; margin-bottom: .9rem; }
.note-meta { font-size: .82rem; color: #6b7280; }
.note-body { line-height: 1.7; }
.failed-list { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.failed-list li { margin: .3rem 0; }

/* 모달 —  기본 테두리를 지운다. showModal() 이 포커스 가둠·ESC·backdrop 을 준다. */
.modal { border: 0; border-radius: 12px; padding: 0; width: min(30rem, calc(100vw - 2rem));
         box-shadow: 0 10px 40px rgb(0 0 0 / 18%); }
.modal::backdrop { background: rgb(17 24 39 / 45%); }
.modal form { padding: 1.25rem; }
.modal-title { margin: 0 0 .75rem; font-size: 1.05rem; }
.modal-note { font-size: .9rem; color: #374151; line-height: 1.7;
              background: #f9fafb; padding: .7rem .85rem; border-radius: 6px; margin: 0 0 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* 토스트 — 오른쪽 «헤더 아래». top:1rem 이면 로그아웃 버튼을 덮는다. */
.toast-region { position: fixed; top: 5rem; right: 1rem; z-index: 100;
                display: flex; flex-direction: column; gap: .5rem;
                pointer-events: none; max-width: min(26rem, calc(100vw - 2rem)); }
/* 🔴 색(배경·글자)은 여기서 주지 않는다 — DS .ds-toast/.ds-toast--success/--danger 가 테마별로 준다.
 *    예전 `.toast{background:#111827}`·`.toast-success{background:#17612f}` 가 같은 명시도로 DS 를 덮었고,
 *    `.dsx .toast.ds-toast{color:inherit}` 와 겹쳐 «라이트 테마에서 어두운 상자에 어두운 글자»였다
 *    (2026-10-01 대비 실측 1.1~2.1 — 관리자 기본 테마의 모든 토스트). */
.toast { pointer-events: auto; border-radius: 8px;
         padding: .7rem .9rem; font-size: .9rem; line-height: 1.55;
         display: flex; gap: .6rem; align-items: flex-start; }
.toast-close { background: none; border: 0; color: inherit; cursor: pointer;
               font-size: 1rem; line-height: 1; padding: 0 .1rem; }  /* opacity 를 주지 않는다 — DS 글자색의 대비를 깎는다(라이트 3.85) */
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .16s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } }
}

.banner { padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1rem; line-height: 1.55;
          background: var(--card); border: 1px solid var(--line); }
.banner-warn  { background: #fff6e5; border: 1px solid #f0d9a8; color: #7a5200; }
.banner-error { background: #fdecec; border: 1px solid #f0b4b4; color: #8a1f1f; }
.badge { display: inline-block; font-size: .75rem; padding: .15rem .5rem;
         border-radius: 999px; border: 1px solid transparent; }
.badge-ok      { background:var(--success-bg);color:var(--success-fg);border-color:var(--success-line); }
.badge-bad     { background: #fdecec; color: #8a1f1f; border-color: #f0b4b4; }
.badge-unknown { background:var(--unknown-bg);color:var(--unknown-fg);border-color:var(--line); }
.code { font: .75rem/1.4 ui-monospace, Menlo, monospace; background: #f3f4f6;
        color: #4b5563; padding: .1rem .4rem; border-radius: 4px; }
.detail { color: var(--muted); font-size: .85rem; }
.admin-nav .is-current { font-weight: 600; text-decoration: underline; }

/* ── 공통 조판 ─────────────────────────────────────────────
   🔴 아래 넷(.page-title·.muted·.right·.num)은 «이미 10개 뷰가 쓰고 있는데»
      CSS 에 없었다. CSS 는 없는 클래스에 오류를 내지 않는다 — 아무 일도 안 일어날 뿐이다.
      그래서 tools/check-css-classes.py 로 «검사»를 만들었다. 규칙으로는 또 놓친다. */
.page-title{margin:0 0 18px;font-size:1.5rem;line-height:1.3}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-head .page-title{margin:0}
.muted{color:var(--muted);font-size:.9rem}
.right{text-align:right}
.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
body.admin{background:var(--bg)}

/* 🔴 인라인 SVG 에는 `hidden` 속성이 «안 먹는다». UA 스타일시트의 `[hidden]{display:none}`
      은 HTML 네임스페이스로 한정돼 있어서 SVG 는 그대로 보인다 — 눈 아이콘 두 개가
      동시에 뜬다. 그래서 여기서 명시한다(2026-08-31 CSS 검사가 잡았다).
   pointer-events:none 는 별개 이유다 — 없으면 클릭의 target 이  로 줬는데 CSP 가 그걸 막는다. */
:root { --chrome-h: 0px; }

/* 세로 리듬 — DS 에 margin 유틸이 없어 «이 사이트의» 최소 보정으로 둔다.
 * ⚠️ 값을 늘리지 마라. 늘어나면 그건 DS 에 있어야 할 컴포넌트라는 뜻이다. */
.dsx .u-stack     { display: flex; flex-direction: column; gap: 12px; }
.dsx .u-stack-lg  { display: flex; flex-direction: column; gap: 18px; }

/* KPI 카드를 링크로 쓴다 — 숫자를 보고 바로 갈 수 있어야 한다.
 * DS 의 .ds-stat 는  기준이라 링크 표시만 여기서 지운다. */
.dsx a.ds-stat { display: block; text-decoration: none; }
.dsx a.ds-stat:hover,
.dsx a.ds-stat:focus-visible { border-color: var(--brand); }

/* 로그인 카드 안쪽 여백. .ds-login__c 는 테두리만 갖고 내부 여백은 내용이 정한다.
   🔴 2026-10-21 — 위 공용 .auth-card 의 테두리·둥근 모서리가 .ds-login__c «안»에서 한 번 더 그려져 이중 테두리였다. 관리자에서는 지운다. */
.dsx .auth-card { padding: 20px 24px 24px; border: 0; border-radius: 0; background: transparent; }
.dsx .auth-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.dsx .auth-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.dsx .auth-sub { margin: 0; font-size: 12.5px; color: var(--text-2); }
.dsx .auth-checks { display: flex; gap: 18px; flex-wrap: wrap; }

/* 레이아웃 배너 — 본문과 붙지 않게. */
.dsx .u-banner { margin-bottom: 16px; }
.dsx .u-submit { margin-top: 14px; }

/* ─── DS «조합» 보정 (2026-09-02) ────────────────────────────
 * 🔴 DS 는 컴포넌트를 각각 정의하지만 «패널 안에 넣었을 때»의 규칙은 없다.
 *    ds-table-wrap 은 자기 테두리·라운드를 갖고 있어 패널 안에 넣으면 테두리가 겹친다.
 *    이건 DS 재정의가 아니라 «조합»을 잇는 다리다.
 */
.dsx .ds-panel > .ds-table-wrap { border: 0; border-radius: 0; }
.dsx .ds-panel > .ds-tabs       { padding: 0 10px; }
.dsx .ds-panel > .ds-hint       { padding: 10px 18px; margin: 0; border-top: 1px solid var(--border); }
.dsx .ds-panel > .ds-empty      { padding: 44px 20px; }

/* 탭을  로 쓴다 — DS 의 .ds-tab 은