:root {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#172d2b;
    background:#f6f8f8;
    font-synthesis:none;
    --accent:#08665f;
    --line:#dce5e3;
    --muted:#526663}
* {
    box-sizing:border-box}
body {
    margin:0;
    font-size:16px;
    line-height:1.7}
a {
    color:var(--accent);
    text-underline-offset:4px}
button,input,select,textarea {
    font:inherit}
button,select {
    cursor:pointer}
button,a,input,select,textarea {
    touch-action:manipulation}
:focus-visible {
    outline:3px solid #16897f;
    outline-offset:4px}
button,input,select,textarea {
    min-height:46px;
    border-radius:9px;
    border:1px solid #a3b6b2}
input,select,textarea {
    background:white;
    color:#172d2b;
    padding:10px 12px;
    max-width:100%}
input,textarea {
    width:100%}
textarea {
    resize:vertical}
button {
    padding:10px 18px;
    background:white;
    color:var(--accent);
    font-weight:650}
button.primary {
    background:var(--accent);
    color:white;
    border-color:var(--accent)}
button:disabled {
    cursor:not-allowed;
    opacity:.6}
.shell {
    width:min(1120px,calc(100% - 40px));
    margin:auto}
.header {
    background:#fff;
    border-bottom:1px solid var(--line)}
.header-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    min-height:86px}
.brand {
    display:inline-flex;
    gap:10px;
    align-items:center;
    font-size:22px;
    font-weight:800;
    text-decoration:none;
    letter-spacing:-.8px;
    color:#193b37}
.brand-mark {
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    background:var(--accent);
    color:white;
    border-radius:9px;
    font-size:25px}
.header-actions {
    display:flex;
    gap:28px;
    align-items:center;
    font-size:14px}
.header-actions>a {
    text-decoration:none;
    color:#344c47}
.language {
    display:flex;
    gap:8px;
    align-items:center}
.language select {
    font-size:14px;
    min-height:40px;
    padding:5px 10px}
main {
    min-height:55vh;
    padding-top:38px;
    padding-bottom:72px}
h1,h2,h3 {
    line-height:1.35;
    letter-spacing:-.035em}
h1 {
    font-size:clamp(28px,4vw,38px);
    margin:0 0 14px}
h2 {
    font-size:24px;
    margin:0 0 16px}
h3 {
    font-size:19px}
.intro {
    max-width:720px;
    margin-bottom:30px}
.intro p {
    color:var(--muted);
    margin:0}
.eyebrow {
    font-size:14px;
    color:var(--accent);
    font-weight:750;
    margin:0 0 10px}
.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px}
.search-row {
    display:flex;
    gap:10px}
.search-row input {
    flex:1;
    min-width:0}
.filters {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px}
.filters button {
    border-radius:24px;
    font-size:14px;
    min-height:42px}
.filters [aria-pressed=true] {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff}
.list-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:26px 0 16px}
.list-bar p {
    margin:0}
.list-bar select {
    font-size:14px}
.tool-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px}
.tool-card {
    display:block;
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px;
    text-decoration:none;
    color:inherit;
    transition:border-color .15s}
.tool-card:hover {
    border-color:var(--accent)}
.tool-card h2 {
    font-size:22px;
    margin:12px 0 8px}
.tool-card p {
    color:var(--muted);
    margin:0 0 24px}
.tag {
    font-size:13px;
    background:#e9f4f1;
    padding:4px 9px;
    border-radius:5px;
    color:#205c53}
.card-action {
    color:var(--accent);
    font-weight:700;
    font-size:15px}
.help-strip {
    border-top:1px solid var(--line);
    margin-top:42px;
    padding-top:24px;
    display:flex;
    justify-content:space-between;
    gap:20px}
.help-strip p {
    margin:0;
    color:var(--muted)}
.home-value,.category-guide,.featured-tools{margin-top:48px}
.home-value{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:30px;background:#edf6f3;border:1px solid #c4ded5;border-radius:16px}
.home-value-copy p,.category-guide>p,.featured-tools>p{color:var(--muted)}
.home-steps{display:grid;gap:12px}
.home-steps article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.home-steps p{margin:5px 0 0;color:var(--muted)}
.category-guide-grid,.featured-tool-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.category-guide-grid a,.featured-tool-links a{display:flex;flex-direction:column;gap:5px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit}
.category-guide-grid span,.featured-tool-links span{color:var(--muted);font-size:14px}
.worked-example li+li{margin-top:8px}
.breadcrumb {
    font-size:14px;
    margin:0 0 25px}
.breadcrumb ol {
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    gap:9px;
    padding:0;
    margin:0}
.breadcrumb li+li:before {
    content:'/';
    color:#8b9b98;
    margin-right:9px}
.breadcrumb a {
    color:var(--muted)}
.calculator {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:24px;
    align-items:start}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:24px}
.panel-heading h2 {
    font-size:20px;
    margin:0}
.unit-label {
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px}
.unit-label select {
    font-size:14px;
    min-height:40px}
.field {
    margin:0 0 20px}
.field label {
    display:block;
    font-size:15px;
    font-weight:650;
    margin-bottom:7px}
.input-unit {
    display:flex;
    align-items:center;
    gap:12px}
.input-unit input {
    min-width:0;
    font-size:20px;
    font-variant-numeric:tabular-nums}
.input-unit span {
    min-width:35px;
    color:var(--muted)}
.hint {
    font-size:14px;
    color:var(--muted);
    margin:8px 0 0}
.error {
    font-size:14px;
    color:#a32629;
    margin:5px 0 0}
.error:empty {
    display:none}
[aria-invalid=true] {
    border-color:#a32629}
.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap}
.actions .primary {
    flex:1}
/* 입력 컨트롤 바로 다음의 버튼 묶음은 위쪽에도 간격을 둡니다. */
.calculator input + .actions,
.calculator select + .actions,
.calculator textarea + .actions {
    margin-block-start:12px}
.result-panel {
    background:#edf6f3;
    border-color:#c4ded5}
.result-label {
    font-size:14px;
    font-weight:700;
    color:#326759}
.result-value {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:10px;
    margin:20px 0}
.result-value strong {
    font-size:clamp(40px,6vw,58px);
    line-height:1.2;
    letter-spacing:-.055em;
    overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums}
.result-value span {
    font-size:21px}
.result-dimensions {
    border-top:1px solid #c4ded5;
    padding-top:16px;
    font-size:15px}
.notice {
    background:#f0f4f3;
    border-left:3px solid #558b7d;
    padding:16px 20px;
    border-radius:0 8px 8px 0;
    font-size:14px}
.result-panel .notice {
    background:#e1eee8}
.content {
    max-width:800px;
    margin:48px auto 0}
.content h2 {
    margin-top:38px}
.content h3 {
    margin-top:25px}
.content p,.content li {
    color:#344d47}
.content a {
    overflow-wrap:anywhere}
.formula {
    background:white;
    border:1px solid var(--line);
    padding:20px;
    border-radius:10px;
    font-variant-numeric:tabular-nums}
.content details {
    border-bottom:1px solid var(--line);
    padding:15px 0}
.content summary {
    cursor:pointer;
    font-weight:650;
    padding:4px 0}
.prose {
    max-width:800px;
    margin:0 auto}
.prose h1 {
    margin-bottom:24px}
.prose h2 {
    margin-top:36px}
.prose p,.prose li {
    color:#344d47}
.prose a {
    overflow-wrap:anywhere}
.contact-form {
    max-width:800px;
    margin:30px auto}
.empty {
    text-align:center;
    padding:35px}
.empty h2 {
    font-size:22px}
footer {
    border-top:1px solid var(--line);
    background:white;
    padding:35px 0}
footer .brand {
    font-size:19px}
.policy-languages {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-bottom:24px}
.policy-languages a {
    display:inline-block;
    padding:8px 0;
    overflow-wrap:anywhere}
.policy-languages [aria-current=page] {
    font-weight:700}
.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    margin:18px 0}
footer p {
    font-size:13px;
    color:var(--muted);
    max-width:900px;
    margin:8px 0}
.copyright {
    margin-top:20px}
.skip {
    position:absolute;
    left:16px;
    top:-100px;
    background:white;
    padding:12px;
    z-index:10}
.skip:focus {
    top:8px}
[hidden] {
    display:none!important}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0}
@media(max-width:700px) {
    .shell {
    width:calc(100% - 32px)}
.header-inner {
    min-height:74px}
.header-actions {
    gap:10px}
.header-actions>a {
    display:none}
.language {
    font-size:0;
    gap:0}
.brand {
    font-size:20px}
.tool-grid,.calculator,.home-value,.category-guide-grid,.featured-tool-links {
    grid-template-columns:1fr}
.panel {
    padding:20px}
.help-strip {
    display:block}
.help-strip a {
    display:inline-block;
    margin-top:12px}
main {
    padding-top:26px;
    padding-bottom:44px}
.list-bar {
    align-items:center;
    flex-wrap:wrap}
.list-bar .unit-label {
    max-width:100%;
    min-width:0}
.list-bar .unit-label select {
    min-width:0;
    max-width:100%;
    flex:1}
.content {
    margin-top:32px}
.search-row button {
    padding:10px 12px}
}
@media(prefers-reduced-motion:reduce) {
    * {
    transition:none!important}
}

@media(max-width:420px) {
    .panel-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:12px}
.panel-heading h2 {
    white-space:nowrap}
.unit-label {
    white-space:nowrap}
.unit-label select {
    min-width:80px}
}



/* 공통 계산 결과와 조건 저장 */
.result-list{margin:20px 0}.result-list dt{color:var(--muted,#526663);font-size:.9rem;margin-top:18px}.result-list dd{margin:4px 0 0;font-size:1.45rem;font-weight:700;overflow-wrap:anywhere}.result-list dd:first-of-type{font-size:2rem;color:#08665f}.save-calculation{border-top:1px solid #dce7e5;margin-top:24px;padding-top:20px}.save-calculation input{width:100%;min-width:0;margin:8px 0}.save-calculation button{max-width:100%}button:disabled{opacity:.5;cursor:not-allowed}#saved-link-area{margin-top:16px}#standard-form select,#standard-form input{max-width:100%;width:100%;min-width:0}#standard-form .field{margin-top:18px}.formula{overflow-wrap:anywhere}#standard-result details{margin-top:20px}#standard-result{overflow-wrap:anywhere}

/* 공용 핵심 계산기: 동적 행도 작은 화면에서 같은 폭을 유지합니다. */
#core-form textarea{display:block;width:100%;min-height:8rem;resize:vertical;font:inherit;padding:.75rem;border:1px solid var(--line,#cbd5d1);border-radius:.5rem;box-sizing:border-box}
.core-row{min-width:0;margin:1rem 0;padding:1rem;border:1px solid var(--line,#cbd5d1);border-radius:.75rem}
.core-row legend{font-weight:700;padding:0 .4rem}
#core-form [hidden]{display:none!important}
#core-calculator .result-list dd{overflow-wrap:anywhere}
/* 긴 번역 옵션이 계산기 그리드의 최소 폭을 늘리지 않도록 합니다. */
#core-calculator > .panel{min-width:0}
#core-form input,#core-form select,#core-form textarea{width:100%;max-width:100%;min-width:0}
/* 독일어처럼 긴 합성어도 좁은 화면의 제목 안에서 줄바꿈합니다. */
main h1,main h2{overflow-wrap:anywhere;hyphens:auto}
/* Six additional calculators reuse panels, fields and result lists. */
#us6-calculator { align-items:start; }
#us6-calculator .core-row { min-width:0; }
#us6-calculator details { margin-block:1rem; }
.us6-table-wrap { overflow-x:auto; max-width:100%; }
.us6-table { width:100%; border-collapse:collapse; }
.us6-table th,.us6-table td { padding:.5rem; border-bottom:1px solid #dce2e8; text-align:start; }
#us6-calculator .result-list dd { overflow-wrap:anywhere; }
#us6-calculator [hidden] { display:none !important; }
/* Chinese culture tools: long translated labels and calendar tables. */
#cn6-calculator { align-items:start; }
#cn6-calculator > .panel,#cn6-form fieldset { min-width:0; }
#cn6-form fieldset { margin:0; padding:1rem; border:1px solid var(--line,#cbd5d1); border-radius:.75rem; }
#cn6-form input,#cn6-form select { width:100%; max-width:100%; min-width:0; }
#cn6-calculator [hidden] { display:none !important; }
#cn6-calculator .result-label { margin:1rem 0 .25rem; color:var(--muted,#526663); font-size:.9rem; }
#cn6-calculator .result-value { display:block; margin:0 0 1rem; font-size:1.35rem; font-weight:700; overflow-wrap:anywhere; }
#cn6-calculator .table-scroll { overflow-x:auto; max-width:100%; }
#cn6-calculator table { width:100%; border-collapse:collapse; font-size:.95rem; }
#cn6-calculator th,#cn6-calculator td { padding:.55rem; border-bottom:1px solid #dce2e8; text-align:start; }
#cn6-calculator caption { margin:1rem 0 .5rem; text-align:start; font-weight:700; }

/* 결과를 확인한 뒤 바로 이어서 사용할 수 있는 관련 계산기 */
.related-calculators {
    border-top:1px solid #c4ded5;
    margin-top:24px;
    padding-top:20px;
    overflow-wrap:anywhere;
}
.related-calculators h2 {font-size:18px;margin:0 0 12px}
.related-calculators ul {list-style:none;margin:0;padding:0}
.related-calculators li + li {margin-top:8px}
.related-calculators a {display:inline-block;padding:6px 0}

/* GLOBAL6 reuses the calculator/result layout; time selectors stay usable on phones. */
.global6-time {display:flex;gap:8px;align-items:center}
.global6-time input {flex:1;min-width:0}
.global6-time select {width:90px;flex-shrink:0}
#global6-calculator .field[hidden],#global6-calculator [hidden] {display:none!important}
#global6-calculator .result-list dd {overflow-wrap:anywhere}
#global6-calculator .panel,#global6-calculator fieldset {min-width:0}
#global6-calculator select,#global6-calculator input {min-width:0;max-width:100%}
#global6-calculator .field label,#global6-calculator button {overflow-wrap:anywhere}
#global6-calculator .notice,#global6-calculator ~ .content {overflow-wrap:anywhere}

/* GLOBAL9: contain long tables/formulas without changing existing calculator layouts. */
#global9-calculator .panel, #global9-calculator fieldset { min-width:0; }
#global9-calculator input, #global9-calculator select, #global9-calculator textarea { min-width:0; max-width:100%; }
#global9-calculator .field[hidden], #global9-calculator [hidden] { display:none !important; }
#global9-calculator label, #global9-calculator button, #global9-calculator .notice, #global9-calculator ~ .content { overflow-wrap:anywhere; }
#global9-calculator textarea { width:100%; font:inherit; border:1px solid var(--border,#ccc); border-radius:8px; padding:12px; }
#global9-calculator .global9-table { overflow:auto; max-width:100%; margin:12px 0; }
#global9-calculator table { border-collapse:collapse; width:100%; font-size:.9rem; }
#global9-calculator th, #global9-calculator td { border-bottom:1px solid var(--border,#ddd); padding:10px; text-align:start; white-space:nowrap; }
#global9-calculator caption { text-align:start; font-weight:700; margin-bottom:8px; }
#global9-calculator details { margin:16px 0; }
#global9-calculator summary { cursor:pointer; font-weight:600; }
#global9-calculator .global9-members [data-member] { display:flex; gap:8px; align-items:center; margin:8px 0; }
#global9-calculator .global9-members label { flex:1; display:flex; gap:6px; align-items:center; }
#global9-calculator [data-member-value] { width:45%; }
#global9-calculator [data-participant] { width:auto; }
#global9-calculator .global9-layout { display:block; width:100%; max-height:420px; fill:#25755a; border:1px solid #ddd; }
/* FUN6: bounded tables and scientific values, using the existing responsive layout. */
#fun6-calculator .panel { min-width: 0; }
#fun6-calculator .fun6-value { display: block; overflow-wrap: anywhere; font-size: 1.15rem; }
#fun6-calculator .result-item { margin-bottom: 1.1rem; }
#fun6-calculator .result-item:first-child .fun6-value { font-size: 1.6rem; }
#fun6-calculator details { margin: 1rem 0; }
.fun6-table { overflow-x: auto; max-width: 100%; }
.fun6-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fun6-table th, .fun6-table td { text-align: start; vertical-align: top; padding: .6rem; border-bottom: 1px solid var(--border, #dce5e3); overflow-wrap: anywhere; }
.fun6-table th { font-weight: 650; }
.fun6-table caption { text-align: start; padding: .6rem; }
.fun6-reference { margin: 1.5rem 0; }
.fun6-targets { flex-wrap: wrap; margin: 1rem 0; }
#fun6-calculator input[type="date"] { max-width: 100%; width: 100%; }
#fun6-calculator input[type="checkbox"] { width: auto; }
@media (max-width: 600px) {
 #fun6-calculator .actions { flex-wrap: wrap; }
 #fun6-calculator .actions button { min-width: 100px; }
 #fun6-calculator .fun6-table table { min-width: 380px; }
 .fun6-reference .fun6-table table { min-width: 280px; }
}

/* Native date picker and explicit local-today mode; wrap on narrow screens. */
.date-with-today{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.date-with-today>input[type=date]{flex:1 1 12rem;min-width:0}
.field .date-with-today .today-option{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;cursor:pointer;font-weight:500}
#standard-form .today-option input[type=checkbox],.today-option input[type=checkbox]{width:20px;height:20px;flex:none;margin:0}

/* Optional analytics choice: normal flow, equal-weight choices, no blocking overlay. */
.analytics-choice { margin: 1rem 0 1.5rem; padding: 1rem; border: 1px solid #b7cfca; border-radius: 12px; background: #f5faf9; overflow-wrap: anywhere; }
.analytics-choice[hidden] { display: none; }
.analytics-choice h2 { margin-top: 0; font-size: 1.2rem; }
.analytics-choice-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.analytics-choice-actions button { white-space: normal; max-width: 100%; }

/* Practical calculators retain the existing layout with neutral blue accents. */
#practical5-calculator { align-items:start; }
#practical5-calculator > .panel { min-width:0; }
#practical5-form input,#practical5-form select { width:100%; max-width:100%; min-width:0; }
#practical5-calculator [hidden] { display:none !important; }
#practical5-calculator label,#practical5-calculator button,#practical5-calculator .notice { overflow-wrap:anywhere; }
#practical5-calculator .result-list dd:first-of-type { color:#355385; }
#practical5-calculator .screen-comparison { display:block; width:100%; height:auto; margin-top:1rem; }
#practical5-calculator { --accent:#355385; --line:#dbe2ed; --muted:#586474; }
#practical5-calculator :focus-visible { outline-color:#4169a6; }
#practical5-calculator .result-panel { background:#f2f5fa; border-color:#dbe2ed; }
#practical5-calculator .notice { background:#e9eef7; border-color:#8099bd; }
#practical5-calculator .actions button { white-space:nowrap; }
@media (max-width:640px) {
    #practical5-form .actions { display:grid; grid-template-columns:1fr 1fr; }
    #practical5-form .actions .primary { grid-column:1 / -1; width:100%; }
}

/* Home studio introduction: compact on phones, with direct access to tools. */
.studio-intro { display:flex; align-items:center; gap:36px; padding:32px; margin-bottom:28px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,#e6f3ef,#fff); }
.studio-copy { flex:1; min-width:0; }
.studio-copy .eyebrow { margin:0 0 12px; }
.studio-copy h1 { font-size:clamp(24px,3vw,34px); line-height:1.45; margin:0; max-width:800px; overflow-wrap:anywhere; }
.studio-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex-shrink:0; }
.studio-actions a { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:650; }
.studio-details { background:var(--accent); color:#fff; padding:10px 18px; border-radius:9px; text-decoration:none; }
.calculator-intro { scroll-margin-top:20px; }
.calculator-intro h2 { font-size:clamp(24px,3vw,30px); margin-bottom:10px; }
@media (max-width:700px) {
    .studio-intro { display:block; padding:20px; margin-bottom:22px; border-radius:16px; }
    .studio-copy h1 { font-size:24px; }
    .studio-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:16px; }
    .studio-actions a { font-size:14px; }
}

@media (max-width:700px) {
    .header-inner { flex-wrap:wrap; padding-top:12px; padding-bottom:12px; gap:8px; }
    .header-actions { width:100%; flex-wrap:wrap; gap:6px 16px; }
    .header-actions>a { display:inline-flex; align-items:center; min-height:40px; }
    .header-actions .language { margin-left:auto; }
}
@media (max-width:700px) {
    .header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
    .header-actions { display:contents; }
    .header-inner .brand { grid-column:1; grid-row:1; font-size:18px; gap:6px; }
    .header-actions .language { grid-column:2; grid-row:1; margin-left:0; }
    .header-actions .language select { width:128px; }
    .header-actions .studio-nav { grid-column:1; grid-row:2; }
    .header-actions>a:not(.studio-nav) { grid-column:2; grid-row:2; }
    .studio-intro { padding:16px; }
    .studio-copy h1 { font-size:22px; line-height:1.4; word-break:keep-all; }
    .studio-actions { gap:4px 12px; margin-top:12px; }
    .calculator-intro p { font-size:14px; }
}