+ 「·」 에서
이고 아이템은
블록으로 세운 라서, li 에 grid 를 걸었을 때 → 안 앵커 나열에서
이 아이템이 되던 함정과 무관하다.
행 사이 선은 gap 1px + 컨테이너 배경으로 그린다(테두리 중복 없음 — 데이터 잉크). */
.tics-hero__picks{
display:grid; gap:1px; margin:0;
padding:0; list-style:none; /* (2026-09-02) */
background:var(--wp--preset--color--border);
border:1px solid var(--wp--preset--color--border);
border-radius:var(--wp--custom--radius--sm);
overflow:hidden;
}
.tics-hero__picks a{
display:block; text-decoration:none;
background:var(--wp--preset--color--base);
padding:.7em .85em;
color:var(--wp--preset--color--contrast-2);
font-size:var(--wp--preset--font-size--sm); line-height:1.5;
}
.tics-hero__picks a br{ display:none; }
.tics-hero__picks a strong{
display:block;
font-size:var(--wp--preset--font-size--base); font-weight:700;
letter-spacing:-0.015em; line-height:1.35;
color:var(--wp--preset--color--contrast);
margin-bottom:.1em;
}
.tics-hero__picks a:hover{ background:var(--wp--preset--color--primary-soft); }
.tics-hero__picks a:hover strong{ color:var(--wp--preset--color--primary); }
/* 계산기 진입 — 이 화면의 강조는 여기 하나다(플랫폼 행은 중립면 위 잉크색).
목록·태그는 읽는 것이고 계산기는 쓰는 것이라 체류·재방문에 직접 걸린다.
오른쪽 패널이 아니라 **왼쪽 본문 단**에 두었다: 패널이 리드보다 훨씬 길어서 왼쪽
아래가 비었고(1440px 실측 390px), 이 카드가 그 자리를 메우면서 읽는 순서
(제목 → 무엇을 다루는가 → 지금 할 수 있는 것)의 마지막 칸에 온다. */
.tics-hero__tool{ margin:var(--wp--preset--spacing--40) 0 0; max-width:46rem; }
.tics-hero__tool a{
display:block; text-decoration:none;
/* 2026-09-02: primary-soft 면 + primary 22% 테두리는 본문의 「읽는 상자」
(.tics-summary)와 완전히 같은 조합이라, 이 카드가 도구가 아니라 안내문으로
읽혔다. 채운 버튼면으로 갈라 놓는다 — 흰 글자 on #1a56db = 6.18:1. */
background:var(--wp--preset--color--primary);
border:1px solid var(--wp--preset--color--primary);
border-radius:var(--wp--custom--radius--sm);
padding:.8em .95em;
color:#dce7fb;
font-size:var(--wp--preset--font-size--sm); line-height:1.5;
}
.tics-hero__tool a br{ display:none; }
.tics-hero__tool a strong{
display:block;
font-size:var(--wp--preset--font-size--base); font-weight:700;
letter-spacing:-0.015em; line-height:1.35;
color:#ffffff;
margin-bottom:.1em;
}
.tics-hero__tool a:hover{
background:#1449b8;
border-color:#1449b8;
}
/* 홈 섹션 제목 — 제목 뒤로 괘선을 흘리는 신문 섹션 헤드 */
.tics-secthead{
display:flex; align-items:center; gap:1.1rem;
font-size:var(--wp--preset--font-size--xl); margin:0 0 1em;
}
.tics-secthead::after{ content:""; flex:1; height:1px; background:var(--wp--preset--color--border); }
/* 카테고리 인덱스 — 단계 축. 상단 괘선만 있던 칼럼을 **면을 가진 카드**로 바꿨다.
실측 지적: 밑줄 하나에 텍스트만 얹혀 있어 클릭 대상으로 읽히지 않았다(어포던스).
신문 섹션 머리의 굵은 상단 괘선은 남긴다 — 이 사이트의 목록 표식이고, 경계선(#dde3ec)
만으로는 배경 대비가 1.29:1 이라 면을 구분하는 힘이 없다. 잉크 괘선은 14.6:1 이다.
앵커 안은 인라인 요소만(strong·br) — 편집기 저장에 안전. strong 을 블록으로 세우므로
br 은 시각적으로 숨긴다(마크업에는 남아 RSS·텍스트 추출에서 줄을 지킨다). */
.tics-cats__grid{
/* 칸 수는 명시한다. auto-fit + minmax 로 뒀더니 1120px 컨테이너에서 4칸이 되어
6개가 4+2 로 갈라졌다(고아 2칸). 축이 6개인 인덱스라 3×2 가 읽기 좋다. */
display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:var(--wp--preset--spacing--30); margin:0;
/* 2026-09-02:
로 바꿨다(보조기술에 목록으로 안 읽혔다).
칸 수를 4로 못박지 않는 이유 — 카테고리는 6개가 됐고, 앞으로도 늘거나 준다.
auto-fit 이면 1120px 에서 3×2, 900px 에서 2×3, 좁으면 1열로 스스로 접힌다. */
padding:0; list-style:none;
}
.tics-cats__grid li{ margin:0; }
.tics-cats__grid li::marker{ content:""; }
.tics-cats__grid a{
display:block; text-decoration:none;
background:var(--wp--preset--color--base-2);
border:1px solid var(--wp--preset--color--border);
border-top:3px solid var(--wp--preset--color--contrast);
border-radius:0 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm);
padding:1em 1.05em 1.1em;
color:var(--wp--preset--color--contrast-2);
font-size:var(--wp--preset--font-size--sm); line-height:1.6;
}
.tics-cats__grid a br{ display:none; }
.tics-cats__grid a strong{
display:block;
font-family:var(--wp--preset--font-family--serif);
font-size:var(--wp--preset--font-size--md); font-weight:600; letter-spacing:-0.01em; line-height:1.3;
color:var(--wp--preset--color--contrast);
margin-bottom:.35em;
}
/* hover 는 면이 뜨는 방향으로 — 배경을 흰색으로 올리고 테두리를 주색으로 바꾼다
(주색 대비 6.18:1, 비텍스트 3:1 기준 통과) */
.tics-cats__grid a:hover{
background:var(--wp--preset--color--base);
border-color:var(--wp--preset--color--primary);
}
.tics-cats__grid a:hover strong{ color:var(--wp--preset--color--primary); }
@media (min-width:1000px){
.tics-cats__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* 최신 글 — 커버 이미지 카드 그리드. 첫 글은 리드 스토리로 두 칼럼을 다 쓴다.
li 에 grid 를 걸지만 자식이 전부 블록 요소(figure·div·h·p)라 인라인 쪼개짐 함정과 무관. */
.tics-latest .wp-block-post-template{
display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
margin:0; padding:0; list-style:none;
}
.tics-latest .wp-block-post{ margin:0; min-width:0; }
.tics-latest li.wp-block-post:first-child{ grid-column:1 / -1; }
.tics-card__media{
margin:0 0 1em;
border-radius:var(--wp--custom--radius--md);
border:1px solid var(--wp--preset--color--border);
overflow:hidden;
background:var(--wp--preset--color--base-2);
}
.tics-card__media img{ display:block; transition:transform .35s ease; }
.wp-block-post:hover .tics-card__media img{ transform:scale(1.02); }
.tics-latest .wp-block-post-title{
font-family:var(--wp--preset--font-family--serif);
font-size:var(--wp--preset--font-size--lg); font-weight:600; line-height:1.3; letter-spacing:-0.01em;
margin:.3em 0 .35em;
}
/* 제목은 잉크색 — 파랑은 hover 에만. 목록 전체가 파란 세리프면 링크 더미로 읽힌다 */
.tics-latest .wp-block-post-title a{ text-decoration:none; color:inherit; }
.tics-latest .wp-block-post-title a:hover{ color:var(--wp--preset--color--primary); text-decoration:underline; text-underline-offset:3px; }
.tics-latest .wp-block-post-excerpt{ color:var(--wp--preset--color--contrast-2); font-size:var(--wp--preset--font-size--sm); }
.tics-latest .wp-block-post-excerpt__excerpt{
line-height:1.7; margin:0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tics-latest .tics-meta{ margin-block:.6em 0; }
/* 리드 스토리 — 넓은 화면에서 이미지 왼쪽·텍스트 오른쪽 분할. figure 가 4행을 관통하므로
남는 높이는 텍스트 행 사이로 고르게 흘러 잡지식 세로 리듬이 된다. */
@media (min-width:781px){
.tics-latest li.wp-block-post:first-child{
display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:var(--wp--preset--spacing--50); row-gap:.2rem;
}
.tics-latest li.wp-block-post:first-child .tics-card__media{ grid-column:1; grid-row:1 / span 4; margin:0; }
.tics-latest li.wp-block-post:first-child > :not(.tics-card__media){ grid-column:2; }
.tics-latest li.wp-block-post:first-child .wp-block-post-title{
font-size:clamp(1.5rem, 1.05rem + 1.7vw, 2rem); line-height:1.2;
}
.tics-latest li.wp-block-post:first-child .wp-block-post-excerpt{ font-size:var(--wp--preset--font-size--base); }
.tics-latest li.wp-block-post:first-child .wp-block-post-excerpt__excerpt{ -webkit-line-clamp:4; }
}
@media (max-width:780px){
.tics-latest .wp-block-post-template{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--50); }
}
/* 목록 페이지네이션 */
.tics-latest .wp-block-query-pagination{
margin-top:var(--wp--preset--spacing--50);
padding-top:var(--wp--preset--spacing--30);
border-top:1px solid var(--wp--preset--color--border);
}
.tics-latest .wp-block-query-pagination a{
display:inline-block; padding:.4em .2em;
text-decoration:none; font-weight:600;
color:var(--wp--preset--color--primary);
}
.tics-latest .wp-block-query-pagination a:hover{ text-decoration:underline; }
.tics-footer-legal{
margin-top:.9em; padding:0; list-style:none;
display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.2em; row-gap:0;
}
.tics-footer-legal li{ margin:0; }
.tics-footer-legal li+li::before{ content:"·"; color:var(--wp--custom--masthead--muted); margin-right:.2em; }
.tics-footer-legal a{ display:inline-block; padding:.62em .15em; }
/* 푸터 안의 모든 링크가 탭 영역을 갖게 한다 — 저작권 줄의 사이트명 링크가 17px 로 남아 있었다 */
.tics-footer-copy a{ display:inline-block; padding:.62em .1em; }
@media (max-width:600px){
/* 1열이었다. 카테고리가 6개가 되면서 1열은 약 537px 를 먹어 첫 글 링크를 화면 밖으로
밀었다(2026-09-02 실측). 2열로 둔다 — 카드 안이 제목 한 줄 + 설명 두 줄이라 든다. */
.tics-cats__grid a{ font-size:var(--wp--preset--font-size--sm); }
}
/* ── 본문 하이라이트 ─────────────────────────────────────────────
구텐베르크 코어의 highlight 포맷이 를 쓰므로 편집기에서 열어도 유지된다.
밀도가 핵심이다 — 문단당 1문장·글당 4~6개를 린트가 강제한다.
전부 칠하면 아무것도 강조되지 않는다. */
.wp-block-post-content mark,
.tics-box mark{
background:linear-gradient(transparent 58%, var(--wp--custom--highlight) 58%);
color:inherit;
padding:0 .06em;
border-radius:2px;
}
/* ── 계산기 (tics-calcapp) ─────────────────────────────────────────────────
patterns/calc-app.php 의 골격 + functions.php 가 렌더 시점에 그리는 폼.
정적 "계산 예시"(.tics-calc)와 다른 블록이다 — 값을 재정의하지 않는다. */
.tics-calcapp{ background:var(--wp--preset--color--base-2); }
.tics-calcapp .tics-box__title::before{ content:"🧮"; }
/* 폼 — **한 줄에 한 칸**으로 세운다. 여러 열로 두었을 때 실측된 것: 칸마다 라벨 줄수·
도움말 줄수가 달라(1열 라벨+설명+입력 / 2열 라벨+입력 / 3열 라벨+5줄 설명+입력)
입력칸의 세로 위치가 전부 어긋났다. 열을 맞추는 방법은 여럿이지만(서브그리드,
컨트롤 바닥 정렬) 전부 "칸 높이를 억지로 맞추는" 보정이고, 도움말 없는 칸이 섞이면
또 어긋난다. 740px 본문은 대시보드가 아니라 **글의 한 단**이다 — 결정을 한 줄에
하나씩 두면 어긋날 축 자체가 없어진다.
대신 컨트롤에 상한 폭을 준다. 한 줄을 다 쓰는 숫자 입력칸은 6자리를 690px 에 흘리고,
도움말은 98자까지 늘어난다(본문 행길이 상한 90자 초과).
컨트롤의 margin-top:auto 는 남겨 둔다 — 이 폼을 다시 여러 열로 돌릴 일이 있으면
그때 입력칸 바닥을 맞추는 것이 이 한 줄이다(마크업 순서 label → help → control 고정). */
.tics-calcapp__form{
display:grid;
grid-template-columns:1fr;
gap:var(--wp--preset--spacing--30);
margin-bottom:var(--wp--preset--spacing--40);
}
.tics-calcapp__field{ display:flex; flex-direction:column; gap:.35em; min-width:0; }
.tics-calcapp__field>.tics-calcapp__control,
.tics-calcapp__field>select,
.tics-calcapp__field>input{ margin-top:auto; }
.tics-calcapp__field label{ font-weight:700; font-size:var(--wp--preset--font-size--sm); line-height:1.4; }
.tics-calcapp__help{
font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--contrast-2);
line-height:1.5; max-width:36rem;
}
.tics-calcapp__control{ display:flex; align-items:center; gap:.4em; max-width:14rem; }
.tics-calcapp input,.tics-calcapp select{
/* padding .55em → .75em (2026-09-02): 실측 높이 39/41px 로 44px 터치 타깃 미달이었다 */
width:100%; padding:.75em .7em; font-size:var(--wp--preset--font-size--base);
font-family:inherit; color:var(--wp--preset--color--contrast);
background:var(--wp--preset--color--base);
border:1px solid var(--wp--preset--color--border); border-radius:4px;
}
.tics-calcapp input{ font-family:var(--wp--preset--font-family--mono); text-align:right; }
/* 셀렉트는 네이티브라 줄바꿈이 없다 — 긴 선택지("On the day of the event (only where the
product allows same-day cancellation)" 68자)가 칸 폭에서 잘려 **무엇이 선택돼 있는지
보이지 않았다.** 숫자 칸과 달리 30rem 까지 열어 준다(480px = 17px 기준 약 60자).
그래도 넘치는 선택지는 말줄임으로 잘렸다는 것을 알린다 — 아무 표시 없이 끊기지 않게. */
.tics-calcapp select{ max-width:30rem; text-overflow:ellipsis; padding-right:2.2em; }
.tics-calcapp input:focus-visible,.tics-calcapp select:focus-visible{
outline:2px solid var(--wp--preset--color--primary); outline-offset:1px; border-color:transparent;
}
.tics-calcapp__unit{ flex:0 0 auto; font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--contrast-2); }
/* 결과 — 광고와 붙지 않게 아래 여백을 넉넉히 둔다(ad_policy P3 오클릭 방지) */
.tics-calcapp__out{ border-top:1px solid var(--wp--preset--color--border); padding-top:var(--wp--preset--spacing--40); margin-bottom:var(--wp--preset--spacing--50); }
/* 위계 세 단 — 라벨(sm·보조 본문) < 값(md·본문 잉크) < 최종값(xl·주색 면).
이 사람이 여기 온 이유는 마지막 한 줄이다. 그 줄만 면을 갖는다.
선택자를 두 벌 적는 이유: 지금 엔진(tics-calc.js)은 dl.tics-calcapp__rows > div(+.is-total)
를 그리고, 갱신 중인 마크업 계약은 .tics-calcapp__row(+--total) 다. 어느 쪽이 나가도
스타일이 빠지지 않게 둘 다 받는다 — 한쪽으로 정리되면 나머지를 지운다. */
.tics-calcapp__rows{ margin:0; }
.tics-calcapp__rows>div,
.tics-calcapp__out .tics-calcapp__row{
display:grid; grid-template-columns:minmax(0,1fr) auto;
align-items:baseline; gap:.2em 1em;
padding:.5em 0; border-bottom:1px dashed var(--wp--preset--color--border);
}
.tics-calcapp__rows dt,
.tics-calcapp__out .tics-calcapp__row>:first-child{
margin:0; color:var(--wp--preset--color--contrast-2);
font-size:var(--wp--preset--font-size--sm); line-height:1.5;
}
.tics-calcapp__rows dd,
.tics-calcapp__out .tics-calcapp__row>:last-child{
margin:0; font-family:var(--wp--preset--font-family--mono);
font-variant-numeric:tabular-nums; text-align:right;
font-size:var(--wp--preset--font-size--md); font-weight:600;
color:var(--wp--preset--color--contrast);
}
.tics-calcapp__rows>div.is-total,
.tics-calcapp__out .tics-calcapp__row--total{
border-bottom:none;
margin-top:var(--wp--preset--spacing--30);
padding:.8em .9em;
align-items:center;
background:var(--wp--preset--color--primary-soft);
border:1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
border-radius:var(--wp--custom--radius--sm);
}
.tics-calcapp__rows>div.is-total dt,
.tics-calcapp__out .tics-calcapp__row--total>:first-child{
color:var(--wp--preset--color--contrast);
font-size:var(--wp--preset--font-size--base); font-weight:700;
}
.tics-calcapp__rows>div.is-total dd,
.tics-calcapp__out .tics-calcapp__row--total>:last-child{
font-size:var(--wp--preset--font-size--xl); line-height:1.15; font-weight:700;
color:var(--wp--preset--color--primary);
}
/* 좁은 화면에서는 최종값이 라벨 옆에 끼지 못한다 — 라벨 아래로 내리고 왼쪽 정렬로 읽힌다 */
@media (max-width:480px){
.tics-calcapp__rows>div.is-total,
.tics-calcapp__out .tics-calcapp__row--total{ grid-template-columns:1fr; }
.tics-calcapp__rows>div.is-total dd,
.tics-calcapp__out .tics-calcapp__row--total>:last-child{ text-align:left; }
}
/* 총계 행이 **마지막이 아닐 수 있다** — nol-cancel-fee 는 fee_total(total:true) 뒤에
"Ticket price less the calculated fee" 가 한 줄 더 온다. 강조 면 뒤에 붙는 줄이
면에 달라붙어 보이지 않게 간격을 주고, 목록 끝의 점선은 지운다(데이터 없는 잉크). */
.tics-calcapp__rows>div.is-total+div,
.tics-calcapp__out .tics-calcapp__row--total+.tics-calcapp__row{ padding-top:.75em; }
.tics-calcapp__rows>div:last-child,
.tics-calcapp__out .tics-calcapp__row:last-child{ border-bottom:none; }
.tics-calcapp__read{ display:block; font-size:var(--wp--preset--font-size--sm); font-weight:400; color:var(--wp--preset--color--contrast-2); }
.tics-calcapp__note,.tics-calcapp__fallback,.tics-calcapp__error{
font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--contrast-2); margin:.6em 0 0;
}
.tics-calcapp__error{ color:var(--wp--preset--color--danger); }
/* ── 도구의 범위 선언 (tics-limits) ────────────────────────────────────────
주의 박스와 다르다: 독자 행동에 대한 경고가 아니라 "이 도구가 담지 못하는 것"이다.
danger 의 빨강을 쓰지 않는 이유 — 경고가 아니라 범위이고, 계산기 바로 아래에서
결과를 부정하는 인상을 주면 안 된다. 대신 확실히 구분되게 좌측 굵은 선을 준다. */
.tics-limits{
background:var(--wp--preset--color--base-2);
border-color:var(--wp--preset--color--border);
border-left:5px solid var(--wp--preset--color--contrast-2);
}
.tics-limits .tics-box__title::before{ content:"⊘"; }
.tics-limits .tics-box__title{ color:var(--wp--preset--color--contrast-2); }
/* 본문보다 작게 두지 않는다 — 계약이 필수로 요구하고 분량 예산에서까지 뺀 블록을
부속 정보 크기(sm)로 렌더하면 방향이 반대가 된다. notice·danger·tip 도 본문 크기다. */
.tics-limits p{ line-height:1.75; }
.tics-limits p + p{ margin-top:.7em; }
/* ── 화면 흐름 (tics-flow) ────────────────────────────────────────────────
단계 하나 =
· 이 아이템이 되어 텍스트가 세로로 갈라졌던 것과 다르다). */
.tics-flow__step.is-tall{
display:grid; grid-template-columns:minmax(0,300px) 1fr;
gap:1.25rem; align-items:start;
}
.tics-flow__step.is-tall img{ width:auto; max-height:78vh; margin:0; }
.tics-flow__step.is-tall figcaption{ margin-top:0; }
}
/* ── 본문 목차 (tics-toc) ────────────────────────────────────────────────
functions.php 의 render_block 필터가 **첫 h2 직전에** 그린다 — 저장된 본문에는 없다.
마크업 계약: nav.tics-toc > p.tics-toc__title + ol > li > a[href^="#"]
h2 가 3개 미만인 글에는 아예 나오지 않는다(목록이 아니라 소음이 된다).
요약 카드(tics-summary) 바로 아래에 서므로 **면(배경)을 또 주지 않는다.** 색 면이 둘
연속하면 요약 카드의 강조가 사라진다 — 위아래 경계선 하나로만 구분한다. 순번도 붙이지
않는다: 순서는 자리가 이미 말한다(tics-hub 와 다른 물건이다 — 그쪽은 형제 글의 순번이 뜻을 갖는다).
링크 높이 ≥40px: 목록으로 나열된 링크는 줄 높이(약 25px)가 그대로 터치 표적이 된다.
가운뎃점 인라인 링크·푸터에서 이미 물린 오터치와 같은 부류라 padding-block 으로 벌린다.
li 에 flex·grid 를 주지 않는 이유도 같은 목록에 적혀 있다(인라인 요소가 쪼개진다). */
.tics-toc{
margin-block:var(--wp--preset--spacing--50);
padding-block:var(--wp--preset--spacing--20);
border-top:1px solid var(--wp--preset--color--border);
border-bottom:1px solid var(--wp--preset--color--border);
}
.tics-toc__title{
font-size:var(--wp--preset--font-size--sm);
font-weight:700; line-height:1.4; letter-spacing:.01em;
color:var(--wp--preset--color--contrast-2);
margin:0 0 .2em;
}
.tics-toc ol{ list-style:none; margin:0; padding:0; }
.tics-toc li{ margin:0; }
.tics-toc a{
display:block; /* 표적을 줄 폭 전체로 — 인라인이면 글자 높이만 잡힌다 */
padding-block:.62em; /* 실측 41px 였다 — 44px 권장선에 맞춰 올렸다(2026-09-02) */
line-height:1.5;
text-decoration:none;
/* 링크 색을 준다. 절제한다고 본문색으로 두었더니 **탭할 수 있는 것으로 안 보였다**
(2026-08-26 모바일 실측 스크린샷) — 목차는 항법 장치라 링크로 안 읽히면 존재 이유가 없다.
밑줄은 hover 에서만: 다섯 줄이 전부 밑줄이면 그것이 이 화면에서 가장 센 잉크가 된다. */
color:var(--wp--preset--color--primary);
border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent);
}
.tics-toc li:last-child a{ border-bottom:0; }
.tics-toc a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* ── 글 하단 「More guides」 (tics-more) ─────────────────────────────────
functions.php 의 render 필터가 그린다. 마크업 계약:
nav.tics-more > p.tics-more__title + ul > li > a + span.tics-more__meta
본문 폭(740px) 안에서 2열, 좁아지면 1열. 미디어쿼리 대신 auto-fit 을 쓴다 —
본문은 아카이브·계산기·글에서 폭이 달라서 뷰포트가 아니라 **컨테이너 폭**이 기준이다
(19rem = 304px: 740px 이면 2열, 640px 이하면 1열).
minmax 의 최소값은 반드시 `min(19rem,100%)` 이다. 맨 `19rem` 을 쓰면 컨테이너가 304px
보다 좁을 때 **트랙 자체가 컨테이너를 넘는다** — 320px 뷰포트(본문 폭 272px)에서 문서
scrollWidth 가 328px 이 되어 페이지 전체에 8px 가로 스크롤이 걸렸다. 라이브 실측
2026-09-02, 발행 29건 중 .tics-more 를 가진 전건. li 의 min-width:0 으로는 못 막는다:
넘치는 것은 아이템이 아니라 트랙의 최소폭이다.
시리즈 허브(tics-hub)와 다른 물건이다: 허브는 같은 클러스터의 형제를 순번으로 세우고,
이쪽은 클러스터 밖으로 나가는 출구다. 그래서 순번을 붙이지 않는다.
li 를 flex 로 두지만 자식이 · 둘뿐이라 인라인 쪼개짐 함정과 무관하다. */
.tics-more{
margin-block:var(--wp--preset--spacing--50);
padding-top:var(--wp--preset--spacing--40);
border-top:1px solid var(--wp--preset--color--border);
}
.tics-more__title{
font-size:var(--wp--preset--font-size--md);
font-weight:700; line-height:1.4; letter-spacing:-0.015em;
margin:0 0 .8em;
}
.tics-more ul{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
gap:var(--wp--preset--spacing--30);
}
.tics-more li{
position:relative; margin:0; min-width:0;
display:flex; flex-direction:column; gap:.3em;
background:var(--wp--preset--color--base-2);
border:1px solid var(--wp--preset--color--border);
border-radius:var(--wp--custom--radius--sm);
padding:.85em 1em .9em;
}
.tics-more a{
text-decoration:none; font-weight:600; line-height:1.45; letter-spacing:-0.01em;
color:var(--wp--preset--color--contrast);
}
/* 카드 전체를 클릭 대상으로 — 제목 글자만 링크면 모바일에서 세로 17px 표적이 된다
(가운뎃점 인라인 링크에서 이미 물린 것과 같은 부류). span 은 링크가 아니라 덮어도 안전. */
.tics-more a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.tics-more li:hover{
background:var(--wp--preset--color--base);
border-color:var(--wp--preset--color--primary);
}
.tics-more li:hover a{ color:var(--wp--preset--color--primary); }
.tics-more__meta{
font-size:var(--wp--preset--font-size--sm);
color:var(--wp--preset--color--contrast-2);
line-height:1.4;
}
/* ── 언어 전환 (ko ↔ en) ─────────────────────────────────────────────────
짝이 되는 반대 언어판이 **실제로 발행돼 있을 때만** 그린다. 없는 링크를 그리면 404 다. */
.tics-meta__lang{
display:inline-block; margin-left:.6rem; padding:.15rem .5rem;
border:1px solid var(--wp--preset--color--border); border-radius:2px;
font-size:var(--wp--preset--font-size--sm); text-decoration:none;
color:var(--wp--preset--color--contrast-2);
}
.tics-meta__lang:hover{ border-color:var(--wp--preset--color--primary); color:var(--wp--preset--color--primary); }
/* ── 인터랙션 상태 (2026-08-20 추가) ──────────────────────────────────────
감사 실측: :hover 규칙이 5곳 있는데 transition 이 **0건**이었고 :active 도 0건이었다.
색·테두리·배경이 0ms 로 툭 바뀌면 눌린 것인지 지나간 것인지 손이 구분하지 못한다.
여기서는 **속성만 얹는다** — 위쪽의 기존 :hover 규칙과 .tics-search* 블록은 그대로 둔다.
전역 `* { transition }` 은 쓰지 않는다: 광고 iframe·계산기 결과 갱신처럼 우리가 의도하지
않은 곳까지 물리고, 되돌리려면 다시 전역 예외를 파야 한다. 대상 선택자만 적는다. */
.tics-nav a,
.tics-search .wp-block-search__button,
.tics-latest .wp-block-post-title a,
.tics-hero__picks a,
.tics-hero__tool a,
.tics-more li,
.tics-more a,
.tics-hub a,
.tics-toc a,
.tics-meta__lang,
.tics-source a{
transition:color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
/* 눌린 느낌 — 이동이 아니라 압력으로 읽히도록 아주 작게 준다.
카드(.tics-cats__grid a)만 scale 을 쓴다: 나머지는 인라인 링크라 주변 줄이 흔들린다. */
.tics-cats__grid a:active,
.tics-hero__picks a:active,
.tics-hero__tool a:active{ transform:scale(.99); background:var(--wp--preset--color--base-3); }
.tics-nav a:active,
.tics-latest .wp-block-post-title a:active,
.tics-hub a:active,
.tics-meta__lang:active{ opacity:.7; }
.tics-cats__grid a,
.tics-hero__picks a,
.tics-hero__tool a{ transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .1s ease; }
/* 키보드 초점 — 검색 입력과 계산기 입력에만 있었다(실측 2곳).
:focus 가 아니라 :focus-visible 을 쓴다: 마우스 클릭에도 링이 남으면 사용자가 그것을
"선택된 상태"로 읽는다. 링 색은 본문 링크와 같은 primary 로 통일한다. */
.tics-cats__grid a:focus-visible,
.tics-hero__picks a:focus-visible,
.tics-hero__tool a:focus-visible,
.tics-more a:focus-visible,
.tics-latest .wp-block-post-title a:focus-visible,
.tics-latest .tics-card__media a:focus-visible,
.tics-latest .wp-block-query-pagination a:focus-visible,
.tics-hub a:focus-visible,
.tics-toc a:focus-visible,
.tics-meta__lang:focus-visible,
.tics-source a:focus-visible,
.tics-faq .wp-block-details summary:focus-visible,
.wp-block-post-content a:focus-visible{
outline:2px solid var(--wp--preset--color--primary);
outline-offset:2px;
border-radius:2px;
}
/* 잉크 밴드(머스트헤드·푸터) 위에서는 primary 링이 배경에 묻힌다 — 밝은 accent 로 */
.tics-header a:focus-visible,
.tics-nav a:focus-visible,
.tics-footer a:focus-visible{
outline:2px solid var(--wp--custom--masthead--accent);
outline-offset:2px;
border-radius:2px;
}
/* 목차·FAQ 앵커로 뛸 때. 헤더가 고정이 아니므로 scroll-margin 은 필요 없다. */
html{ scroll-behavior:smooth; }
/* 움직임을 줄이도록 설정한 사람에게는 위의 전환·스케일을 돌려준다.
초점 링은 접근성 장치이므로 여기서 끄지 않는다. */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.tics-cats__grid a,
.tics-hero__picks a,
.tics-hero__tool a{ transition:none; }
.tics-card__media img{ transition:none; }
.wp-block-post:hover .tics-card__media img{ transform:none; }
.tics-nav a,
.tics-search .wp-block-search__button,
.tics-latest .wp-block-post-title a,
.tics-more li,
.tics-more a,
.tics-hub a,
.tics-toc a,
.tics-meta__lang,
.tics-source a{ transition:none; }
.tics-cats__grid a:active,
.tics-hero__picks a:active,
.tics-hero__tool a:active{ transform:none; }
}
/* 태그가 하나도 없는 글에서는 태그 줄 자체를 그리지 않는다.
core/post-terms 는 항목이 없으면 아무것도 렌더하지 않는데, 그것을 감싼 그룹은 그대로
나가서 **모든 글이 빈 컨테이너를 하나씩 싣고 있었다**(2026-08-20 라이브 실측).
:empty 로는 안 잡힌다 — 안에 빈 post-terms div 가 들어 있어 비어 있지 않기 때문이다.
링크 유무로 본다(.tics-hub li:not(:has(a)) 와 같은 방식). */
.tics-tags:not(:has(a)){ display:none; }
/* ══════════════════════════════════════════════════════════════════════════
2026-09-02 진단 반영 — 항법·어포던스·상태
근거: 발행 29건 전수 실측 + axe-core 4.10.2 + 320/375/768/1280 렌더 측정.
이 절은 **새로 생긴 규칙만** 모은다. 값만 바뀐 것은 원래 있던 자리에서 고쳤다.
══════════════════════════════════════════════════════════════════════════ */
/* ── 목록 시맨틱 ────────────────────────────────────────────────────────
list-style:none 을 준 은 Safari/VoiceOver 가 목록 시맨틱을 벗긴다.
role="list" 는 functions.php 가 렌더 시점에 붙인다 — 여기서는 표식만 지운다. */
.tics-hero__picks li{ margin:0; }
.tics-hero__picks li::marker,
.tics-footer-nav li::marker,
.tics-footer-legal li::marker{ content:""; }
/* ── 클릭 어포던스 ──────────────────────────────────────────────────────
진단: 홈에서 목적지를 고르는 두 장치(카테고리 카드·플랫폼 픽커)가 링크색도 밑줄도
없고 hover 로만 반응했다. 터치 기기에는 hover 가 없으므로 신호가 0이었다.
행 구분선 대비는 1.29:1 로 비텍스트 3:1 기준에도 못 미친다.
화살표는 장식이 아니라 「여기가 목적지」를 지는 잉크다 — 색을 더 쓰지 않고 해결한다. */
.tics-cats__grid a strong::after,
.tics-hero__picks a strong::after{
content:" \2192";
font-family:var(--wp--preset--font-family--sans);
font-weight:700;
color:var(--wp--preset--color--primary);
}
/* 카드가 서로 다른 높이로 끝나지 않게 —