/* laniaura — 랜딩·가격 페이지 컴포넌트. base.css · parts.css 다음에 읽힌다. */ /* ═══ 각인 열 + 헤어라인 사다리 ═══════════════════════════════════════════ 좌측 세로 눈금 레일을 제거하면서 **축을 90도 돌린** 대체물이다. 세로로 연속하던 눈금이 섹션마다 끊어지는 가로 눈금선으로 반복되고, 스크롤하면 눈금이 아래에서 위로 지나간다 — 레일의 운동감이 보존된다. 각인 2행 중 아래 줄은 장식이 아니라 **그 섹션이 가리키는 실제 값**이다. 가리킬 값이 없으면 비운다(지배 규칙). */ .sec { border-top: 1px solid var(--hair); padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7.5vw, 96px); } .sec-lead { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); border-top: 0; } /* .band 가 이미 border-bottom 을 그린다 — 다음 .sec 의 border-top 과 만나면 이중선이 된다. (.section 계열에는 같은 수정이 base 에 있었는데 .sec 계열에는 없었다 — 실측으로 잡은 버그) */ .sec.band + .sec { border-top: 0; } .sec > .wrap { display: grid; grid-template-columns: 112px 32px minmax(0, 1fr); align-items: start; } .sec > .wrap > * { max-width: none; margin-left: 0; } .mark-col { grid-column: 1; } .mark-col .no { font-family: var(--f-title); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.01em; color: var(--ink); } .mark-col .val { font-family: var(--f-data); font-size: 12px; letter-spacing: .06em; color: rgba(22,24,26,.36); margin-top: var(--s-1); } .sec-body { grid-column: 3; min-width: 0; } .sec-body > * + * { margin-top: var(--s-5); } .sec-body h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -.012em; } .sec-body > .text { max-width: var(--w-text); } @media (max-width: 899px) { .sec > .wrap { grid-template-columns: 1fr; } .mark-col { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-4); } .mark-col .val { margin-top: 0; } .sec-body { grid-column: 1; } } /* ── 표제 ─────────────────────────────────────────────────────────────── */ /* v3: 히어로가 페이지의 유일한 대형 자소라는 원칙은 유지하되 **낙차를 배로** 벌린다. root 태그라인과 제품 지면 h1 이 같은 체계를 쓴다(두 히어로 문법 불일치 해소). 800 웨이트는 히어로 전용이다 — 다른 곳에 쓰는 순간 낙차가 사라진다. */ .tagline, .sec-lead h1 { font-family: var(--f-title); font-weight: 800; font-size: clamp(40px, 6.8vw, 88px); line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; } .tagline { max-width: 18ch; } /* 한글은 라틴만큼 죌 수 없다 — 자간을 죄면 받침이 붙고, 행간 1.06 은 겹친다. */ :lang(ko) .tagline, :lang(ko) .sec-lead h1 { line-height: 1.18; letter-spacing: -.012em; } /* 2열 히어로(제품 홈)는 열 폭이 절반이라 88px 를 못 받는다 — 수동 개행이 어색하게 겹으로 꺾인다(실측). 전폭 히어로만 최대 낙차를 가져가고 분할 히어로는 64px 에서 멈춘다. */ .sec-lead .two h1 { font-size: clamp(36px, 4.6vw, 64px); } /* 360px 실측(2026-09-02): 40px 에서 「Machines make it.」이 328px 폭을 넘쳐 4행이 됐다(고아 「it.」). 600px 미만에서만 34~40px 로 줄인다 — 600px 에서 6.8vw=40.8px 라 경계가 이어진다. */ @media (max-width: 599px) { .tagline, .sec-lead h1 { font-size: clamp(34px, 9.5vw, 40px); } } /* 선택자를 .tagline 하나로 두면 진다 — 기본 규칙의 .sec-lead h1(0,1,1)이 .tagline(0,1,0)보다 구체적이라 순서와 무관하게 이긴다(실측). */ /* 정의 목록 — 슬로건을 남의 말이 아니라 자기 제약으로 번역한다. 자랑이 아니라 규칙이므로 실적 0에서도 성립한다. */ .defs { border-top: 1px solid var(--hair); } .defs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); } .defs dt { font-family: var(--f-data); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim); } .defs dd { font-size: 16px; line-height: 1.75; } @media (max-width: 599px) { .defs > div { grid-template-columns: 1fr; gap: var(--s-2); } .defs dd { font-size: 15px; } } /* 제조자 표시줄 — 기기 뒷면의 규격 각인. 사진·연혁·후기가 0일 때 실체를 세우는 유일한 재료이고, 제3자가 국세청에서 직접 조회할 수 있는 검증 가능한 값이다. */ .plate { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: var(--s-3) 0; font-family: var(--f-data); font-size: 13px; line-height: 1.85; color: var(--ink-dim); } .plate a { color: var(--ink-dim); } /* 제사(epigraph) — 신조 위의 인용 한 줄. 이 사이트에서 키치가 허용되는 유일한 자리다. 본문 서체가 아니라 계기 서체로 — 감상이 아니라 각인으로 읽히게. */ .epigraph { font-family: var(--f-data); font-size: 13px; line-height: 1.6; letter-spacing: .01em; color: var(--ink-dim); max-width: 60ch; } .epigraph .src { white-space: nowrap; } /* ── 대장 표 (랜딩 본체) ───────────────────────────────────────────────── */ .roster { width: 100%; border-collapse: collapse; table-layout: fixed; } .roster th, .roster td { text-align: left; vertical-align: middle; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--hair); overflow-wrap: break-word; } .roster thead th { font-family: var(--f-data); font-weight: 400; font-size: 12px; letter-spacing: .06em; color: var(--ink-dim); padding-bottom: var(--s-2); } .roster .c-no { width: 48px; font-family: var(--f-data); font-size: 12px; color: var(--ink-dim); } /* 종류 열 — 서가가 도구 밖(글·책·영상)으로 넓어지며 생겼다. 값은 대문자 각인. */ .roster .c-kind { width: 104px; font-family: var(--f-data); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); } .roster .c-name { width: 168px; font-family: var(--f-title); font-weight: 700; font-size: 18px; } /* 폭은 한국어가 아니라 **영문 지면**을 기준으로 잡는다 — "In preparation" 이 124px 를 넘어 nowrap 인 채로 옆 칸을 밀고 들어갔다. 좁은 쪽에 맞추면 긴 쪽에서 깨진다. */ .roster .c-st { width: 152px; color: var(--ink-dim); font-size: 15px; white-space: nowrap; } .roster .c-go { width: 176px; } .roster td { font-size: 15px; } .roster tbody tr { transition: background-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease); } .roster tbody tr:hover { background: var(--recess); box-shadow: inset 3px 0 0 0 var(--signal); } .roster tbody tr.off:hover { background: none; box-shadow: none; } .roster .c-go a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 0 var(--ink); } .roster .c-go a:hover { color: var(--signal); box-shadow: inset 0 -1px 0 0 var(--signal); } .roster .dash { color: var(--ink-dim); } /* 상태 마커. 켜진 것만 표시자를 쓰고 꺼진 것은 빈 사각이다. 상태 텍스트는 절대 적색으로 칠하지 않고, 칩도 쓰지 않는다 — 네 행 중 세 행이 칩이면 배지 밭이 된다. */ .lamp-on { display: inline-block; width: 6px; height: 6px; background: var(--signal); margin-right: var(--s-2); animation: lampring 2.4s var(--ease) infinite; } @keyframes lampring { 0% { box-shadow: 0 0 0 0 rgba(198,45,11,.4); } 70% { box-shadow: 0 0 0 6px rgba(198,45,11,0); } 100% { box-shadow: 0 0 0 0 rgba(198,45,11,0); } } .lamp-off { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--hair); margin-right: var(--s-2); } @media (max-width: 767px) { .roster, .roster tbody, .roster tr, .roster td { display: block; width: auto; } .roster thead { display: none; } .roster tr { border-bottom: 1px solid var(--hair); padding: var(--s-5) 0; } .roster td { border: 0; padding: 0; } .roster td + td { margin-top: var(--s-2); } } /* 세로로 긴 실물 화면. 폭을 묶지 않으면 열 하나가 지면을 다 먹는다. 오른쪽 끝에 붙여 텍스트 열과의 사이에 여백이 생기게 한다. */ .shot { max-width: 320px; margin-left: auto; } /* 세로 스크린샷 옆의 글은 위로 붙이면 아래에 200px 넘는 빈 칸이 남는다. :has() 미지원 브라우저에서는 지금처럼 위 정렬로 남는다 — 깨지지 않고 덜 예쁠 뿐이다. */ .two:has(.shot) { align-items: center; } @media (max-width: 899px) { .shot { max-width: 260px; margin-left: 0; } } /* ── 만드는 방식 3열 ──────────────────────────────────────────────────── */ .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } .ways > div { border-top: 1px solid var(--hair); padding-top: var(--s-4); } .ways .no { font-family: var(--f-data); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--ink-dim); } .ways h3 { font-size: 18px; line-height: 1.44; margin: var(--s-2) 0 var(--s-3); } .ways p { font-size: 15px; line-height: 1.73; color: var(--ink-dim); } @media (max-width: 899px) { .ways { grid-template-columns: 1fr; } } /* ── 가격 표시창 ──────────────────────────────────────────────────────── */ /* 가격을 카드가 아니라 **판독창**에 넣는다. SaaS 가격표의 3열 카드는 고를 것이 셋일 때 성립하는 형식이고, 우리는 단일가라 고를 것이 없다. 고를 것이 없는데 카드를 그리면 빈 열이 생기거나 가짜 티어를 만들게 된다 — 계기 하나가 값 하나를 가리키게 둔다. */ .price-box { padding: var(--s-7) var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; } .price-box .amt { display: flex; align-items: center; gap: var(--s-4); } .price-box .mk { display: inline-block; width: 8px; height: 8px; background: var(--signal-lit); flex-shrink: 0; animation: mkpulse 2s var(--ease) infinite; } @keyframes mkpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .price-box .num { font-family: var(--f-data); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.01em; color: var(--trace); text-shadow: 0 0 18px rgba(255,90,43,.22); } .price-box .sub { font-family: var(--f-data); font-size: 13px; letter-spacing: .06em; color: rgba(215,213,208,.56); margin-top: var(--s-3); } /* 판독창 안의 사양 목록 — 계기 옆에 붙는 명판. 여기 적힌 값은 전부 결제 화면에서 그대로 확인된다. 확인되지 않는 값은 적지 않는다. */ .price-box .meta { display: grid; gap: var(--s-2); } .price-box .meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-4); font-family: var(--f-data); font-size: 13px; line-height: 1.7; } .price-box .meta dt { color: rgba(215,213,208,.5); letter-spacing: .06em; } .price-box .meta dd { color: var(--trace); } @media (max-width: 899px) { .price-box { grid-template-columns: 1fr; gap: var(--s-5); } } @media (max-width: 767px) { .price-box { padding: var(--s-6) var(--s-5); } .price-box .num { font-size: 44px; } } /* 결제 버튼 아래 고지 — 순서를 바꾸지 않는다. 결제 직전 남는 질문을 닫는 자리다. */ .fineprint { max-width: 640px; list-style: none; } .fineprint li { font-size: 13px; line-height: 1.7; color: var(--ink-dim); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); } .fineprint li + li { margin-top: var(--s-2); } /* 마커는 ①②③ 이 아니라 01 02 03 이다. 원문자(U+2460~)는 IBM Plex Mono 에 글리프가 없는데 unicode-range 선언에는 들어 있어서, 브라우저가 폴백하지 않고 **빈 동그라미**를 그린다. 실측으로 확인한 함정이라 자릿수 마커로 바꿨다. */ .fineprint .k { font-family: var(--f-data); color: rgba(22,24,26,.36); } /* ── 비교 표 ──────────────────────────────────────────────────────────── */ /* 마크는 ✓/✗ 가 아니라 채운 사각·빈 사각이다. 체크·엑스는 「좋다/나쁘다」로 읽히는데 웹판은 나쁜 게 아니라 **다른 것**이다. 사각은 있음·없음만 말한다. */ .compare { width: 100%; border-collapse: collapse; table-layout: fixed; } .compare th, .compare td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: break-word; } .compare thead th { border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2); font-family: var(--f-title); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .compare thead th:first-child { font-family: var(--f-data); font-weight: 400; letter-spacing: .06em; color: var(--ink-dim); } .compare tbody th { font-weight: 400; color: var(--ink-dim); font-size: 15px; } .compare td { font-size: 15px; } .compare .c-k { width: 34%; } .compare .c-v { width: 33%; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } .compare .yes { display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: var(--s-3); vertical-align: 1px; } .compare .no { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--hair); margin-right: var(--s-3); vertical-align: 1px; } @media (max-width: 767px) { .compare .c-k { width: 40%; } .compare th, .compare td { padding-right: var(--s-2); font-size: 14px; } } /* ── FAQ ──────────────────────────────────────────────────────────────── */ /* 아코디언을 쓰지 않는다 — 상태 UI 도 JS 도 필요 없고, 접힌 답은 읽히지 않는다. */ .faq { max-width: var(--w-text); } .faq > div { border-top: 1px solid var(--hair); padding: var(--s-4) 0; } .faq h3 { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.6; } .faq p { font-size: 15px; line-height: 1.73; color: var(--ink-dim); margin-top: var(--s-2); } /* ── 마스트헤드 우측 묶음 · 언어 셀렉터 ───────────────────────────────── */ .mast-end { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; } .brand .sub { font-family: var(--f-data); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); border-left: 1px solid var(--hair); padding-left: var(--s-3); } .readout a { text-decoration: none; } .readout a:hover { color: var(--signal); } /* 언어 드롭다운 —
/. **자바스크립트가 없다.** 결제 한 장을 빼면 스크립트를 쓰지 않는다는 규율을 언어 선택 하나 때문에 깨지 않는다. 는 브라우저가 버튼으로 취급하므로 키보드·스크린리더가 그냥 동작한다. 캐럿을 ▾(U+25BE) 같은 글자로 그리지 않는다 — 서체 하위집합에 없어서 빈 네모가 된다. CSS 삼각형이면 글리프에 의존하지 않는다(원문자 사고와 같은 종류의 함정이다). */ .lang { position: relative; flex-shrink: 0; } .lang > summary { display: flex; align-items: center; gap: var(--s-2); list-style: none; cursor: pointer; font-family: var(--f-data); font-weight: 500; font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); padding: 0 var(--s-3); min-height: 30px; border: 1px solid var(--hair); border-radius: var(--r-0); white-space: nowrap; } .lang > summary { transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease); } .lang > summary::-webkit-details-marker { display: none; } .lang > summary::marker { content: ""; } .lang > summary:hover { color: var(--ink); border-color: var(--ink-dim); } .lang[open] > summary { color: var(--ink); border-color: var(--ink); } .lang .caret { width: 0; height: 0; flex-shrink: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .lang[open] .caret { border-top: 0; border-bottom: 5px solid currentColor; } .lang[open] ul { animation: langpop var(--t1) var(--ease); transform-origin: top right; } @keyframes langpop { from { opacity: 0; transform: translateY(-4px); } } .lang ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; list-style: none; min-width: 168px; background: var(--panel); border: 1px solid var(--ink); box-shadow: 0 2px 0 0 var(--edge); } .lang li + li { border-top: 1px solid var(--hair); } .lang ul a { display: block; padding: var(--s-3) var(--s-4); font: 400 15px/1.2 var(--f-body); text-decoration: none; color: var(--ink); white-space: nowrap; } .lang ul a { transition: background-color var(--t1) var(--ease); } .lang ul a:hover { background: var(--recess); } /* 현재 언어 표시는 빌드가 붙이는 aria-current 로만 한다 — 파셜에 손으로 적지 않는다. */ .lang ul a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 0 var(--signal); } /* 모바일에서 내비만 아래로 접는다. 언어 셀렉터는 브랜드와 같은 줄에 남는다 — 768 미만에서 3단이 되면 헤더가 화면의 1/4 을 먹는다. */ @media (max-width: 767px) { .mast-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand end" "nav nav"; align-items: center; height: auto; gap: 0; } .brand { grid-area: brand; } .nav { grid-area: nav; } .mast-end { grid-area: end; } .readout { display: none; } } /* ── 버튼 ─────────────────────────────────────────────────────────────── */ /* 결제 설정이 끝나기 전의 자리. 죽은 버튼 대신 상태를 적는다. */ .pending { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-data); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim); border: 1px dashed var(--hair); padding: 0 var(--s-5); } /* ═══ v3 — 전원 인가 ═══════════════════════════════════════════════════════ 지금까지의 판면은 정확했지만 꺼져 있었다. 여기부터가 전원이다. 전부 CSS 뿐이고(체크아웃 밖 스크립트 0 유지), reduced-motion 은 base 의 전역 킬 스위치가 이미 덮는다. */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* 히어로 등장 — 로드 시 한 번, 계기가 위에서부터 순서대로 켜진다. */ .sec-lead .mark-col { animation: rise var(--t2) var(--ease) backwards; } .sec-lead .sec-body > *, .sec-lead .two > * { animation: rise var(--t2) var(--ease) backwards; } .sec-lead .sec-body > :nth-child(1), .sec-lead .two > :nth-child(1) { animation-delay: 60ms; } .sec-lead .sec-body > :nth-child(2), .sec-lead .two > :nth-child(2) { animation-delay: 140ms; } .sec-lead .sec-body > :nth-child(3) { animation-delay: 220ms; } .sec-lead .sec-body > :nth-child(4) { animation-delay: 300ms; } .sec-lead .sec-body > :nth-child(5) { animation-delay: 380ms; } .sec-lead .sec-body > :nth-child(6) { animation-delay: 460ms; } .sec-lead .sec-body > :nth-child(7) { animation-delay: 540ms; } .sec-lead .sec-body > :nth-child(8) { animation-delay: 620ms; } .sec-lead .sec-body > :nth-child(9) { animation-delay: 700ms; } /* 스크롤 리빌은 **철거했다** (v4). 한 기능이 검증 실패를 세 번 다른 얼굴로 냈다 — ① reduced-motion 사용자 영구 숨김 ② 전체 페이지 캡처 불가시 ③ 앵커 점프(#apps 퍼널 착지)·캡처 경로에서 진입 전 상태로 고정. 숨김 기본값 + 조건부 그리기 패턴은 퍼널 착지 동선과 양립하지 않는다. 모션은 로드 스태거·스코프 루프·호버 전이가 진다. 같은 이유로 시간축이 스크롤인 애니메이션은 다시 넣지 않는다(절제 조항). */ /* ── 스코프 — 흐르는 맥놀이 트레이스 ────────────────────────────────────── 트레이스 폭이 창의 2배이고 파형이 주기적이라 translateX(-50%) 루프가 이음새 없이 돈다. transform-box: fill-box 라야 % 가 그룹 자신의 폭 기준이 된다. */ .scope-run { transform-box: fill-box; animation: scoperun 18s linear infinite; } @keyframes scoperun { to { transform: translateX(-50%); } } .scopefig .display { padding: var(--s-3) var(--s-3) var(--s-1); } .scopefig svg, .pulseline svg { width: 100%; height: auto; display: block; } /* 회사 홈 히어로의 펄스 스트립 — 얇은 표시창 하나가 "가동 중"을 그림으로 증언한다. */ .pulseline { max-width: none; } .pulseline.display { padding: var(--s-2) var(--s-3); } /* 프리셋 스파크 드로우(스크롤 타임라인)도 리빌과 같은 이유로 철거 — 스파크는 항상 완성된 상태로 선다. #presets 앵커 착지에서도, 어떤 캡처·RM 변형에서도 같은 그림이다. */ /* ── RUN/HOLD — 움직이는 트레이스의 정지 수단 ───────────────────────────── 5초를 넘는 자동 모션에는 멈출 수단이 있어야 한다(WCAG 2.2.2). 오실로스코프의 HOLD 토글 그대로다 — 체크박스 하나라 스크립트 0 규율도 지킨다. :has() 미지원 브라우저에서는 토글이 동작하지 않을 뿐 아무것도 깨지지 않고, 그 환경에도 reduced-motion 이라는 더 강한 정지 수단이 이미 있다. */ .hold { position: absolute; top: 8px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-data); font-size: 10px; letter-spacing: .12em; color: rgba(215,213,208,.75); cursor: pointer; user-select: none; } .hold input { width: 12px; height: 12px; margin: 0; accent-color: var(--signal-lit); cursor: pointer; } .display:has(.hold input:checked) .scope-run { animation-play-state: paused; } /* 땡스 = 두 번째 판매(라운드 6): 결제를 0 이 아니라 1/3 로 재정의하는 진행 표시(Nunes·Drèze). */ .steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-2) 0 var(--s-4); padding: 0; font-family: var(--f-data); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); } .steps li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-2); border: 1px solid var(--hair); vertical-align: middle; } .steps li.done::before { background: var(--ink); border-color: var(--ink); } .steps li.now::before { background: var(--signal); border-color: var(--signal); } .steps li.now { color: var(--ink); } /* Mac 수요 계수 — 약속 0. 클릭하면 /mac 이 세고 #mac-counted 로 돌아온다(JS·연결 요청 없음). */ .rules .dim { color: var(--ink-dim); } #mac-counted { display: none; } #mac-counted:target { display: block; } tr.counted { display: none; } tr.counted:has(#mac-counted:target) { display: table-row; } /* 스포트라이트 안의 「쓰는 법」 표지. 절 제목(h2)과 목록 사이의 작은 층 — 2026-09-11 오너 지시로 생겼다. */ .use-h { font-size: 17px; margin: var(--s-6) 0 var(--s-3); } @media (max-width: 767px) { .use-h { font-size: 16px; } }