/* 2차 — 파일 정리(p2t). 공통 토큰(theme.css·tf.css)을 쓴다.
   폰: 규칙 → 목록 → 지난 묶음을 한 줄로 쌓는다. 큰 화면(1200px~): 왼쪽 규칙(고정 폭) · 오른쪽 목록과 지난 묶음. */

.p2t { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, 12px); }
.p2t-main { display: grid; gap: var(--gap, 12px); min-width: 0; align-content: start; }
.p2t-main > .card + .card, .p2t-side > .card + .card { margin-top: 0; }
@media (min-width: 1200px) {
    .p2t { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; }
    .p2t-side { position: sticky; top: calc(var(--topbar-h, 56px) + 12px); max-height: calc(100vh - var(--topbar-h, 56px) - 24px); overflow: auto; border-radius: var(--r-lg); }
}
@media (min-width: 1700px) { .p2t { grid-template-columns: 480px minmax(0, 1fr); } }

/* 규칙 카드 */
.p2t-rules .card-head svg { width: 18px; height: 18px; color: var(--tf-deep); }
.p2t-rules-body { padding-top: 0; }
.p2t-rules-body > .tf-muted { line-height: 1.55; }
.p2t-rule-list > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--text-2); padding: 8px 0; }
.p2t-rule-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.p2t-rule { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface); }
.p2t-rule.is-decision {
    border-color: color-mix(in srgb, var(--hknu-amber, var(--warn)) 55%, transparent);
    background: color-mix(in srgb, var(--hknu-amber, var(--warn)) 8%, var(--surface));
    box-shadow: inset 3px 0 0 var(--hknu-amber, var(--warn));
}
.p2t-rule.is-decided { border-color: color-mix(in srgb, var(--ok, var(--tf)) 35%, var(--line)); }
.p2t-rule-decided { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.p2t-rule-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 800; font-size: 14px; }
.p2t-rule-value { margin-top: 4px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.p2t-rule-options { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.5; }
.p2t-rule-options.is-muted { font-weight: 500; color: var(--text-2); }
.p2t-rule-basis { margin-top: 4px; font-size: 12px; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; }
.p2t-viewonly { margin-top: 10px; }

/* 종류 칩 */
.p2t-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 0; }
.p2t-kinds .chip { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.p2t-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-2); font-size: 11.5px; font-weight: 800; text-align: center; }
.p2t-kinds .chip.active .p2t-count { background: color-mix(in srgb, #fff 25%, transparent); color: #fff; }
.p2t-list .card-head .more svg { width: 15px; height: 15px; }

/* 도구 줄 */
.p2t-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.p2t-filter { flex: 1 1 220px; min-width: 0; min-height: 38px; }
.p2t-filter svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.p2t-filter input { min-width: 0; width: 100%; }
.p2t-summary { margin: 8px 0 4px; font-size: 12.5px; }
.p2t-empty { padding: 24px 8px; text-align: center; color: var(--text-3); }

/* 항목 */
.p2t-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.p2t-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface); }
.p2t-item.is-on { border-color: color-mix(in srgb, var(--tf) 45%, var(--line)); }
.p2t-item.is-conflict { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.p2t-check { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tf-deep); cursor: pointer; }
.p2t-item-main { flex: 1; min-width: 0; }
.p2t-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; font-weight: 700; }
.p2t-item-head a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.p2t-item-head a:hover { text-decoration: underline; }
.p2t-item-head .p2t-open { color: var(--text-3); font-weight: 600; font-size: 12px; }
.p2t-item-head .tf-code { margin-right: 0; }
.p2t-change { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.p2t-before, .p2t-after { min-width: 0; max-width: 100%; }
.p2t-before { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); overflow-wrap: anywhere; }
.p2t-after { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.p2t-arrow { width: 14px; height: 14px; flex: none; color: var(--tf-deep); }
.p2t-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
/* 아주 넓은 화면: 항목을 두 줄로 놓아 빈 자리를 줄인다 */
@media (min-width: 1600px) { .p2t-list .p2t-items { grid-template-columns: 1fr 1fr; } }
/* 폰: 지금 값과 새 값을 위아래로 — 긴 파일명이 한 줄에서 섞이지 않게 */
@media (max-width: 640px) {
    .p2t-change { flex-direction: column; align-items: flex-start; }
    .p2t-change > span { max-width: 100%; }
    .p2t-arrow { transform: rotate(90deg); }
}

.p2t-apply { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px;
    margin: 10px -16px -12px; padding: 10px 16px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* 확인 시트 */
.p2t-confirm { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.p2t-confirm li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }

/* 지난 묶음 */
.p2t-history .card-head svg { width: 18px; height: 18px; color: var(--text-2); }
.p2t-batches { list-style: none; margin: 0; padding: 0 0 8px; }
.p2t-batch { padding: 10px 16px; }
.p2t-batch + .p2t-batch { border-top: 1px solid var(--line); }
.p2t-batch.is-undone .p2t-batch-title { color: var(--text-2); }
.p2t-batch-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p2t-batch-main { flex: 1 1 240px; min-width: 0; }
.p2t-batch-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; font-size: 14px; }
.p2t-batch-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.p2t-batch-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.p2t-batch-items li { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.p2t-batch-items li.is-skip { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.p2t-batch-items .p2t-change { margin-top: 0; font-size: 12.5px; }