/* ROBERIN The New — 내 아이피 확인하기 (my-ip-checker) 20260901c
 *
 * 팔레트는 추가 필수 확인 #16 의 warm paper 고정값이다. 도구 종류로 색을 바꾸지 않는다.
 * 숫자 family/weight 는 assets/css/roberin-the-new-numerals-*.css 가 소유하므로
 * 이 파일은 숫자 폰트를 선언하지 않는다.
 *
 * reset 주의 (추가 필수 확인 #3): p 에는 padding:0 을 주지 않는다.
 * status·detail·caption 이 padding 을 가진 컴포넌트이기 때문이다.
 */

.tn-ipc-page{--ipc-paper:#faf6ee;--ipc-ink:#1a1208;--ipc-muted:#5a4a30;--ipc-line:#b8a888;--ipc-soft:#ddd4be;--ipc-surface:#fffaf0;--ipc-wash:#f5efdf;--ipc-accent:#c44a00;--ipc-good:#2f7d54;--ipc-primary:#1a1208;--ipc-primary-text:#faf6ee;--ipc-secondary:#ede6d4;max-width:1180px;margin:0 auto;color:var(--ipc-ink)}

.tn-ipc-tool,.tn-ipc-tool *{box-sizing:border-box}
.tn-ipc-tool{display:grid;gap:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid var(--ipc-line);background:var(--ipc-paper);color:var(--ipc-ink)}
.tn-ipc-tool :is(ul,ol,li,dl,dd,dt){margin:0;padding:0;list-style:none}
.tn-ipc-tool p{margin:0}
.tn-ipc-tool :is(code,pre,kbd,samp){padding:0;border:0;background:transparent;color:inherit;font:inherit}

.tn-ipc-pane-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ipc-muted)}

/* ── 상단 전폭 primary readout ─────────────────────────────── */
.tn-ipc-primary{display:grid;gap:14px;padding:18px;border-bottom:1px solid var(--ipc-line)}
.tn-ipc-main{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;min-width:0}
.tn-ipc-main>strong{display:block;min-width:0;font-size:clamp(22px,4.6vw,40px);font-weight:800;line-height:1.15;letter-spacing:normal;overflow-wrap:anywhere}
.tn-ipc-badge{line-height:1.2}
.tn-ipc-main>strong[data-empty=true]{color:var(--ipc-muted)}
.tn-ipc-main__kind{align-self:center;justify-self:start;padding:4px 9px;border:1px solid var(--ipc-line);background:var(--ipc-wash);font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ipc-muted);white-space:nowrap}

.tn-ipc-badges{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
.tn-ipc-badge{display:inline-grid;place-items:center;padding:4px 9px;border:1px solid var(--ipc-line);background:var(--ipc-wash);font-size:11px;font-weight:800;line-height:1.2;color:var(--ipc-ink)}
.tn-ipc-badge[data-tone=good]{border-color:var(--ipc-good);color:var(--ipc-good)}
.tn-ipc-badge[data-tone=warn]{border-color:var(--ipc-accent);color:var(--ipc-accent)}

.tn-ipc-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tn-ipc-btn{display:grid;place-items:center;width:100%;min-height:36px;padding:8px 10px;border:1px solid var(--ipc-line);background:var(--ipc-secondary);color:var(--ipc-ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:800;line-height:1;text-align:center;outline:0;cursor:pointer}
.tn-ipc-btn--primary{background:var(--ipc-primary);color:var(--ipc-primary-text);border-color:var(--ipc-primary)}
.tn-ipc-btn:hover{border-color:var(--ipc-accent);outline:0}
.tn-ipc-btn:focus-visible{outline:2px solid var(--ipc-accent);outline-offset:2px}
.tn-ipc-btn:disabled{opacity:.55;cursor:default;outline:0}

.tn-ipc-status{padding:10px 12px;border:1px solid var(--ipc-soft);background:var(--ipc-surface);font-size:11px;font-weight:400;line-height:1.6;color:var(--ipc-muted)}
.tn-ipc-status[data-state=error]{border-color:var(--ipc-accent);color:var(--ipc-accent)}
.tn-ipc-status[data-state=warn]{border-color:var(--ipc-accent)}
.tn-ipc-status[data-state=success]{color:var(--ipc-good)}
.tn-ipc-status[data-state=busy]{border-color:var(--ipc-accent)}

/* ── 단일 세로 축 grid (추가 필수 확인 #22) ────────────────── */
.tn-ipc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:18px}
/* align-self:start 가 없으면 같은 행의 짧은 카드가 높은 카드 높이로 늘어나 카드 테두리 안에
 * 큰 빈 공간이 생긴다 (우려 #28). 카드는 자기 내용 높이만 차지하게 둔다. */
.tn-ipc-card{display:grid;align-self:start;align-content:start;gap:10px;min-width:0;padding:14px;border:1px solid var(--ipc-soft);background:var(--ipc-surface)}
.tn-ipc-card--wide{grid-column:1/-1}

.tn-ipc-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tn-ipc-metrics>div{display:grid;align-content:start;gap:5px;min-width:0;padding:10px;border:1px solid var(--ipc-soft);background:var(--ipc-wash)}
.tn-ipc-metrics dt{font-size:11px;font-weight:400;line-height:1.35;color:var(--ipc-muted)}
/* 숫자 결과는 음수 자간을 쓰지 않는다 (우려 #31/#39). 전역 규칙이 -0.304px 를
 * 상속시키고 있어서 여기서 명시적으로 되돌린다. */
.tn-ipc-metrics dd{min-width:0;font-size:14px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-ipc-metrics dd[data-empty=true]{color:var(--ipc-muted)}
.tn-ipc-metrics--single{grid-template-columns:minmax(0,1fr)}
.tn-ipc-metrics dd.tn-ipc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700}

/* ── 노출 점검 ─────────────────────────────────────────────── */
.tn-ipc-meter{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:10px;padding:10px;border:1px solid var(--ipc-soft);background:var(--ipc-wash)}
.tn-ipc-meter__track{position:relative;height:8px;border:1px solid var(--ipc-soft);background:var(--ipc-surface);overflow:hidden}
.tn-ipc-meter__fill{display:block;height:100%;width:0;background:var(--ipc-good);transition:width .18s linear}
.tn-ipc-meter[data-state=warn] .tn-ipc-meter__fill{background:var(--ipc-accent)}
.tn-ipc-meter[data-state=idle] .tn-ipc-meter__fill{background:var(--ipc-soft)}
.tn-ipc-meter__value{font-size:12px;font-weight:800;white-space:nowrap}

.tn-ipc-checks{display:grid;gap:8px}
.tn-ipc-check{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;padding:10px;border:1px solid var(--ipc-soft);background:var(--ipc-wash)}
.tn-ipc-check__mark{display:grid;place-items:center;min-height:22px;padding:0 4px;border:1px solid var(--ipc-line);background:var(--ipc-surface);font-size:10px;font-weight:800;line-height:1;color:var(--ipc-muted)}
.tn-ipc-check[data-state=good] .tn-ipc-check__mark{border-color:var(--ipc-good);color:var(--ipc-good)}
.tn-ipc-check[data-state=warn] .tn-ipc-check__mark{border-color:var(--ipc-accent);color:var(--ipc-accent)}
.tn-ipc-check__body{display:grid;gap:4px;min-width:0}
.tn-ipc-check__label{font-size:12px;font-weight:800;line-height:1.35}
.tn-ipc-check__detail{font-size:11px;font-weight:400;line-height:1.6;color:var(--ipc-muted);overflow-wrap:anywhere}
.tn-ipc-check-empty{padding:12px;border:1px dashed var(--ipc-soft);background:var(--ipc-wash);font-size:11px;font-weight:400;line-height:1.6;color:var(--ipc-muted);text-align:center}

.tn-ipc-note{padding:0 18px 18px}
.tn-ipc-caption{font-size:11px;font-weight:400;line-height:1.6;color:var(--ipc-muted)}

/* ── dark / inverse / auto-dark ────────────────────────────── */
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-ipc-page{--ipc-paper:#241d12;--ipc-ink:#efe6d2;--ipc-muted:#c3b492;--ipc-line:#6f6047;--ipc-soft:#574a37;--ipc-surface:#322a1a;--ipc-wash:#2c2517;--ipc-accent:#e8823f;--ipc-good:#66a77f;--ipc-primary:#4a3116;--ipc-primary-text:#f7ead1;--ipc-secondary:#2f2115}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-ipc-tool :is(button,input,select){color:var(--ipc-ink)!important;-webkit-text-fill-color:var(--ipc-ink)!important}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-ipc-btn--primary{border-color:var(--ipc-accent)}

@media(prefers-color-scheme:dark){
body[data-scheme=auto]:not([data-l=light]) .tn-ipc-page{--ipc-paper:#241d12;--ipc-ink:#efe6d2;--ipc-muted:#c3b492;--ipc-line:#6f6047;--ipc-soft:#574a37;--ipc-surface:#322a1a;--ipc-wash:#2c2517;--ipc-accent:#e8823f;--ipc-good:#66a77f;--ipc-primary:#4a3116;--ipc-primary-text:#f7ead1;--ipc-secondary:#2f2115}
body[data-scheme=auto]:not([data-l=light]) .tn-ipc-tool :is(button,input,select){color:var(--ipc-ink)!important;-webkit-text-fill-color:var(--ipc-ink)!important}
body[data-scheme=auto]:not([data-l=light]) .tn-ipc-btn--primary{border-color:var(--ipc-accent)}
}

@media(prefers-reduced-motion:reduce){.tn-ipc-meter__fill{transition:none}}

/* ── mobile ────────────────────────────────────────────────── */
@media(max-width:720px){
.tn-ipc-page{margin-inline:5px}
.tn-ipc-primary{padding:13px}
.tn-ipc-grid{grid-template-columns:minmax(0,1fr);padding:13px}
.tn-ipc-note{padding:0 13px 13px}
.tn-ipc-main{grid-template-columns:minmax(0,1fr);gap:6px}
.tn-ipc-main__kind{justify-self:start}
.tn-ipc-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-ipc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:400px){
.tn-ipc-metrics{grid-template-columns:minmax(0,1fr)}
}