/* Roberin The New — 중도상환수수료 계산기 20260908d
 * 레이아웃 계약: 작업면 전체가 단일 12-트랙 축이다. 모든 자식은 grid-column: span N 으로만 배치하고
 * 내부에 별도 grid 를 만들지 않는다. 큰 결과와 보조 지표는 같은 행에 둔다.
 * 근거: 사용자 우려 원장 #54(컴팩트 잠금) + #42 / 추가 필수 확인 #22(인접 행 세로축 일치).
 */
body.tn-pri-page-body .cs-custom-content-post-before{display:none!important}
body.tn-pri-page-body .tn-pri-page{
  --pri-ink:#1a1208;
  --pri-muted:#5a4a30;
  --pri-line:#b8a888;
  --pri-soft:#ddd4be;
  --pri-paper:#faf6ee;
  --pri-surface:#fffdf7;
  --pri-wash:#f5efdf;
  --pri-accent:#c44a00;
  --pri-primary:#1a1208;
  --pri-primary-hover:#c44a00;
  --pri-primary-text:#faf6ee;
  --pri-secondary:#ede6d4;
  --pri-secondary-hover:#dfd4bb;
  --pri-action-line:#b8a888;
  --pri-danger:#7c2115;
  --pri-good:#2f7d54;
  --pri-scheme:light;
  --pri-num-font:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",system-ui,sans-serif;
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto 56px!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:currentColor!important;
  font-family:ui-serif,Georgia,"Times New Roman","Noto Serif KR",serif!important;
  font-size:15px!important;
  line-height:1.58!important;
}

/* --- kill list: 전역 CSS 침범 선제 차단 --- */
body.tn-pri-page-body .tn-pri-page :is(.tn-pri-tool,.tn-pri-tool *,.tn-pri-tool *::before,.tn-pri-tool *::after){box-sizing:border-box!important;min-width:0!important}
/* 추가 필수 확인 #3 / 우려 #37: element reset 이 컴포넌트 padding 을 삼키지 않게 dl 은 margin 만 지운다.
   .tn-pri-metric 이 <dl> 이라 `:is(dl){padding:0}`(0,2,2)가 `.tn-pri-metric`(0,2,1)을 이겨 안쪽 여백이 사라졌었다. */
body.tn-pri-page-body .tn-pri-tool :is(ul,ol,li,dd,dt){margin:0!important;padding:0!important;list-style:none!important}
body.tn-pri-page-body .tn-pri-tool dl{margin:0!important;list-style:none!important}
/* p 에는 padding:0 을 주지 않는다 — notice/formula/disclaimer 가 padding 을 가진 p 컴포넌트다 (추가 필수 확인 #3) */
body.tn-pri-page-body .tn-pri-tool p{margin:0!important}
body.tn-pri-page-body .tn-pri-tool :is(code,pre,kbd,samp){padding:0!important;border:0!important;border-radius:0!important;background:none!important;background-color:transparent!important;color:inherit!important;-webkit-text-fill-color:inherit!important}
body.tn-pri-page-body .tn-pri-page script{display:none!important}

/* --- 단일 12-트랙 작업면 --- */
body.tn-pri-page-body .tn-pri-tool{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:12px 10px!important;
  width:100%!important;
  max-width:960px!important;
  margin:0 auto 18px!important;
  padding:16px!important;
  border:1px solid var(--pri-line)!important;
  border-top:3px double var(--pri-line)!important;
  border-bottom:3px double var(--pri-line)!important;
  border-radius:0!important;
  background:var(--pri-paper)!important;
  box-shadow:4px 4px 0 rgba(26,18,8,.10)!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:var(--pri-ink)!important;
  font-family:var(--pri-num-font)!important;
}
body.tn-pri-page-body .tn-pri-tool>*{margin:0!important}

/* 데스크톱 트랙 배분 — DOM 순서(금액·요율·실행일·만기일·상환일)대로 각 행이 정확히 12를 채운다 */
body.tn-pri-page-body .tn-pri-field--amount{grid-column:span 4!important}
body.tn-pri-page-body .tn-pri-field--rate,
body.tn-pri-page-body .tn-pri-field--start,
body.tn-pri-page-body .tn-pri-field--maturity,
body.tn-pri-page-body .tn-pri-field--pay{grid-column:span 2!important}
body.tn-pri-page-body .tn-pri-notice,
body.tn-pri-page-body .tn-pri-formula,
body.tn-pri-page-body .tn-pri-chart-block,
body.tn-pri-page-body .tn-pri-disclaimer{grid-column:span 12!important}
body.tn-pri-page-body .tn-pri-headline{grid-column:span 6!important}
body.tn-pri-page-body .tn-pri-tool .tn-pri-metric{grid-column:span 2!important}
body.tn-pri-page-body .tn-pri-actions{
  grid-column:span 12!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

/* --- 입력 field --- */
body.tn-pri-page-body .tn-pri-field{
  display:grid!important;
  grid-template-rows:auto 36px!important;
  align-content:start!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
body.tn-pri-page-body .tn-pri-label{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:15px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.tn-pri-page-body .tn-pri-page .tn-pri-tool .tn-pri-control{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--pri-line)!important;
  border-radius:0!important;
  background:var(--pri-surface)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  color-scheme:var(--pri-scheme)!important;
}
body.tn-pri-page-body .tn-pri-control input{
  flex:1 1 auto!important;
  width:1px!important;
  height:34px!important;
  margin:0!important;
  /* 추가 필수 확인 #48: 값 글리프→단위 글리프 8~20px, 단위 글리프→오른쪽 테두리 ≥8px */
  padding:0 8px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:var(--pri-ink)!important;
  font-family:var(--pri-num-font)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:34px!important;
  letter-spacing:0!important;
  text-align:right!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  color-scheme:var(--pri-scheme)!important;
}
body.tn-pri-page-body .tn-pri-control input[type="date"]{
  padding:0 10px!important;
  text-align:left!important;
  font-size:14px!important;
}
body.tn-pri-page-body .tn-pri-control input[type="date"]::-webkit-calendar-picker-indicator{
  margin:0!important;
  padding:0!important;
  opacity:.55!important;
  cursor:pointer!important;
}
body.tn-pri-page-body .tn-pri-control input::placeholder{color:var(--pri-muted)!important;-webkit-text-fill-color:var(--pri-muted)!important;font-weight:400!important;opacity:.35!important}
body.tn-pri-page-body .tn-pri-control input::-webkit-input-placeholder{color:var(--pri-muted)!important;-webkit-text-fill-color:var(--pri-muted)!important;font-weight:400!important;opacity:.35!important}
/* 단위 suffix chip — 자체 border 를 명시한다 (kill list #7) */
body.tn-pri-page-body .tn-pri-control b{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0 10px 0 8px!important;
  border:0!important;
  border-left:1px solid var(--pri-soft)!important;
  background:none!important;
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:34px!important;
  pointer-events:none!important;
}
body.tn-pri-page-body .tn-pri-control:has(input:focus-visible){outline:2px solid var(--pri-accent)!important;outline-offset:-1px!important}
body.tn-pri-page-body .tn-pri-control:has(input[aria-invalid="true"]){border-color:var(--pri-danger)!important}
body.tn-pri-page-body .tn-pri-control input[aria-invalid="true"]{color:var(--pri-danger)!important;-webkit-text-fill-color:var(--pri-danger)!important}

/* --- 판정 notice --- */
body.tn-pri-page-body .tn-pri-notice{
  min-height:32px!important;
  padding:7px 12px!important;
  border:1px solid var(--pri-soft)!important;
  background:var(--pri-surface)!important;
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:18px!important;
  text-align:center!important;
}
body.tn-pri-page-body .tn-pri-notice.is-free{border-color:var(--pri-good)!important;color:var(--pri-good)!important;-webkit-text-fill-color:var(--pri-good)!important;font-weight:800!important}
body.tn-pri-page-body .tn-pri-notice.is-error{border-color:var(--pri-danger)!important;color:var(--pri-danger)!important;-webkit-text-fill-color:var(--pri-danger)!important;font-weight:800!important}

/* --- 큰 결과 + 지표는 같은 행 (원장 #54) --- */
body.tn-pri-page-body .tn-pri-headline{
  display:grid!important;
  align-content:center!important;
  gap:5px!important;
  padding:10px 12px!important;
  border:1px solid var(--pri-line)!important;
  background:var(--pri-surface)!important;
}
body.tn-pri-page-body .tn-pri-headline-label{
  color:var(--pri-accent)!important;
  -webkit-text-fill-color:var(--pri-accent)!important;
  font-family:var(--pri-num-font)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:14px!important;
  letter-spacing:.08em!important;
}
body.tn-pri-page-body .tn-pri-headline-value{
  max-width:100%!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:var(--pri-ink)!important;
  font-family:var(--pri-num-font)!important;
  font-size:clamp(22px,2.6vw,31px)!important;
  font-weight:800!important;
  line-height:1.1!important;
  letter-spacing:normal!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.tn-pri-page-body .tn-pri-headline-caption{
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:15px!important;
}
body.tn-pri-page-body .tn-pri-tool .tn-pri-metric{
  display:grid!important;
  align-content:center!important;
  justify-items:center!important;
  gap:6px!important;
  padding:10px 8px!important;
  border:1px solid var(--pri-soft)!important;
  background:var(--pri-wash)!important;
  text-align:center!important;
}
body.tn-pri-page-body .tn-pri-tool .tn-pri-metric dt{
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:14px!important;
  white-space:nowrap!important;
}
body.tn-pri-page-body .tn-pri-tool .tn-pri-metric dd,
body.tn-pri-page-body .tn-pri-tool .tn-pri-metric-value{
  max-width:100%!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:var(--pri-ink)!important;
  font-family:var(--pri-num-font)!important;
  font-size:clamp(13px,1.25vw,16px)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:normal!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* --- 계산식 한 줄 --- */
body.tn-pri-page-body .tn-pri-formula{
  padding:7px 12px!important;
  border:1px solid var(--pri-soft)!important;
  background:var(--pri-wash)!important;
  color:var(--pri-ink)!important;
  -webkit-text-fill-color:var(--pri-ink)!important;
  font-family:var(--pri-num-font)!important;
  font-size:12px!important;
  /* 숫자 결과 표면이므로 사이트 전역 숫자 표준의 result 굵기 800 을 따른다 (추가 필수 확인 #20) */
  font-weight:800!important;
  line-height:18px!important;
  letter-spacing:normal!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
}

/* --- 시간축 감소 그래프 --- */
body.tn-pri-page-body .tn-pri-chart-block{
  height:108px!important;
  padding:0!important;
  border:1px solid var(--pri-soft)!important;
  background:var(--pri-surface)!important;
  overflow:hidden!important;
}
body.tn-pri-page-body .tn-pri-chart-block svg{display:block!important;width:100%!important;height:100%!important}
body.tn-pri-page-body .tn-pri-chart-block svg text{font-family:var(--pri-num-font)!important;font-variant-numeric:lining-nums tabular-nums!important}

/* --- actions --- */
body.tn-pri-page-body .tn-pri-tool button{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid var(--pri-primary)!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  font-family:var(--pri-num-font)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  appearance:none!important;
  cursor:pointer!important;
}
body.tn-pri-page-body .tn-pri-primary{background:var(--pri-primary)!important;color:var(--pri-primary-text)!important;-webkit-text-fill-color:var(--pri-primary-text)!important}
body.tn-pri-page-body .tn-pri-primary:is(:hover,:focus-visible):not(:disabled){background:var(--pri-primary-hover)!important;border-color:var(--pri-primary-hover)!important}
body.tn-pri-page-body .tn-pri-tool .tn-pri-secondary{background:var(--pri-secondary)!important;border-color:var(--pri-action-line)!important;color:var(--pri-ink)!important;-webkit-text-fill-color:var(--pri-ink)!important}
body.tn-pri-page-body .tn-pri-secondary:is(:hover,:focus-visible):not(:disabled){background:var(--pri-secondary-hover)!important}
body.tn-pri-page-body .tn-pri-tool button:disabled{cursor:not-allowed!important;opacity:.55!important}
body.tn-pri-page-body .tn-pri-tool button:focus-visible{outline:2px solid var(--pri-accent)!important;outline-offset:2px!important}

body.tn-pri-page-body .tn-pri-disclaimer{
  padding:8px 12px!important;
  border:1px solid var(--pri-soft)!important;
  background:var(--pri-wash)!important;
  color:var(--pri-muted)!important;
  -webkit-text-fill-color:var(--pri-muted)!important;
  font-family:var(--pri-num-font)!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.5!important;
}

/* --- dark / inverse / auto-dark --- */
body.tn-pri-page-body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-pri-page,
html[data-scheme="dark"] body.tn-pri-page-body:not([data-scheme="light"]) .tn-pri-page{
  --pri-ink:#f7ead1;
  --pri-muted:#c3b492;
  --pri-line:#6f6047;
  --pri-soft:#574a37;
  --pri-paper:#241d12;
  --pri-surface:#322a1a;
  --pri-wash:#2c2517;
  --pri-accent:#e8823f;
  --pri-primary:#6a3b1f;
  --pri-primary-hover:#824826;
  --pri-primary-text:#f7ead1;
  --pri-secondary:#2f2115;
  --pri-secondary-hover:#3a2a1b;
  --pri-action-line:#826744;
  --pri-danger:#ffb0a2;
  --pri-good:#57b083;
  --pri-scheme:dark;
}
@media (prefers-color-scheme:dark){
  body.tn-pri-page-body[data-scheme="auto"] .tn-pri-page{
    --pri-ink:#f7ead1;
    --pri-muted:#c3b492;
    --pri-line:#6f6047;
    --pri-soft:#574a37;
    --pri-paper:#241d12;
    --pri-surface:#322a1a;
    --pri-wash:#2c2517;
    --pri-accent:#e8823f;
    --pri-primary:#6a3b1f;
    --pri-primary-hover:#824826;
    --pri-primary-text:#f7ead1;
    --pri-secondary:#2f2115;
    --pri-secondary-hover:#3a2a1b;
    --pri-action-line:#826744;
    --pri-danger:#ffb0a2;
    --pri-good:#57b083;
    --pri-scheme:dark;
  }
}

/* --- responsive: 축은 12트랙 그대로 두고 span 만 바꾼다 (컬럼 경계 일치 유지) --- */
@media (max-width:1000px){
  /* 행1 금액(6)+요율(6) · 행2 실행일(4)+만기일(4)+상환일(4) — 빈 트랙 0 */
  body.tn-pri-page-body .tn-pri-field--amount,
  body.tn-pri-page-body .tn-pri-field--rate{grid-column:span 6!important}
  body.tn-pri-page-body .tn-pri-field--start,
  body.tn-pri-page-body .tn-pri-field--maturity,
  body.tn-pri-page-body .tn-pri-field--pay{grid-column:span 4!important}
  body.tn-pri-page-body .tn-pri-headline{grid-column:span 12!important}
  body.tn-pri-page-body .tn-pri-tool .tn-pri-metric{grid-column:span 4!important}
}
@media (max-width:720px){
  body.tn-pri-page-body .tn-pri-page{width:calc(100% - 10px)!important;max-width:calc(100% - 10px)!important;margin:0 auto 40px!important;font-size:14px!important}
  body.tn-pri-page-body .tn-pri-tool{gap:10px 9px!important;padding:12px!important}
  body.tn-pri-page-body .tn-pri-field--amount{grid-column:span 12!important}
  body.tn-pri-page-body .tn-pri-field--start,
  body.tn-pri-page-body .tn-pri-field--maturity,
  body.tn-pri-page-body .tn-pri-field--pay,
  body.tn-pri-page-body .tn-pri-field--rate{grid-column:span 6!important}
  body.tn-pri-page-body .tn-pri-tool .tn-pri-metric{grid-column:span 6!important}
  body.tn-pri-page-body .tn-pri-tool .tn-pri-metric--wide{grid-column:span 12!important}
  body.tn-pri-page-body .tn-pri-chart-block{height:112px!important}
}
@media (max-width:390px){
  /* 원장 #52: 값을 고칠 때 같은 속성을 재선언하는 미디어쿼리를 함께 고친다.
     control 안쪽 여백은 데스크톱과 같은 8px/10px 기준을 유지한다. */
  body.tn-pri-page-body .tn-pri-control input{padding:0 8px 0 10px!important;font-size:14px!important}
  body.tn-pri-page-body .tn-pri-control input[type="date"]{padding:0 8px!important;font-size:13px!important}
  body.tn-pri-page-body .tn-pri-control b{padding:0 10px 0 8px!important;font-size:11px!important}
  body.tn-pri-page-body .tn-pri-headline-value{font-size:26px!important}
  body.tn-pri-page-body .tn-pri-tool .tn-pri-metric{padding:9px 6px!important}
  body.tn-pri-page-body .tn-pri-tool .tn-pri-metric dt{font-size:10.5px!important}
}
@media (max-width:360px){
  body.tn-pri-page-body .tn-pri-tool{padding:10px!important;gap:9px 8px!important}
  body.tn-pri-page-body .tn-pri-label{font-size:11px!important}
  body.tn-pri-page-body .tn-pri-control input[type="date"]{padding:0 6px!important;font-size:12px!important}
  body.tn-pri-page-body .tn-pri-tool button{font-size:12px!important}
}