/* ROBERIN The New — 바이오리듬 궁합 계산기 (biorhythm-compatibility-calculator) 20260902c
 *
 * 팔레트는 추가 필수 확인 #16 의 warm paper 고정값이다. 도구 종류로 색을 바꾸지 않는다.
 * 숫자 family/weight 는 assets/css/roberin-the-new-numerals-*.css 가 소유한다.
 * 이 파일은 숫자 폰트를 선언하지 않고 공유 규칙이 매칭되도록 클래스 이름을 맞춘다
 * (`-main > strong`, `-metrics dd`, `-card > -value`, `input[type=date]`).
 *
 * reset 주의 (추가 필수 확인 #3): p 에는 padding:0 을 주지 않는다.
 * status·target·caption 이 padding 을 가진 컴포넌트이기 때문이다.
 *
 * 세로 축 (우려 #42 / 추가 필수 확인 #22): stage 와 analysis 가 같은 2열 트랙을 쓰고
 * 내부 grid 는 전부 repeat(2,minmax(0,1fr)) + gap 8px 로 통일한다.
 */

.tn-bcm-page{--bcm-paper:#faf6ee;--bcm-ink:#1a1208;--bcm-muted:#5a4a30;--bcm-line:#b8a888;--bcm-soft:#ddd4be;--bcm-surface:#fffaf0;--bcm-wash:#f5efdf;--bcm-accent:#c44a00;--bcm-good:#2f7d54;--bcm-primary:#1a1208;--bcm-primary-text:#faf6ee;--bcm-secondary:#ede6d4;--bcm-z1:#b8663a;--bcm-z2:#c99a5c;--bcm-z3:#c9bda2;--bcm-z4:#8aa878;--bcm-z5:#5f8f70;--bcm-me:#c44a00;--bcm-you:#5a4a30;max-width:1180px;margin:0 auto;color:var(--bcm-ink)}

.tn-bcm-tool,.tn-bcm-tool *{box-sizing:border-box}
.tn-bcm-tool{display:grid;gap:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid var(--bcm-line);background:var(--bcm-paper);color:var(--bcm-ink)}
/* 테마의 `.cs-main-content .entry-content ul:not(...)` 는 특이도 0,3,1 로 square 마커와
 * padding-left 32px 를 주입한다. 스코프된 !important 로 고정한다 (kill list #1). */
.tn-bcm-page .tn-bcm-tool :is(ul,ol,li,dl,dd,dt){margin:0!important;padding:0!important;list-style:none!important;list-style-type:none!important}
.tn-bcm-page .tn-bcm-tool :is(ul,ol,li)::marker{content:none}
/* 위 리셋이 li/dl 컴포넌트의 padding 까지 지우면 글이 테두리에 붙는다 (추가 필수 확인 #3). */
.tn-bcm-page .tn-bcm-tool .tn-bcm-gauge-card{padding:8px 9px!important}
.tn-bcm-page .tn-bcm-tool .tn-bcm-basis-card{padding:6px 10px!important}
.tn-bcm-page .tn-bcm-tool .tn-bcm-metrics>div{padding:10px!important}
.tn-bcm-tool p{margin:0}
.tn-bcm-tool :is(code,pre,kbd,samp){padding:0;border:0;border-radius:0;background:none;background-color:transparent;color:inherit;-webkit-text-fill-color:inherit;font:inherit}

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

/* ── 2열 작업면 ───────────────────────────────────────────── */
.tn-bcm-stage,.tn-bcm-analysis{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
.tn-bcm-chips,.tn-bcm-fields,.tn-bcm-actions,.tn-bcm-metrics,.tn-bcm-gauge-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* ── 입력 패널 ─────────────────────────────────────────────── */
.tn-bcm-controls{display:grid;align-content:start;gap:10px;padding:18px;border-right:1px solid var(--bcm-line)}

.tn-bcm-chip{display:grid;place-items:center;width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--bcm-line);background:var(--bcm-secondary);color:var(--bcm-ink);font-family:inherit;font-size:12px;font-weight:800;line-height:1.2;text-align:center;outline:0;cursor:pointer}
.tn-bcm-chip[aria-pressed=true]{background:var(--bcm-primary);color:var(--bcm-primary-text);-webkit-text-fill-color:var(--bcm-primary-text);border-color:var(--bcm-primary)}
.tn-bcm-chip:hover{border-color:var(--bcm-accent);outline:0}
.tn-bcm-chip:focus-visible{outline:2px solid var(--bcm-accent);outline-offset:2px}

.tn-bcm-basis-card{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:10px;min-width:0;padding:6px 10px;border:1px solid var(--bcm-soft);background:var(--bcm-wash)}
.tn-bcm-basis-card dt{font-size:10px;font-weight:400;line-height:1.3;color:var(--bcm-muted)}
.tn-bcm-basis-card dd{justify-self:end;font-size:13px;line-height:1.25;letter-spacing:normal;white-space:nowrap}
.tn-bcm-basis-card dd[data-empty=true]{color:var(--bcm-muted)}

/* 입력 field — label 은 control 밖, rendered gap 5px (추가 필수 확인 #4) */
.tn-bcm-field{display:grid;align-content:start;gap:5px;min-width:0;border:0;background:none;padding:0}
.tn-bcm-field--wide{grid-column:1/-1}
.tn-bcm-field>label{display:block;padding:0;font-size:11px;font-weight:400;line-height:1.35;color:var(--bcm-muted)}
/* 같은 row 두 필드가 같은 label 높이를 예약한다. ES 처럼 긴 locale label 이 두 줄로 접힐 때
 * 한쪽 control 이 밀려 내려가는 것을 막는다 (추가 필수 확인 #2/#4/#17). */
.tn-bcm-fields .tn-bcm-field:not(.tn-bcm-field--wide)>label{min-height:30px}
.tn-bcm-page .tn-bcm-tool .tn-bcm-control{display:flex!important;align-items:center!important;min-width:0;min-height:36px;border:1px solid var(--bcm-soft);background:var(--bcm-wash)}
.tn-bcm-control input{flex:1 1 auto;width:auto;min-width:0;height:34px;padding:0 10px;border:0;background:none;color:var(--bcm-ink);font-family:inherit;font-size:14px;line-height:34px;outline:0}
.tn-bcm-control input::-webkit-calendar-picker-indicator{margin-left:4px;opacity:.55;cursor:pointer}
.tn-bcm-control b{flex:0 0 auto;display:grid;place-items:center;align-self:stretch;padding:0 9px;border-left:1px solid var(--bcm-soft);border-bottom:0;border-right:0;background:var(--bcm-surface);font-size:11px;font-weight:800;line-height:1;color:var(--bcm-muted);white-space:nowrap}
.tn-bcm-control:has(input:focus-visible){outline:2px solid var(--bcm-accent);outline-offset:-1px}
.tn-bcm-field[data-side=me] .tn-bcm-control b{color:var(--bcm-me)}
.tn-bcm-field[data-side=you] .tn-bcm-control b{color:var(--bcm-you)}

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

/* ── 즉시 결과 패널 ───────────────────────────────────────── */
.tn-bcm-result{display:grid;align-content:start;gap:10px;padding:18px}

.tn-bcm-main{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;min-width:0}
.tn-bcm-main>strong{display:block;min-width:0;font-size:clamp(30px,5.4vw,48px);font-weight:800;line-height:1.1;letter-spacing:normal;white-space:nowrap}
.tn-bcm-main>strong[data-empty=true]{color:var(--bcm-muted)}
.tn-bcm-main__kind{align-self:center;justify-self:start;padding:4px 9px;border:1px solid var(--bcm-line);background:var(--bcm-wash);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.2;color:var(--bcm-muted)}

.tn-bcm-status,.tn-bcm-target,.tn-bcm-caption,.tn-bcm-chart-caption{padding:10px 12px;border:1px solid var(--bcm-soft);background:var(--bcm-wash);font-size:12px;font-weight:400;line-height:1.6;color:var(--bcm-muted)}
.tn-bcm-status[data-tone=good]{border-color:var(--bcm-good);color:var(--bcm-good)}
.tn-bcm-status[data-tone=warn]{border-color:var(--bcm-accent);color:var(--bcm-accent)}

/* 스케일 게이지 — 무입력에서도 구간 프레임을 그린다 (추가 필수 확인 #10/#15).
 * gauge 자체는 투명 컨테이너로 두고 track/cards 가 각자 테두리를 소유해
 * 위쪽 grid 와 첫 컬럼 x 가 어긋나지 않게 한다 (#22). */
.tn-bcm-gauge{display:grid;gap:8px;padding:0;border:0;background:none}
.tn-bcm-gauge-track{position:relative;display:flex;width:100%;height:16px;border:1px solid var(--bcm-soft);background:var(--bcm-surface);overflow:hidden}
/* 구간 경계는 위상 궁합 30/50/70/90 으로 고정이라 폭도 CSS 가 소유한다. */
.tn-bcm-gauge-zone{display:block;height:100%}
.tn-bcm-gauge-zone[data-zone="1"]{width:30%;background:var(--bcm-z1)}
.tn-bcm-gauge-zone[data-zone="2"]{width:20%;background:var(--bcm-z2)}
.tn-bcm-gauge-zone[data-zone="3"]{width:20%;background:var(--bcm-z3)}
.tn-bcm-gauge-zone[data-zone="4"]{width:20%;background:var(--bcm-z4)}
.tn-bcm-gauge-zone[data-zone="5"]{width:10%;background:var(--bcm-z5)}
.tn-bcm-gauge-sync{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--bcm-ink);transition:left .18s linear}
.tn-bcm-gauge-sync[hidden]{display:none}
.tn-bcm-gauge-mark{position:absolute;top:-1px;bottom:-1px;width:4px;margin-left:-2px;border:1px solid var(--bcm-ink);background:var(--bcm-paper);transition:left .18s linear}
.tn-bcm-gauge-mark[hidden]{display:none}

.tn-bcm-gauge-card{display:grid;align-content:start;gap:4px;min-width:0;border:1px solid var(--bcm-soft);background:var(--bcm-surface)}
.tn-bcm-gauge-name{display:block;font-size:10px;font-weight:400;line-height:1.3;color:var(--bcm-muted)}
.tn-bcm-gauge-value{display:block;min-width:0;font-size:13px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-bcm-gauge-value[data-empty=true]{color:var(--bcm-muted)}
.tn-bcm-gauge-card[data-role=sync]{border-color:var(--bcm-accent)}

.tn-bcm-metrics>div{display:grid;align-content:start;gap:5px;min-width:0;padding:10px;border:1px solid var(--bcm-soft);background:var(--bcm-wash)}
.tn-bcm-metrics dt{font-size:11px;font-weight:400;line-height:1.35;color:var(--bcm-muted)}
.tn-bcm-metrics dd{min-width:0;font-size:15px;line-height:1.35;letter-spacing:normal;overflow-wrap:anywhere}
.tn-bcm-metrics dd[data-empty=true]{color:var(--bcm-muted)}

/* ── 주기별 지표 / 동조율 곡선 ────────────────────────────── */
.tn-bcm-analysis{border-top:1px solid var(--bcm-line)}
.tn-bcm-analysis__metrics{display:grid;align-content:start;gap:10px;padding:18px;border-right:1px solid var(--bcm-line)}
.tn-bcm-chart{display:grid;align-content:start;gap:8px;padding:18px}
.tn-bcm-chart-frame{display:block;width:100%;height:150px;border:1px solid var(--bcm-soft);background:var(--bcm-surface)}
.tn-bcm-mid{stroke:var(--bcm-soft);stroke-width:1;stroke-dasharray:3 3}
.tn-bcm-today{stroke:var(--bcm-ink);stroke-width:1;stroke-dasharray:3 3}
.tn-bcm-curve{fill:none;stroke:var(--bcm-accent);stroke-width:2}
.tn-bcm-dot{fill:var(--bcm-accent);stroke:var(--bcm-surface);stroke-width:1.5}
.tn-bcm-dot--best{fill:var(--bcm-z5)}
.tn-bcm-dot--worst{fill:var(--bcm-z1)}
.tn-bcm-chart-dates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.tn-bcm-chart-dates>span{font-size:10px;font-weight:400;line-height:1.3;text-align:center;color:var(--bcm-muted);overflow-wrap:anywhere}
.tn-bcm-chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px}
.tn-bcm-chart-legend>span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:400;line-height:1.3;color:var(--bcm-muted)}
.tn-bcm-chart-legend i{display:block;width:12px;height:12px;border:1px solid var(--bcm-soft)}
.tn-bcm-chart-legend i[data-key=curve]{background:var(--bcm-accent)}
.tn-bcm-chart-legend i[data-key=best]{background:var(--bcm-z5)}
.tn-bcm-chart-legend i[data-key=worst]{background:var(--bcm-z1)}

.tn-bcm-note{padding:10px 18px 14px;border-top:1px solid var(--bcm-line)}
.tn-bcm-note .tn-bcm-caption{border:0;background:none;padding:0;font-size:11px}

/* ── 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-bcm-page{--bcm-paper:#241d12;--bcm-ink:#efe6d2;--bcm-muted:#c3b492;--bcm-line:#6f6047;--bcm-soft:#574a37;--bcm-surface:#322a1a;--bcm-wash:#2c2517;--bcm-accent:#e8823f;--bcm-good:#66a77f;--bcm-primary:#4a3116;--bcm-primary-text:#f7ead1;--bcm-secondary:#2f2115;--bcm-z1:#a85c33;--bcm-z2:#a9803f;--bcm-z3:#6b5c42;--bcm-z4:#6d8b60;--bcm-z5:#4d7a5e;--bcm-me:#e8823f;--bcm-you:#c3b492}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bcm-tool :is(button,input,select){color:var(--bcm-ink)!important;-webkit-text-fill-color:var(--bcm-ink)!important}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bcm-tool .tn-bcm-chip[aria-pressed=true],body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bcm-tool .tn-bcm-btn--primary{border-color:var(--bcm-accent)}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bcm-tool .tn-bcm-gauge-mark{background:var(--bcm-paper);border-color:var(--bcm-ink)}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-bcm-tool .tn-bcm-control input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}

@media(prefers-color-scheme:dark){
body[data-scheme=auto]:not([data-l=light]) .tn-bcm-page{--bcm-paper:#241d12;--bcm-ink:#efe6d2;--bcm-muted:#c3b492;--bcm-line:#6f6047;--bcm-soft:#574a37;--bcm-surface:#322a1a;--bcm-wash:#2c2517;--bcm-accent:#e8823f;--bcm-good:#66a77f;--bcm-primary:#4a3116;--bcm-primary-text:#f7ead1;--bcm-secondary:#2f2115;--bcm-z1:#a85c33;--bcm-z2:#a9803f;--bcm-z3:#6b5c42;--bcm-z4:#6d8b60;--bcm-z5:#4d7a5e;--bcm-me:#e8823f;--bcm-you:#c3b492}
body[data-scheme=auto]:not([data-l=light]) .tn-bcm-tool :is(button,input,select){color:var(--bcm-ink)!important;-webkit-text-fill-color:var(--bcm-ink)!important}
body[data-scheme=auto]:not([data-l=light]) .tn-bcm-tool .tn-bcm-chip[aria-pressed=true],body[data-scheme=auto]:not([data-l=light]) .tn-bcm-tool .tn-bcm-btn--primary{border-color:var(--bcm-accent)}
body[data-scheme=auto]:not([data-l=light]) .tn-bcm-tool .tn-bcm-gauge-mark{background:var(--bcm-paper);border-color:var(--bcm-ink)}
body[data-scheme=auto]:not([data-l=light]) .tn-bcm-tool .tn-bcm-control input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}
}

@media(prefers-reduced-motion:reduce){.tn-bcm-gauge-sync,.tn-bcm-gauge-mark{transition:none}}

/* ── mobile ────────────────────────────────────────────────── */
@media(max-width:720px){
.tn-bcm-page{margin-inline:5px}
.tn-bcm-stage,.tn-bcm-analysis{grid-template-columns:minmax(0,1fr)}
.tn-bcm-controls{padding:13px;border-right:0;border-bottom:1px solid var(--bcm-line)}
.tn-bcm-result,.tn-bcm-analysis__metrics,.tn-bcm-chart{padding:13px}
.tn-bcm-analysis__metrics{border-right:0;border-bottom:1px solid var(--bcm-line)}
.tn-bcm-note{padding:10px 13px 13px}
.tn-bcm-chips,.tn-bcm-fields,.tn-bcm-actions,.tn-bcm-metrics,.tn-bcm-gauge-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-bcm-main>strong{font-size:34px}
.tn-bcm-chart-frame{height:132px}
}