.hero-area {
background: var(--navy);
color: #fff;
padding: 64px 24px 72px;
text-align: center;
}
.hero-kicker {
display: inline-block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 700;
margin-bottom: 14px;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.8vw, 42px);
font-weight: 700;
line-height: 1.28;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: #fff;
}
.hero-line {
width: 32px; height: 2px;
background: var(--gold);
margin: 0 auto 16px;
}
.hero-desc {
font-size: 16px;
color: rgba(255,255,255,0.7);
max-width: 560px;
margin: 0 auto;
word-break: keep-all;
line-height: 1.8;
} .sc-container {
max-width: 760px;
margin: 0 auto;
padding: 0 24px 80px;
}
.main-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
margin-top: 40px;
padding: 40px;
border-radius: var(--radius-lg);
} .mode-tabs {
display: flex;
border-bottom: 2px solid var(--border-light);
margin-bottom: 40px;
}
.mode-btn {
flex: 1;
padding: 14px 12px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 15px;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
display: flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-sans);
}
.mode-btn.active {
color: var(--navy);
border-bottom-color: var(--gold);
}
.mode-btn:hover { color: var(--navy); }
.mode-btn i { font-size: 14px; } .question-progress {
margin: 0 0 28px;
padding: 18px 20px;
background: linear-gradient(180deg, rgba(184,146,74,0.08), rgba(255,255,255,0.98));
border: 1px solid var(--border-light);
}
.wizard-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.wizard-progress-label {
font-size: 14px;
font-weight: 700;
color: var(--navy);
}
.wizard-progress-step {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
}
.wizard-progress-track {
width: 100%;
height: 8px;
background: var(--border-subtle);
overflow: hidden;
}
.wizard-progress-bar {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
transition: width 0.24s ease;
}
.wizard-progress-note {
margin-top: 10px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.7;
}
.question-wizard-ready .q-section {
display: none;
margin-bottom: 0;
}
.question-wizard-ready .q-section.is-active { display: block; }
.question-wizard-ready .q-item {
display: none;
margin-bottom: 0;
}
.question-wizard-ready .q-item.is-active {
display: block;
outline: none;
}
.question-wizard-ready .info-section,
.question-wizard-ready .submit-area,
.question-wizard-ready .wizard-complete-note {
display: none;
}
.question-wizard-ready.is-contact-step .info-section,
.question-wizard-ready.is-contact-step .submit-area,
.question-wizard-ready.is-contact-step .wizard-complete-note {
display: block;
}
.wizard-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
}
.wizard-btn {
min-width: 148px;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-sans);
border: none;
transition: var(--transition);
}
.wizard-btn:hover:not(:disabled) { background: var(--navy-mid); }
.wizard-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.wizard-btn.secondary {
background: transparent;
color: var(--navy);
border: 1px solid var(--border-light);
}
.wizard-btn.secondary:hover:not(:disabled) {
background: var(--gold-muted);
border-color: var(--gold);
}
.wizard-complete-note {
background: var(--bg-warm);
border-left: 3px solid var(--gold);
padding: 16px 18px;
margin-top: 32px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.75;
} .q-section {
margin-bottom: 48px;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.q-header {
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
}
.q-step {
display: block;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 5px;
}
.q-title-lg {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
color: var(--navy);
margin: 0;
letter-spacing: -0.02em;
}
.q-desc-box {
background: var(--bg-warm);
border-left: 3px solid var(--gold);
padding: 14px 18px;
margin-bottom: 24px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.8;
}
.diagram-container {
margin: 16px 0 24px;
padding: 16px 18px;
background: var(--bg-page);
border: 1px solid var(--border-light);
border-left: 3px solid var(--border-light);
}
.diagram-caption {
font-size: 13px;
color: var(--text-secondary);
font-style: normal;
line-height: 1.65;
} .q-item { margin-bottom: 32px; }
.q-label {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 14px;
line-height: 1.5;
}
.select-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.select-full { grid-template-columns: 1fr; }
.select-card {
position: relative;
border: 1px solid var(--border-light);
padding: 14px 16px;
cursor: pointer;
transition: var(--transition);
background: var(--bg-card);
border-radius: var(--radius-lg);
}
.select-card:hover { border-color: var(--gold); background: var(--bg-page); }
.select-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.select-content { display: flex; align-items: center; gap: 12px; }
.select-icon {
width: 20px; height: 20px;
border: 2px solid var(--border-light);
flex-shrink: 0; position: relative;
border-radius: var(--radius-sm);
}
.select-text { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; } .select-card:has(input:checked) {
border-color: var(--gold);
background: var(--gold-muted);
}
.select-card:has(input:checked) .select-icon {
border-color: var(--gold);
background: var(--gold);
}
.select-card:has(input:checked) .select-icon::after {
content: '';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 7px; height: 7px;
background: #fff;
}
.select-card:has(input:checked) .select-text {
color: var(--navy);
font-weight: 700;
} .info-section {
background: var(--bg-warm);
border: 1px solid var(--border-light);
padding: 28px;
margin-top: 36px;
border-radius: var(--radius-lg);
}
.info-title {
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.info-title i { color: var(--gold); }
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.form-input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border-light);
background: var(--bg-card);
font-size: 15px;
font-family: var(--font-sans);
outline: none;
transition: var(--transition);
border-radius: var(--radius-md);
}
.form-input:focus { border-color: var(--gold); }
.privacy-check {
font-size: 13px;
color: var(--text-secondary);
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
line-height: 1.5;
}
.privacy-check input { margin-top: 2px; flex-shrink: 0; }
.privacy-detail {
margin-top: 10px;
font-size: 12px;
color: var(--text-muted);
background: rgba(0,0,0,0.03);
border: 1px solid var(--border-subtle);
padding: 10px 12px;
line-height: 1.7;
border-radius: var(--radius-md);
} .submit-area { text-align: center; margin-top: 36px; }
.btn-submit-main {
background: var(--navy);
color: #fff;
padding: 16px 52px;
font-size: 16px;
font-weight: 700;
font-family: var(--font-sans);
border: none;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: var(--radius-md);
}
.btn-submit-main:hover { background: var(--navy-mid); } .report-overlay {
display: none;
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(10,15,30,0.65);
backdrop-filter: blur(4px);
z-index: 999;
}
.report-box {
display: none;
background: var(--bg-card);
border-top: 3px solid var(--gold);
border: 1px solid var(--border-light);
padding: 40px;
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 90%; max-width: 600px;
z-index: 1000;
max-height: 90vh;
overflow-y: auto;
text-align: center;
border-radius: var(--radius-lg);
}
.report-badge {
display: inline-block;
padding: 5px 12px;
background: var(--navy);
color: var(--gold-light);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 16px;
border-radius: var(--radius-sm);
}
.report-title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 20px;
color: var(--navy);
}
.report-content {
background: var(--bg-warm);
border: 1px solid var(--border-light);
padding: 20px;
text-align: left;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 24px;
border-radius: var(--radius-md);
}
.btn-action-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.report-sla {
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px dashed var(--border-subtle);
font-size: 12.5px;
color: var(--text-muted);
text-align: center;
letter-spacing: -0.01em;
}
.btn-big {
padding: 14px;
font-weight: 700;
font-size: 15px;
font-family: var(--font-sans);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: var(--transition);
border-radius: var(--radius-md);
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-light); }
.btn-close {
position: absolute; top: 16px; right: 16px;
font-size: 22px; color: var(--text-light); cursor: pointer;
background: none; border: none; font-family: inherit;
}
.btn-close:hover { color: var(--text-primary); } @media (max-width: 992px) {
.wizard-progress-note { font-size: 14px; }
.select-text { font-size: 15px; line-height: 1.6; }
.form-input { font-size: 16px; padding: 13px 14px; }
.privacy-check { font-size: 14px; }
.privacy-detail { font-size: 13px; }
}
@media (max-width: 768px) {
.main-card { padding: 24px 18px; margin-top: 24px; }
.select-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.btn-action-group { grid-template-columns: 1fr; }
.report-box { padding: 28px 20px; }
.question-progress { padding: 16px; }
.wizard-controls {
flex-direction: column-reverse;
align-items: stretch;
}
.wizard-btn { width: 100%; }
}  .hero-disclaimer {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: rgba(255,255,255,0.5);
line-height: 1.7;
word-break: keep-all;
} .main-card {
border-color: rgba(10,15,30,0.08);
box-shadow: none;
padding: 36px 40px;
} .mode-btn {
min-height: 54px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.mode-btn.active { background: var(--gold-muted); }
.mode-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .question-progress {
background: var(--bg-warm);
border-color: rgba(10,15,30,0.08);
}
.wizard-progress-step {
color: var(--text-muted);
font-size: 11px;
letter-spacing: 0.1em;
} .q-desc-box,
.diagram-caption,
.wizard-complete-note,
.select-text,
.q-label { word-break: keep-all; }
.q-label { font-size: 17px; line-height: 1.55; }
.select-text { font-size: 15px; line-height: 1.6; } .select-card {
padding: 16px 18px;
border-radius: var(--radius-md);
}
.select-content { gap: 14px; }
.select-icon { border-radius: 50%; }
.select-card:has(input:checked) .select-icon::after {
width: 8px;
height: 8px;
border-radius: 50%;
}
.select-card:has(input:focus-visible) {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,146,74,0.25);
} .wizard-btn {
background: var(--gold);
color: var(--navy);
min-height: 54px;
border-radius: var(--radius-md);
letter-spacing: -0.01em;
}
.wizard-btn:hover:not(:disabled) { background: var(--gold-light); }
.wizard-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.wizard-btn.secondary { background: transparent; color: var(--navy); }
.wizard-btn.secondary:hover:not(:disabled) {
background: var(--gold-muted);
border-color: var(--gold);
} .btn-submit-main {
background: var(--gold);
color: var(--navy);
min-height: 54px;
padding: 16px 44px;
}
.btn-submit-main:hover { background: var(--gold-light); }
.btn-submit-main:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .info-section { padding: 24px 22px; }
.privacy-detail {
background: transparent;
border: 1px dashed var(--border-light);
font-size: 12px;
} .report-box .btn-gold { color: var(--navy); }
.report-box .btn-gold:hover { background: var(--gold-light); color: var(--navy); }
@media (max-width: 768px) {
.main-card { padding: 24px 20px; }
.q-item { margin-bottom: 24px; }
.q-label { margin-bottom: 16px; }
.btn-submit-main { width: 100%; }
}
@media (max-width: 640px) {
.q-label { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.q-section { animation: none; }
.wizard-progress-bar { transition: none; }
}  .mode-btn-main { font-weight: 700; }
.mode-btn-sub {
font-weight: 600;
color: var(--text-muted);
font-size: 0.92em;
}
.mode-btn.active .mode-btn-sub { color: var(--gold); }
@media (max-width: 640px) { .main-card { padding: 22px 16px; margin-top: 20px; } .mode-btn {
font-size: 13px;
padding: 12px 8px;
gap: 6px;
line-height: 1.35;
word-break: keep-all;
flex-direction: column;
}
.mode-btn i { font-size: 13px; }
.mode-btn-sub {
display: block;
font-size: 11px;
margin-top: 2px;
} .q-desc-box,
.diagram-container {
background: transparent;
border: none;
border-left: 2px solid var(--gold);
padding: 4px 0 4px 14px;
margin: 0 0 18px;
}
.diagram-container { border-left-color: var(--border-light); }
.diagram-caption {
font-size: 14px;
line-height: 1.75;
color: var(--text-secondary);
}
.q-desc-box { font-size: 14px; line-height: 1.8; } .wizard-progress-note { color: var(--text-secondary); font-size: 13.5px; }
.question-progress { padding: 14px; margin-bottom: 22px; } .q-header { margin-bottom: 16px; padding-bottom: 12px; } .select-card {
padding: 15px 16px;
min-height: 56px;
display: flex;
align-items: center;
}
.select-content { width: 100%; }
.select-text { font-size: 15px; line-height: 1.55; } .info-section {
background: transparent;
border: none;
padding: 4px 0 0;
margin-top: 28px;
}
.info-title { font-size: 16px; }
.form-row { gap: 12px; }
.form-input { font-size: 16px; padding: 14px; min-height: 50px; } .privacy-check { font-size: 14px; } .report-content {
border: none;
border-top: 1px solid var(--border-light);
border-radius: 0;
padding: 16px 0 0;
background: transparent;
}
.report-title { font-size: 20px; }
}
@media (max-width: 400px) {
.main-card { padding: 20px 14px; }
.mode-btn { font-size: 12.5px; padding: 11px 6px; }
.q-label { font-size: 15.5px; }
.select-card { padding: 14px 14px; }
} @media (max-width: 640px) {
.select-text { font-size: 16px; }
.q-label { font-size: 16px; }
.mode-btn-sub { color: var(--text-secondary); }
}  .hero-area {
padding: 64px 24px 72px;
text-align: center;
}
.hero-title {
font-size: clamp(26px, 3.8vw, 42px);
line-height: 1.28;
letter-spacing: -0.02em;
margin: 0 0 14px;
}
.hero-line { margin: 0 auto 16px; }
.hero-desc {
font-size: 16px;
max-width: 560px;
margin: 0 auto;
line-height: 1.8;
} .sc-container {
max-width: 760px;
margin: 0 auto;
padding: 0 24px 80px;
}
.main-card {
margin-top: 40px;
padding: 40px;
} .mode-tabs { margin-bottom: 40px; }
.mode-btn {
padding: 14px 12px;
font-size: 15px;
gap: 8px;
min-height: 0;
} .question-progress { margin: 0 0 28px; padding: 18px 20px; }
.wizard-progress-head { margin-bottom: 12px; }
.wizard-progress-note { font-size: 13px; line-height: 1.7; } .q-section { margin-bottom: 48px; }
.q-header { margin-bottom: 20px; padding-bottom: 14px; }
.q-title-lg { font-size: 20px; letter-spacing: -0.02em; }
.q-item { margin-bottom: 32px; }
.q-label {
font-size: 16px;
margin-bottom: 14px;
line-height: 1.5;
} .q-desc-box {
padding: 14px 18px;
margin-bottom: 24px;
font-size: 14px;
line-height: 1.75;
}
.diagram-container { margin: 16px 0 24px; padding: 16px 18px; }
.diagram-caption { font-size: 13px; line-height: 1.65; } .select-grid { gap: 10px; }
.select-card { padding: 14px 16px; }
.select-content { gap: 12px; }
.select-text { font-size: 14px; line-height: 1.5; } .wizard-controls { margin-top: 28px; }
.wizard-btn {
min-width: 148px;
padding: 14px 20px;
font-size: 15px;
min-height: 0;
}
.wizard-complete-note {
padding: 16px 18px;
margin-top: 32px;
font-size: 14px;
line-height: 1.75;
} .info-section { padding: 28px; margin-top: 36px; }
.info-title { font-size: 16px; margin-bottom: 18px; }
.form-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.form-input { padding: 11px 14px; font-size: 14px; }
.privacy-detail { padding: 10px 12px; font-size: 12px; line-height: 1.7; } .submit-area { margin-top: 36px; }
.btn-submit-main { padding: 16px 52px; font-size: 16px; min-height: 0; } .report-box { padding: 40px; }
.report-title { font-size: 22px; line-height: 1.4; margin: 0 0 20px; }
.report-content { padding: 20px; font-size: 14px; line-height: 1.8; margin-bottom: 24px; }
.btn-action-group { gap: 10px; }
.btn-big { padding: 14px; font-size: 15px; } @media (max-width: 768px) {
.main-card { padding: 24px 18px; margin-top: 24px; }
.select-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.btn-action-group { grid-template-columns: 1fr; }
.report-box { padding: 28px 20px; }
.question-progress { padding: 16px; }
.wizard-btn { min-width: 0; width: 100%; }
}
@media (max-width: 640px) {
.hero-area { padding: 60px 20px 64px; }
.hero-title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.3; }
.hero-desc { font-size: 15px; line-height: 1.72; }
.q-section { margin-bottom: 36px; }
.q-item { margin-bottom: 26px; }
} main .main-card { border-radius: 16px; }
main .info-section { border-radius: 16px; }
.diagram-caption { color: var(--text-muted); font-style: normal; }   .hero-area .ksl-m-particles { opacity: 0.55; } .hero-title .ksl-m-gold-text { display: inline-block; }:root {
--navy: #0a0f1e;
--navy-mid: #141b2d;
--navy-light: #1e2a3f;
--gold: #b8924a;
--gold-light: #d4b978;
--gold-muted: rgba(184,146,74,0.12);
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #777;
--text-light: #999;
--bg-page: #f8f7f5;
--bg-warm: #f5f3ef;
--bg-card: #ffffff;
--border-light: #e8e5e0;
--border-subtle: #f0ede8;
--header-h: 72px;
--max-width: 1080px;
--font-serif: "Noto Serif KR", "Batang", serif;
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--success: #15803d;
--warning: #b45309;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
margin: 0;
padding: var(--header-h) 0 0;
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-page);
line-height: 1.6;
}
img { max-width: 100%; height: auto; }
video, iframe { max-width: 100%; }
.ksl-a11y-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} body.ksl-page-index { padding-top: 0; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul, li { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; border: none; font-family: inherit; } .site-header {
background: rgba(255,255,255,0.97);
height: var(--header-h);
border-bottom: 1px solid var(--border-subtle);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
backdrop-filter: blur(8px);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
height: 100%;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 34px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-main {
font-family: var(--font-serif);
font-size: 17px; font-weight: 700;
color: var(--navy); letter-spacing: -0.01em;
}
.logo-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
.gnb { display: flex; align-items: center; gap: 32px; height: 100%; }
.nav-list { display: flex; gap: 28px; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
font-size: 14px; font-weight: 600;
color: var(--text-secondary); padding: 0 2px;
position: relative;
background: transparent;
border: 0;
appearance: none;
}
.nav-link::after {
content: '';
position: absolute; bottom: -1px; left: 0;
width: 0; height: 2px;
background: var(--gold);
transition: width var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--navy); font-weight: 700; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(10px);
background: #fff; min-width: 150px;
border: 1px solid var(--border-light);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
border-radius: var(--radius-md);
overflow: hidden;
opacity: 0; visibility: hidden;
transition: all 0.2s ease; padding: 8px 0;
}
.nav-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 10px 18px; font-size: 14px; color: var(--text-secondary); }
.sub-menu a:hover { background: var(--bg-warm); color: var(--navy); font-weight: 700; }
.nav-cta {
padding: 10px 22px;
background: var(--navy); color: #fff;
font-size: 13px; font-weight: 700;
border-radius: var(--radius-md);
transition: var(--transition);
}
.nav-cta:hover { background: var(--navy-mid); }
.menu-toggle { display: none; width: 26px; height: 20px; position: relative; z-index: 1100; }
.menu-toggle span {
display: block; width: 100%; height: 2px;
background: var(--navy); position: absolute; left: 0;
transition: 0.3s; border-radius: var(--radius-sm);
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.menu-toggle.active span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); }
@media (max-width: 992px) {
.gnb {
position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
background: #fff; flex-direction: column; padding-top: 80px;
transition: 0.3s ease-in-out; z-index: 10000;
box-shadow: -5px 0 20px rgba(0,0,0,0.05);
align-items: flex-start; gap: 0;
}
.gnb.open { right: 0; }
.nav-list { flex-direction: column; width: 100%; height: auto; gap: 0; overflow-y: auto; }
.nav-item { width: 100%; height: auto; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--border-subtle); }
.nav-link { display: block; width: 100%; padding: 16px 24px; font-size: 16px; color: var(--navy); font-weight: 700; }
.nav-link::after { display: none; }
.sub-menu {
position: static; width: 100%; box-shadow: none; border: none;
background: var(--bg-warm); transform: none;
opacity: 1; visibility: visible; padding: 0; display: none;
}
.nav-item.active .sub-menu {
display: block; padding: 8px 0 12px;
border-top: 1px solid var(--border-light);
}
.sub-menu a { padding: 12px 32px; font-size: 14px; border-top: 1px solid var(--border-light); font-weight: 700; color: var(--navy); }
.sub-menu a:first-child { border-top: none; }
.nav-cta { margin: 30px auto; width: 90%; text-align: center; padding: 14px; font-size: 16px; border-radius: var(--radius-md); }
.menu-toggle { display: block; z-index: 10001; }
}
@media (max-width: 640px) {
body { font-size: 16px; line-height: 1.8; letter-spacing: -0.01em; }
p, li { line-height: 1.85; }
} :root {
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 20px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--success: #15803d;
--warning: #b45309;
}
*, *::before, *::after { box-sizing: border-box; }
body {
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.inner,
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 20000;
padding: 10px 14px;
background: #fff;
color: var(--navy);
border-radius: 10px;
border: 1px solid var(--border-light);
box-shadow: 0 16px 40px rgba(10, 15, 30, 0.18);
transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; } .site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--header-h);
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 2px 12px rgba(10,15,30,0.06);
}
.header-inner {
max-width: var(--max-width); margin: 0 auto; height: 100%;
padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 34px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-main {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
color: var(--navy); letter-spacing: -0.02em;
}
.logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.gnb { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav-list { display: flex; gap: 4px; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
display: inline-flex; align-items: center;
height: 38px; padding: 0 12px;
font-size: 14px; font-weight: 700;
color: var(--text-secondary); border-radius: 6px;
background: transparent;
border: 0;
appearance: none;
}
.nav-link:hover, .nav-link.active { background: var(--gold-muted); color: var(--navy); }
.sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--bg-card); min-width: 160px;
border: 1px solid var(--border-light);
box-shadow: 0 12px 32px rgba(10,15,30,0.12);
opacity: 0; visibility: hidden; transition: all 0.2s ease; padding: 6px;
}
.nav-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.sub-menu a:hover { background: var(--bg-warm); color: var(--navy); }
.nav-cta { height: 40px; padding: 0 18px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.nav-cta:hover { background: var(--navy-mid); }
.menu-toggle {
display: none; width: 24px; height: 18px;
position: relative; z-index: 1100; background: none; padding: 0;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); position: absolute; left: 0; transition: 0.3s; }
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.menu-toggle.active span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); } .site-header.site-header--hero {
height: auto;
background: rgba(10,15,30,0.42);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.10);
box-shadow: none;
}
.site-header.site-header--hero .header-inner { height: 72px; }
.site-header.site-header--hero .logo-main { color: rgba(255,255,255,0.95); }
.site-header.site-header--hero .logo-sub { color: rgba(255,255,255,0.68); }
.site-header.site-header--hero .nav-link { color: rgba(255,255,255,0.84); }
.site-header.site-header--hero .nav-link:hover,
.site-header.site-header--hero .nav-link.active { background: rgba(184,146,74,0.18); color: #fff; }
.site-header.site-header--hero .nav-cta { background: var(--gold); color: var(--navy); }
.site-header.site-header--hero .nav-cta:hover { background: var(--gold-light); }
.site-header.site-header--hero .menu-toggle span { background: rgba(255,255,255,0.9); } .site-header.site-header--compact {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--header-h);
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 2px 12px rgba(10,15,30,0.06);
}
.site-header.site-header--compact .header-inner {
max-width: var(--max-width); margin: 0 auto; height: 100%;
padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.site-header.site-header--compact .logo-area { display: flex; align-items: center; gap: 10px; }
.site-header.site-header--compact .logo-img { height: 34px; width: auto; }
.site-header.site-header--compact .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-header.site-header--compact .logo-main {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
color: var(--navy); letter-spacing: -0.02em;
}
.site-header.site-header--compact .logo-sub {
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.12em; text-transform: uppercase;
}
.site-header.site-header--compact .gnb { display: flex; align-items: center; gap: 24px; height: 100%; }
.site-header.site-header--compact .nav-list { display: flex; gap: 4px; height: 100%; }
.site-header.site-header--compact .nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.site-header.site-header--compact .nav-link {
display: inline-flex; align-items: center;
height: 38px; padding: 0 12px;
font-size: 14px; font-weight: 700;
color: var(--text-secondary); border-radius: 6px;
}
.site-header.site-header--compact .nav-link::after { display: none; }
.site-header.site-header--compact .nav-link:hover,
.site-header.site-header--compact .nav-link.active { background: var(--gold-muted); color: var(--navy); }
.site-header.site-header--compact .sub-menu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--bg-card); min-width: 160px;
border: 1px solid var(--border-light);
box-shadow: 0 12px 32px rgba(10,15,30,0.12);
opacity: 0; visibility: hidden; transition: all 0.2s ease; padding: 6px;
}
.site-header.site-header--compact .nav-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-header.site-header--compact .sub-menu a { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.site-header.site-header--compact .sub-menu a:hover { background: var(--bg-warm); color: var(--navy); }
.site-header.site-header--compact .nav-cta { height: 40px; padding: 0 18px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.site-header.site-header--compact .nav-cta:hover { background: var(--navy-mid); }
.site-header.site-header--compact .menu-toggle span { background: var(--navy); } body.ksl-page-index { padding-top: 0; } .fade-section { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade-section.visible { opacity: 1; transform: none; } .site-footer {
background: #050a14;
color: #e5e7eb;
padding: 56px 24px 34px;
border-top: 1px solid rgba(255,255,255,0.05);
font-family: var(--font-sans);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 28px;
align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.footer-logo-text { display: flex; flex-direction: column; gap: 2px; }
.footer-logo-main {
font-family: var(--font-serif);
font-size: 17px; font-weight: 700;
color: #f0ede8; letter-spacing: -0.02em;
}
.footer-logo-sub { font-size: 11px; color: #9ca3af; letter-spacing: 0.06em; }
.footer-desc { font-size: 13px; line-height: 1.75; color: #9ca3af; }
.footer-contact { font-size: 13px; line-height: 1.85; color: #d1d5db; }
.footer-contact .label { color: var(--gold); font-weight: 700; margin-right: 6px; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: #f8f8f6; }
.footer-links { display: grid; gap: 7px; font-size: 13px; }
.footer-links a { color: #d1d5db; opacity: 0.85; }
.footer-links a:hover { color: var(--gold-light); opacity: 1; }
.footer-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.footer-quick a {
display: flex; align-items: center; gap: 7px;
padding: 8px 10px; background: rgba(255,255,255,0.04);
color: #d1d5db; font-size: 12px; font-weight: 700;
}
.footer-quick a:hover { background: rgba(184,146,74,0.1); color: var(--gold-light); }
.footer-line { max-width: var(--max-width); margin: 26px auto 16px; height: 1px; background: rgba(255,255,255,0.07); }
.footer-notice { max-width: var(--max-width); margin: 0 auto; font-size: 12px; line-height: 1.8; color: #6b7280; }
.footer-bottom {
max-width: var(--max-width); margin: 14px auto 0;
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: space-between; align-items: center;
font-size: 12px; color: #6b7280;
} :root {
--desktop-consult-bar-h: 56px;
}
.ksl-consult-toggle {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: 56px; max-width: 1200px; margin: 0 auto;
padding: 12px 24px; color: #fff; font-size: 14px; font-weight: 700;
cursor: pointer; list-style: none;
}
.ksl-consult-toggle::-webkit-details-marker { display: none; }
.ksl-consult-toggle-label { display: flex; align-items: center; gap: 10px; color: var(--gold-light); }
.ksl-consult-close-copy { display: none; }
.desktop-consult-bar[open] .ksl-consult-open-copy { display: none; }
.desktop-consult-bar[open] .ksl-consult-close-copy { display: inline; }
.desktop-consult-bar[open] .ksl-consult-toggle-label > span:last-child { transform: rotate(180deg); }
.ksl-consult-toggle:focus-visible { outline: 3px solid var(--gold-light); outline-offset: -4px; }
.desktop-consult-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9997;
display: none;
background: rgba(10,15,30,0.96);
border-top: 1px solid rgba(184,146,74,0.38);
box-shadow: 0 -12px 42px rgba(0,0,0,0.28);
backdrop-filter: blur(10px);
}
.desktop-consult-inner {
max-width: 1280px;
margin: 0 auto;
padding: 12px 18px;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.desktop-consult-copy { flex: 0 0 auto; min-width: 220px; }
.desktop-consult-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 800;
color: #fff;
line-height: 1.25;
}
.desktop-consult-sub {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.68);
letter-spacing: -0.01em;
}
.desktop-consult-form { flex: 1 1 520px; min-width: 320px; }
.desktop-consult-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.desktop-consult-fields {
display: flex;
gap: 10px;
align-items: center;
}
.desktop-consult-field { flex: 0 0 auto; }
.desktop-consult-field--message { flex: 1 1 auto; min-width: 220px; }
.desktop-consult-input {
height: 42px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.92);
outline: none;
transition: var(--transition);
font-size: 14px;
}
.desktop-consult-input::placeholder { color: rgba(255,255,255,0.5); }
.desktop-consult-input:focus {
border-color: rgba(184,146,74,0.7);
box-shadow: 0 0 0 3px rgba(184,146,74,0.14);
}
.desktop-consult-textarea {
height: 42px;
padding: 10px 12px;
resize: none;
line-height: 1.4;
overflow: hidden;
}
.desktop-consult-submit {
height: 42px;
padding: 0 16px;
border-radius: 10px;
background: var(--gold);
color: var(--navy);
font-weight: 900;
font-size: 14px;
border: 1px solid rgba(184,146,74,0.9);
transition: var(--transition);
white-space: nowrap;
}
.desktop-consult-submit:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.desktop-consult-submit:disabled { opacity: 0.7; transform: none; cursor: not-allowed; }
.desktop-consult-meta {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.desktop-consult-privacy {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,0.72);
font-weight: 600;
}
.desktop-consult-privacy input { width: 14px; height: 14px; accent-color: var(--gold); }
.desktop-consult-privacy-link {
font-size: 12px;
color: rgba(184,146,74,0.95);
font-weight: 800;
}
.desktop-consult-privacy-link:hover { color: var(--gold-light); }
.desktop-consult-status {
font-size: 12px;
color: rgba(255,255,255,0.72);
font-weight: 600;
}
.desktop-consult-status[data-tone="success"] { color: rgba(212,185,120,0.98); }
.desktop-consult-status[data-tone="error"] { color: rgba(248,113,113,0.92); }
@media (min-width: 993px) {
body { padding-bottom: calc(var(--desktop-consult-bar-h, 112px) + env(safe-area-inset-bottom, 0px)); }
.desktop-consult-bar { display: block; }
.desktop-consult-bar { animation: desktopConsultIn 320ms ease-out both; }
}
@keyframes desktopConsultIn {
from { transform: translateY(14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.desktop-consult-bar { animation: none !important; }
}
@media (max-width: 1120px) {
.desktop-consult-copy { min-width: 160px; }
.desktop-consult-sub { display: none; }
}
@media (max-width: 1024px) {
.desktop-consult-fields { flex-wrap: wrap; }
.desktop-consult-field--message { min-width: 100%; }
} body.has-fixed-cta { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
.fixed-cta-bar {
position: fixed; inset: auto 0 0; z-index: 9997;
background: var(--navy); border-top: 1px solid rgba(185,149,85,.35);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fixed-cta-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 680px); min-height: 58px; margin: 0 auto; }
.fixed-cta-bar .cta-btn { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 58px; padding: 10px 16px; border: 0; border-left: 1px solid rgba(255,255,255,.12); background: var(--navy); color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; }
.fixed-cta-bar .cta-btn:first-child { border-left: 0; }
.fixed-cta-bar .cta-btn.primary { background: var(--gold); color: var(--navy-deep); }
.fixed-cta-bar .cta-label-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 993px) {
.fixed-cta-bar { display: none; }
body.has-fixed-cta { padding-bottom: 0 !important; }
}
@media (max-width: 992px) {
.gnb {
position: fixed; top: var(--header-h); right: -100%;
width: min(100%, 360px); height: calc(100vh - var(--header-h));
background: var(--bg-card); flex-direction: column;
padding: 20px 0 40px; overflow-y: auto;
color: var(--navy);
border-left: 1px solid var(--border-light);
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
box-shadow: -4px 0 20px rgba(0,0,0,0.08);
transition: right 0.3s ease; z-index: 1000; align-items: flex-start; gap: 0;
}
.gnb.open { right: 0; }
.nav-list { flex-direction: column; width: 100%; height: auto; gap: 0; }
.nav-item { width: 100%; height: auto; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--border-subtle); padding: 4px 0; }
.nav-link { width: calc(100% - 24px); height: auto; padding: 15px 18px; margin: 0 12px; font-size: 16px; border-radius: var(--radius-md); } .site-header.site-header--compact .gnb {
height: calc(100vh - var(--header-h));
align-items: flex-start;
gap: 0;
}
.site-header.site-header--compact .nav-list {
height: auto;
flex-shrink: 0;
gap: 0;
}
.site-header.site-header--compact .nav-item {
height: auto;
align-items: flex-start;
}
.site-header.site-header--compact .nav-link {
height: auto;
min-height: 44px;
padding: 15px 18px;
font-size: 16px;
}
.site-header.site-header--compact .sub-menu {
position: static;
width: calc(100% - 24px);
margin: 0 12px 8px;
transform: none;
opacity: 1;
visibility: visible;
box-shadow: none;
}
.site-header.site-header--compact .nav-item:hover .sub-menu { transform: none; }
.site-header.site-header--compact .sub-menu a { padding: 11px 20px; }
.site-header.site-header--compact .nav-cta { height: 46px; flex-shrink: 0; } .site-header .gnb .nav-link {
color: var(--navy);
font-weight: 800;
letter-spacing: -0.01em;
}
.site-header .gnb .nav-link:hover,
.site-header .gnb .nav-link.active {
background: rgba(184,146,74,0.14);
color: var(--navy);
}
.site-header .gnb .nav-item.active > .nav-link,
.site-header .gnb .menu-item-has-children.active > a {
background: rgba(184,146,74,0.14);
color: var(--navy);
}
.sub-menu {
position: static; width: calc(100% - 24px);
margin: 0 12px 8px;
box-shadow: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-warm);
opacity: 1; visibility: visible; transform: none;
padding: 6px; display: none;
}
.nav-item.active .sub-menu,
.menu-item-has-children.active .sub-menu { display: block; }
.sub-menu a { padding: 11px 20px; margin: 2px 6px; border-radius: var(--radius-sm); font-size: 14px; color: var(--navy); font-weight: 700; }
.sub-menu a:hover { background: rgba(184,146,74,0.12); color: var(--navy); }
.nav-cta { margin: 24px auto; width: calc(100% - 48px); text-align: center; height: 46px; justify-content: center; display: flex; }
.menu-toggle { display: flex; align-items: center; }
.site-header .gnb .nav-link:focus-visible,
.site-header .gnb .sub-menu a:focus-visible,
.site-header .gnb .nav-cta:focus-visible {
outline: 3px solid rgba(184,146,74,0.55);
outline-offset: -3px;
}
}
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 768px) {
html body { font-size: 16px; }
body.has-fixed-cta { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.fixed-cta-inner > .cta-btn.primary,
.fixed-cta-inner > .cta-btn[href^="tel:"] {
display: flex; align-items: center; justify-content: center;
flex-direction: row; gap: 8px; padding: 12px 16px; min-height: 56px;
}
.fixed-cta-inner .cta-label-main { font-size: 14px; white-space: nowrap; }
}
@media (max-width: 640px) {
.site-footer { padding: 40px 16px 28px; }
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.footer-quick { grid-template-columns: 1fr 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
body .container,
body .inner,
body .header-inner { padding-left: 16px; padding-right: 16px; }
body .footer-desc,
body .footer-contact,
body .footer-links { font-size: 14px; }
body .footer-quick a { font-size: 13px; }
body .footer-notice,
body .footer-bottom { font-size: 13px; }
} .contact-receipt-note{overflow-wrap:anywhere}.contact-receipt-note code{white-space:normal}  body[class*="ksl-page-"] .ksl-subpage-hero { box-sizing: border-box; display: flex; align-items: center; min-height: 300px; padding: 32px 0; text-align: left; }
body[class*="ksl-page-"] .ksl-subpage-hero > .inner { width: 100%; }
body[class*="ksl-page-"] .ksl-subpage-hero :is(h1, p) { word-break: keep-all; overflow-wrap: anywhere; }
body[class*="ksl-page-"] .ksl-subpage-hero h1 { margin: 0; font-size: 34px; line-height: 1.45; letter-spacing: -.035em; }
body[class*="ksl-page-"] .ksl-subpage-hero :is(.pasan-hero-kicker, .hero-badge, .cases-kicker, .faq-hero-kicker, .hero-kicker, .contact-hero-kicker, .loc-kicker) { display: block; margin: 0 0 10px; font-size: 11px; line-height: 1.6; letter-spacing: .13em; }
body[class*="ksl-page-"] .ksl-subpage-hero :is(.pasan-hero-desc, .hero-desc, .cases-desc, .faq-hero-desc, .contact-hero-desc, .loc-desc) { max-width: 560px; margin: 12px 0 0; font-size: 16px; line-height: 1.8; }
body[class*="ksl-page-"] .ksl-subpage-hero::before, body[class*="ksl-page-"] .ksl-subpage-hero::after { animation: none; }
.ksl-explore-breadcrumb { background: #fff; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); font-size: 13px; }
.ksl-explore-breadcrumb .container { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 44px; }
.ksl-explore-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); text-underline-offset: 4px; }
.ksl-explore-outline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; padding: 14px 0; border-block: 1px solid var(--border-light); }
.ksl-explore-outline > span { flex-basis: 100%; color: var(--text-secondary); font-size: 14px; }
.ksl-explore-outline a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 4px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; }
.ksl-explore-outline a:focus-visible, .ksl-explore-breadcrumb a:focus-visible { outline: 3px solid #896627; outline-offset: 3px; } body[class*="ksl-page-"] .ksl-subpage-hero--info > .inner, body[class*="ksl-page-"] .ksl-subpage-hero--profile > .inner { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 56px; row-gap: 0; align-items: center; }
body[class*="ksl-page-"] .ksl-subpage-hero--info h1, body[class*="ksl-page-"] .ksl-subpage-hero--profile h1 { grid-column: 1; grid-row: 2; align-self: start; }
body[class*="ksl-page-"] .ksl-subpage-hero--info .pasan-hero-desc, body[class*="ksl-page-"] .ksl-subpage-hero--profile .hero-desc { grid-column: 2; grid-row: 1 / span 2; padding-left: 28px; border-left: 1px solid #b8924a80; margin: 0; }
body[class*="ksl-page-"] .ksl-subpage-hero--info::before { display: none; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-nav-wrapper { margin-top: 0; margin-bottom: 20px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-nav-link { min-height: 48px; padding: 13px 24px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-section-card { padding: 32px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-card-header { margin-bottom: 24px; } body[class*="ksl-page-"] .ksl-subpage-hero--profile { background: #f1eee7; color: #15243c; border-bottom: 1px solid #ded7c9; }
body[class*="ksl-page-"] .ksl-subpage-hero--profile::before, body[class*="ksl-page-"] .ksl-subpage-hero--profile::after { display: none; }
body[class*="ksl-page-"] .ksl-subpage-hero--profile .hero-desc { color: #526079; }
body.ksl-page-about .ksl-explore-outline { margin: 16px 0 20px; padding: 14px 18px; }
body.ksl-page-about .profile-section { margin-top: 0; padding-bottom: 32px; }
body.ksl-page-about .profile-card { grid-template-columns: 300px minmax(0, 1fr); }
body.ksl-page-about .profile-content { padding: 32px; }
body.ksl-page-about .profile-img-area { min-height: 400px; }
body.ksl-page-about .section-py { padding: 48px 0; }
body.ksl-page-about .stats-bar { margin-bottom: 24px; padding: 24px; }
body.ksl-page-about .section-header { margin-bottom: 28px; } body[class*="ksl-page-"] .ksl-subpage-hero--archive { background: #eeeae2; color: #172339; }
body[class*="ksl-page-"] .ksl-subpage-hero--archive .cases-hero-grid { display: block; }
body[class*="ksl-page-"] .ksl-subpage-hero--archive .cases-title { color: #172339; }
body[class*="ksl-page-"] .ksl-subpage-hero--archive .cases-title > span { color: #88632e; }
body[class*="ksl-page-"] .ksl-subpage-hero--archive .cases-desc { color: #526079; }
body[class*="ksl-page-"] .ksl-subpage-hero--archive .cases-hero-link { min-height: 44px; margin-top: 12px; color: #805c24; }
body.ksl-page-cases .cases-library { padding-top: 24px; padding-bottom: 40px; }
body.ksl-page-cases .cases-library-heading { margin-bottom: 18px; }
body.ksl-page-cases .cases-library-heading h2 { font-size: 25px; }
body.ksl-page-cases .cases-tools { padding: 18px; gap: 16px; }
body.ksl-page-cases .cases-reading-guide { margin: 12px 0 0; padding: 0 16px; border: 1px solid #dcd6c9; border-radius: 8px; background: #f3f0e9; color: #172339; }
body.ksl-page-cases .cases-reading-guide summary { min-height: 44px; padding: 11px 0; color: #76551f; font-size: 14px; font-weight: 700; cursor: pointer; }
body.ksl-page-cases .cases-reading-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 4px 0 18px; }
body.ksl-page-cases .cases-reading-guide li { padding: 0; border: 0; gap: 12px; }
body.ksl-page-cases .cases-reading-guide li > span { color: #805c24; }
body.ksl-page-cases .cases-reading-guide strong { color: #172339; font-size: 15px; }
body.ksl-page-cases .cases-reading-guide p { color: #526079; font-size: 14px; }
body.ksl-page-cases .cases-section { padding-top: 24px; } body[class*="ksl-page-"] .ksl-subpage-hero--tool { min-height: 200px; padding: 24px 0; }
body[class*="ksl-page-"] .ksl-subpage-hero--tool h1 { font-size: 30px; }
body.ksl-page-faq .ksl-subpage-hero--tool { background: #f5f4ef; color: #172339; border-bottom: 1px solid #ded8cd; }
body.ksl-page-faq .faq-section { padding: 24px 0; }
body.ksl-page-faq .faq-group-head { margin-bottom: 18px; }
body.ksl-page-faq .faq-main { padding-bottom: 40px; }
body.ksl-page-faq .pasan-nav-link { min-height: 48px; padding: 13px 18px; }
body.ksl-page-selfcheck .ksl-subpage-hero--tool { display: block; background: #f4f6f8; color: #172339; border-bottom: 1px solid #dce2e9; }
body.ksl-page-selfcheck .ksl-subpage-hero--tool > .ksl-subpage-tool-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
body.ksl-page-selfcheck .hero-kicker { color: #86632f; }
body.ksl-page-selfcheck .hero-title { color: #172339; }
body.ksl-page-selfcheck .hero-desc { color: #526079; }
body.ksl-page-selfcheck .main-card { margin-top: 20px; padding: 24px; }
body.ksl-page-selfcheck .mode-tabs { margin-bottom: 16px; }
body.ksl-page-selfcheck .mode-btn { min-height: 48px; padding: 10px; }
body.ksl-page-selfcheck .question-progress { padding: 12px 16px; margin-bottom: 14px; }
body.ksl-page-selfcheck .wizard-progress-head { margin-bottom: 6px; }
body.ksl-page-selfcheck .q-header { margin-bottom: 12px; padding-bottom: 10px; }
body.ksl-page-selfcheck .ksl-question-help { margin-bottom: 14px; padding: 0 14px; border: 1px solid #ded9ce; border-radius: 6px; background: #f7f5f0; }
body.ksl-page-selfcheck .ksl-question-help summary { min-height: 44px; padding: 10px 0; color: #76551f; font-size: 14px; font-weight: 700; cursor: pointer; }
body.ksl-page-selfcheck .ksl-question-help .q-desc-box { padding: 12px; margin-bottom: 12px; }
body.ksl-page-selfcheck .ksl-question-help .diagram-container { margin: 0 0 12px; padding: 12px; }
body.ksl-page-selfcheck .q-label { margin-bottom: 12px; }
body.ksl-page-contact .contact-hero > .inner { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; }
body.ksl-page-contact .contact-hero :is(.contact-hero-kicker, h1, .contact-hero-desc) { grid-column: 1; }
body .ksl-subpage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.ksl-page-contact .ksl-subpage-actions { grid-column: 2; grid-row: 1 / span 3; }
body .ksl-subpage-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 10px 18px; border: 1px solid #bba16d; border-radius: 6px; color: #f6e4c5; font-size: 14px; font-weight: 700; }
body.ksl-page-contact .contact-main { padding-bottom: 40px; }
body.ksl-page-location .ksl-subpage-hero--tool { background: #f0eee8; color: #172339; border-bottom: 1px solid #ded8cd; }
body.ksl-page-location .location-hero > .inner { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 40px; }
body.ksl-page-location .loc-title { grid-column: 1; color: #172339; }
body.ksl-page-location .loc-desc { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #34465e; margin: 0; padding-left: 24px; border-left: 2px solid #b89a60; }
body.ksl-page-location .location-wrap { padding-top: 0; padding-bottom: 32px; }
body.ksl-page-location .loc-section { padding: 24px 0; }
body.ksl-page-location .sec-header { margin-bottom: 18px; padding-bottom: 14px; }
body[class*="ksl-page-"] .ksl-subpage-hero a:focus-visible, body .ksl-question-help summary:focus-visible, body.ksl-page-cases .cases-reading-guide summary:focus-visible { outline: 3px solid #aa803e; outline-offset: 3px; }
@media (max-width: 768px) {
body[class*="ksl-page-"] .ksl-subpage-hero { min-height: 280px; padding: 28px 0; }
body[class*="ksl-page-"] .ksl-subpage-hero h1 { font-size: 28px; }
body[class*="ksl-page-"] .ksl-subpage-hero--info > .inner, body[class*="ksl-page-"] .ksl-subpage-hero--profile > .inner { display: block; }
body[class*="ksl-page-"] .ksl-subpage-hero--info .pasan-hero-desc, body[class*="ksl-page-"] .ksl-subpage-hero--profile .hero-desc { margin-top: 14px; padding-left: 0; border: 0; }
body[class*="ksl-page-"] .ksl-subpage-hero--tool { min-height: 200px; padding: 24px 0; }
body[class*="ksl-page-"] .ksl-subpage-hero--tool h1 { font-size: 26px; }
body[class*="ksl-page-"] .ksl-subpage-hero--tool :is(.hero-desc, .faq-hero-desc, .contact-hero-desc, .loc-desc) { font-size: 15px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-nav-wrapper { margin-bottom: 12px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-section-card { padding: 24px 20px; }
body:is(.ksl-page-rehab, .ksl-page-pasan, .ksl-page-corp) .pasan-nav-link { padding: 12px 18px; }
body.ksl-page-about .profile-card { grid-template-columns: 1fr; }
body.ksl-page-about .profile-img-area { min-height: 0; height: 240px; }
body.ksl-page-about .profile-img { object-position: center 22%; }
body.ksl-page-about .profile-content { padding: 24px; }
body.ksl-page-cases .ksl-subpage-hero h1 { font-size: 26px; }
body.ksl-page-cases .cases-library-heading h2 { font-size: 22px; }
body.ksl-page-cases .cases-tools { padding: 14px; }
body.ksl-page-cases .cases-reading-guide ol { grid-template-columns: 1fr; }
body.ksl-page-cases .cases-reading-guide li { flex-direction: row; }
body.ksl-page-contact .contact-hero > .inner { display: block; }
body.ksl-page-contact .ksl-subpage-actions { margin-top: 14px; }
body.ksl-page-contact .ksl-subpage-actions a { padding: 9px 12px; }
body.ksl-page-location .location-hero > .inner { display: block; }
body.ksl-page-location .loc-desc { margin-top: 12px; padding-left: 0; border: 0; }
}
@media (max-width: 390px) {
body[class*="ksl-page-"] .ksl-subpage-hero > .inner { padding-left: 18px; padding-right: 18px; }
body.ksl-page-selfcheck .sc-container, body.ksl-page-selfcheck .ksl-subpage-tool-inner { padding-left: 18px; padding-right: 18px; }
body.ksl-page-selfcheck .main-card { padding: 18px; }
body.ksl-page-selfcheck .mode-btn { font-size: 14px; }
}  :root {
--ksl-card-radius: 4px;
--ksl-card-line: #d7d2c8;
--ksl-card-border: 1px solid var(--ksl-card-line);
}
body {
--radius-sm: var(--ksl-card-radius);
--radius-md: var(--ksl-card-radius);
--radius-lg: var(--ksl-card-radius);
--shadow-card: none;
--shadow-float: none;
} body[class] main :is(.ksl-explore-card, .case-card, .case-item, .select-card, .report-box),
body[class] .report-box,
body.ksl-page-about .stats-bar {
border: var(--ksl-card-border);
border-radius: var(--ksl-card-radius);
box-shadow: none;
}
body[class] main :is(.ksl-explore-card, .case-card, .case-item):hover {
border-color: #ac874b;
box-shadow: none;
transform: none;
}
body[class] main .select-card:hover { border-color: #ac874b; }
body[class] main .select-card:has(input:checked) {
border-color: #ac874b;
background: var(--gold-muted);
}
body[class] main .select-card:has(input:focus-visible) {
outline: 3px solid #a17634;
outline-offset: 3px;
}
body[class] main .case-item.open { border-color: #ac874b; } body[class] main :is(.profile-card, .main-card, .board-card, .form-card, .info-card, .legal-card) {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
body[class] main .pasan-section-card:not(.consult-card) {
padding: 32px 0;
background: transparent;
border: 0;
border-top: var(--ksl-card-border);
border-radius: 0;
box-shadow: none;
}
body[class] main .pasan-section-card:first-child { border-top: 0; }
body[class] main .highlight-box {
padding: 18px 0;
border: 0;
border-top: var(--ksl-card-border);
background: transparent;
border-radius: 0;
}
body[class] main :is(.diff-card, .review-card, .check-card, .service-item, .trans-item) {
padding: 24px 0;
background: transparent;
border: 0;
border-top: var(--ksl-card-border);
border-radius: 0;
box-shadow: none;
}
body[class] main :is(.diff-card, .service-item):hover { border-color: var(--ksl-card-line); box-shadow: none; transform: none; }
body[class] main .profile-content { padding-top: 0; padding-bottom: 0; }
body[class] main .profile-img-area { min-height: 0; height: auto; border-radius: 0; background: transparent; }
body[class] main .profile-tag-overlay {
position: static;
padding: 16px 0;
border: 0;
border-bottom: var(--ksl-card-border);
background: transparent;
color: #172339;
}
body[class] main .profile-img { display: block; height: 400px; }
body[class] main .diff-grid { gap: 28px; }
body[class] main .legal-card { padding: 24px 0; border-top: var(--ksl-card-border); }
body[class] main .legal-card:first-child { border-top: 0; padding-top: 12px; } body[class] main .main-card { padding: 0; }
body[class] main .ksl-board-private-text { padding: 18px 0; background: transparent; border-top: var(--ksl-card-border); border-radius: 0; } body[class] main .ksl-explore-outline {
padding: 12px 0;
border: 0;
border-bottom: var(--ksl-card-border);
background: transparent;
border-radius: 0;
}
body[class] main .ksl-explore-outline a { border-radius: var(--ksl-card-radius); }
body[class] main .cases-tools {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body[class] main :is(.ksl-question-help, .cases-reading-guide) {
padding: 0;
background: transparent;
border: 0;
border-top: var(--ksl-card-border);
border-bottom: var(--ksl-card-border);
border-radius: 0;
}
body[class] main .question-progress {
padding: 8px 0 14px;
background: transparent;
border: 0;
border-bottom: var(--ksl-card-border);
border-radius: 0;
}
body[class] main :is(.q-desc-box, .diagram-container) {
padding: 12px 0;
background: transparent;
border: 0;
border-radius: 0;
}
body[class] main :is(.info-block, .info-section, .privacy-detail, .privacy-wrap, .detail-box, .lock-box, .q-box, .a-box) {
padding: 20px 0;
background: transparent;
border: 0;
border-top: var(--ksl-card-border);
border-radius: 0;
box-shadow: none;
} body[class] main .faq-answer { background: transparent; border-radius: 0; }
body[class] main .faq-answer-inner { padding: 16px 0 22px 28px; }
body[class] main .faq-table-wrap { border: 0; border-radius: 0; background: transparent; }
body[class] .report-box .report-content { padding: 16px 0; background: transparent; border: 0; border-top: var(--ksl-card-border); border-radius: 0; }
body[class] main :is(.case-preview-facts, .case-specs, .case-note) {
padding: 16px 0;
border: 0;
border-top: var(--ksl-card-border);
background: transparent;
border-radius: 0;
}
body[class] main .case-doc { padding: 0; border: 0; border-radius: 0; background: transparent; }
body[class] main :is(.cases-empty, .cases-reading-note) {
padding: 20px 0;
border: 0;
border-top: var(--ksl-card-border);
border-radius: 0;
background: transparent;
}
body[class] main :is(.photo-item, .map-container) { border-radius: 0; border: 0; box-shadow: none; }
body[class] main .photo-caption { padding: 10px 0; border: 0; background: transparent; }
body[class] main .photo-item:hover .photo-img,
body[class] main .case-card:hover .case-img-wrap img { transform: none; } body[class] main .consult-card { border: 0; border-radius: 0; box-shadow: none; }
body[class] main .cases-consult {
padding: 32px 0;
background: transparent;
border-top: var(--ksl-card-border);
border-radius: 0;
color: #172339;
}
body[class] main .cases-consult h2 { color: #172339; }
body[class] main .cases-consult p { color: #526079; }
body[class] main .cases-consult-secondary { color: #70511e; } body[class] main :is(.btn, .consult-btn, .btn-action, .ksl-board-button, .cases-filter-button, .cases-search-field, .case-document-action),
body[class] main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body[class] .ksl-subpage-actions a,
body[class] .cases-document-dialog,
body[class] .cases-document-toolbar :is(a, button) { border-radius: var(--ksl-card-radius); }
body[class] main .cases-search-field { border: var(--ksl-card-border); }
body[class] .cases-document-dialog { border: var(--ksl-card-border); box-shadow: none; }
body[class] main .ksl-board-pages :is(a, button) { border-radius: var(--ksl-card-radius); }
body[class] .site-header .sub-menu { border: var(--ksl-card-border); border-radius: var(--ksl-card-radius); box-shadow: none; }
body[class] :is(.fixed-cta-bar, .desktop-consult-bar) { border-radius: 0; box-shadow: none; border-top: 1px solid #ffffff30; }
@media (max-width: 768px) {
body[class] main .pasan-section-card:not(.consult-card) { padding: 24px 0; }
body[class] main .profile-content { padding: 24px 0 0; }
body[class] main .profile-img { height: 240px; }
body[class] main .faq-answer-inner { padding-left: 0; }
body[class] main .ksl-board-table tr { padding: 16px 0; border: 0; border-bottom: var(--ksl-card-border); border-radius: 0; box-shadow: none; }
}  :root { --ksl-layout-max: 1200px; --ksl-reading-max: 780px; --ksl-form-max: 720px; --ksl-fixed-bottom-h: 69px; }
body[class] { --max-width: var(--ksl-layout-max); --header-h: 72px; padding-top: var(--header-h); padding-bottom: var(--ksl-fixed-bottom-h) !important; }
body.ksl-page-index { padding-top: 0; }
html { scroll-padding-top: calc(var(--header-h, 72px) + 16px); }
body[class] :is(.inner, .container, .header-inner, .footer-inner, .pasan-nav, .stats-bar-inner) { width: 100%; max-width: var(--ksl-layout-max); margin-inline: auto; padding-inline: 24px; }
body[class] :is(.pasan-card-desc, .acc-panel-inner, .legal-container, .wp-content, .profile-editorial, .intro-text, .case-summary) { max-width: var(--ksl-reading-max); }
body[class] .acc-panel-inner { padding-left: 0; }
body[class] .legal-main :is(.container, .inner) { max-width: calc(var(--ksl-reading-max) + 48px); }
body.ksl-page-single :is(.page-head, .wp-content) { max-width: var(--ksl-reading-max); margin-inline: auto; }
body[class] .faq-section { max-width: var(--ksl-reading-max); margin-inline: auto; }
body[class] .faq-group-head { text-align: left; }
body[class] main :is(.profile-content, .intro-text, .case-text) { min-width: 0; }
body[class] .case-text { max-width: var(--ksl-reading-max); }
body[class] main :is(.pasan-card-desc, .overview-text, .acc-panel-inner, .step-desc, .intro-text, .faq-answer-inner) { font-size: 16px; line-height: 1.85; }
body[class] .sc-container, body.ksl-page-selfcheck .ksl-subpage-hero--tool > .ksl-subpage-tool-inner { width: 100%; max-width: var(--ksl-form-max); padding-inline: 24px; margin-inline: auto; }
body[class] main.ksl-board-page .form-card, body.ksl-page-selfcheck main .info-section {
width: 100%; max-width: var(--ksl-form-max); margin-inline: auto; padding: 24px;
background: #fff; border: var(--ksl-card-border); border-radius: var(--ksl-card-radius); box-shadow: none;
}
body[class] .contact-form { max-width: var(--ksl-form-max); } body[class] .site-header { height: var(--header-h); background: #fbfaf7; border-bottom: 1px solid #ded8cc; backdrop-filter: none; box-shadow: none; }
body[class] .site-header .header-inner { height: var(--header-h); }
body[class] .site-header .logo-area { gap: 10px; flex-shrink: 0; }
body[class] .site-header .logo-img { height: 34px; width: auto; }
body[class] .site-header .logo-text { max-width: 220px; }
body[class] .site-header .logo-main { font-size: 18px; color: #172339; letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; }
body[class] .site-header .logo-sub { font-size: 10px; color: #647080; letter-spacing: .04em; }
body[class] .site-header .gnb { gap: 16px; }
body[class] .site-header .nav-list { gap: 4px; }
body[class] .site-header .nav-link { height: 40px; padding-inline: 10px; color: #344258; font-size: 14px; border-radius: 4px; }
body[class] .site-header .nav-link:is(:hover, .active) { color: #172339; background: #eee9df; }
body[class] .site-header .nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: 16px; border-radius: 4px; background: #172339; color: #fff; font-size: 13px; }
body[class] .site-header .menu-toggle span { background: #172339; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) { background: #101e32; border-bottom-color: #344258; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) :is(.logo-main, .nav-link) { color: #f8f7f3; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .logo-sub { color: #c2cbd7; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .nav-link:is(:hover, .active) { background: #2b394d; color: #fff; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .nav-cta { background: #c4a26a; color: #101e32; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .menu-toggle span { background: #fff; }
body.ksl-page-index .site-header.site-header--hero.is-scrolled { background: #fbfaf7; box-shadow: none; }
body[class] .home-main .hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 36px; }
body[class] .home-main .hero-grid { max-width: var(--ksl-layout-max); padding-inline: 24px; } body[class] .ksl-subpage-hero { min-height: 260px; padding-block: 24px; }
body[class] .ksl-subpage-hero h1 { font-size: 32px; }
body[class] .ksl-subpage-hero--tool { min-height: 160px; padding-block: 20px; }
body[class] .ksl-subpage-hero--tool h1 { font-size: 28px; }
body[class] .ksl-subpage-hero--tool :is(.hero-desc, .faq-hero-desc, .contact-hero-desc, .loc-desc) { margin-top: 8px; }
body[class] .ksl-subpage-hero--info { background: #f1eee7; color: #172339; border-bottom: 1px solid #ded8cc; }
body[class] .ksl-subpage-hero--info .pasan-hero-desc { color: #526079; border-left-color: #d7d2c8; }
body[class] .ksl-subpage-hero--info::after { display: none; }
body[class] .home-main .section-title { font-size: clamp(28px, 3vw, 38px); margin-bottom: 22px; }
body[class] .home-main .section-header { margin-bottom: 30px; }
body[class] .home-main .section-py { padding-block: 64px; }
body[class] .pasan-card-title, body[class] .section-heading { font-size: 28px; }
body[class] :is(.pasan-hero-kicker, .hero-badge, .cases-kicker, .faq-hero-kicker, .hero-kicker, .contact-hero-kicker, .loc-kicker, .pasan-card-kicker, .sec-kicker, .faq-group-kicker, .consult-kicker, .section-kicker, .legal-kicker),
body[class] .ksl-subpage-hero :is(.pasan-hero-kicker, .hero-badge, .cases-kicker, .faq-hero-kicker, .hero-kicker, .contact-hero-kicker, .loc-kicker) { display: none; }
body[class] .home-main .section-kicker { display: none; }
body[class] .home-main .section-kicker::before, body[class] .home-main .section-kicker::after { display: none; } body[class] .desktop-consult-bar { background: #101e32; backdrop-filter: none; box-shadow: none; animation: none; border-top: 1px solid #344258; }
body[class] .ksl-consult-toggle { min-height: 68px; height: 68px; padding: 12px 24px; max-width: var(--ksl-layout-max); }
body[class] .desktop-consult-inner {
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: var(--ksl-layout-max);
max-height: calc(100dvh - var(--header-h) - 100px); overflow-y: auto; padding: 24px; gap: 24px;
background: #101e32; border: 1px solid #526079; border-radius: var(--ksl-card-radius); justify-content: space-between;
}
body[class] .desktop-consult-copy { min-width: 150px; }
body[class] .desktop-consult-form { flex: 1 1 560px; max-width: var(--ksl-form-max); min-width: 0; }
body[class] .desktop-consult-fields { display: grid; grid-template-columns: 120px 150px minmax(140px, 1fr) 68px; gap: 10px; }
body[class] .desktop-consult-field { min-width: 0; }
body[class] .desktop-consult-field--message { min-width: 0; }
body[class] .desktop-consult-input { width: 100%; background: #213047; border-color: #647080; color: #fff; border-radius: var(--ksl-card-radius); }
body[class] .desktop-consult-submit { border-radius: var(--ksl-card-radius); }
body[class] .fixed-cta-bar { background: #101e32; border-top: 1px solid #344258; backdrop-filter: none; box-shadow: none; }
body[class] .fixed-cta-bar .cta-btn { background: #101e32; color: #fff; }
body[class] .fixed-cta-bar .cta-btn.primary { background: #c4a26a; color: #101e32; } body[class] .question-wizard-ready .wizard-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997; min-height: 68px; margin: 0; padding: 12px max(24px, calc((100vw - 672px) / 2)); flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; background: #101e32; border-top: 1px solid #344258; }
body[class] .wizard-dock-label { margin-right: auto; color: #e1e6ed; font-size: 13px; white-space: nowrap; }
body[class] .wizard-controls .wizard-btn { width: auto; flex: 0 0 auto; min-width: 112px; min-height: 44px; padding: 10px 16px; border-radius: 4px; background: #c4a26a; color: #101e32; font-size: 14px; }
body[class] .wizard-controls .wizard-btn.secondary { background: transparent; color: #fff; border: 1px solid #647080; }
body[class] .wizard-controls .wizard-btn:disabled { opacity: .55; }
body[class] .wizard-details-link { display: none; min-height: 44px; align-items: center; padding: 10px 16px; background: #c4a26a; color: #101e32; font-size: 14px; font-weight: 700; border-radius: 4px; }
body[class] .is-contact-step .wizard-details-link { display: inline-flex; }
body[class] .wizard-progress-step { display: none; }
body[class] #wizardControls[hidden], body[class] .wizard-btn[hidden] { display: none; }
body[class] #selfcheckDetails { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 993px) and (max-width: 1150px) {
body[class] .site-header .nav-link { padding-inline: 7px; font-size: 13px; }
body[class] .site-header .gnb { gap: 8px; }
body[class] .site-header .nav-cta { display: none; }
}
@media (max-width: 992px) {
:root { --ksl-fixed-bottom-h: 58px; }
body[class] { --header-h: 64px; }
body[class] .site-header .logo-img { height: 34px; }
body[class] .site-header .logo-main { font-size: 18px; }
body[class] .site-header .logo-text { max-width: min(220px, calc(100vw - 112px)); }
body[class] .site-header .gnb { top: var(--header-h); height: calc(100dvh - var(--header-h)); gap: 0; border-radius: 0; box-shadow: none; background: #fbfaf7; }
body[class] .site-header .nav-list { height: auto; gap: 0; }
body[class] .site-header .nav-link { height: auto; padding: 14px 18px; font-size: 16px; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .gnb .nav-link { color: #172339; }
body.ksl-page-index .site-header.site-header--hero:not(.is-scrolled) .gnb .nav-link:is(:hover, .active) { background: #eee9df; color: #172339; }
body[class] .site-header .nav-cta { height: 46px; }
body[class] .home-main .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 32px; }
body[class] .question-wizard-ready .wizard-controls { min-height: 64px; padding: 10px 24px; }
}
@media (max-width: 768px) {
body[class] .ksl-subpage-hero { min-height: 240px; padding-block: 24px; }
body[class] .ksl-subpage-hero h1 { font-size: 27px; }
body[class] .ksl-subpage-hero--tool { min-height: 150px; padding-block: 18px; }
body[class] .ksl-subpage-hero--tool h1 { font-size: 25px; }
body.ksl-page-contact .contact-hero .inner { display: grid; grid-template-columns: 1fr; }
body.ksl-page-contact .ksl-subpage-actions { display: none; }
body[class] .ksl-subpage-hero--info .pasan-hero-desc { border: 0; padding-left: 0; }
body[class] .home-main .section-py { padding-block: 44px; }
body[class] .home-main .section-title { font-size: 28px; }
body[class] .pasan-card-title, body[class] .section-heading { font-size: 24px; }
body[class] :is(.inner, .container, .header-inner, .footer-inner, .pasan-nav, .stats-bar-inner), body[class] .sc-container,
body.ksl-page-selfcheck .ksl-subpage-hero--tool > .ksl-subpage-tool-inner { padding-inline: 18px; }
body[class] main.ksl-board-page .form-card, body.ksl-page-selfcheck main .info-section { padding: 18px; }
body[class] .wizard-controls .wizard-btn { min-width: 88px; padding: 10px 12px; font-size: 13px; }
body[class] .wizard-dock-label { font-size: 12px; }
body[class] .question-wizard-ready .wizard-controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
body[class] .wizard-details-link { font-size: 12px; padding-inline: 10px; }
body[class] .is-contact-step .wizard-dock-label { display: none; }
body.ksl-page-contact .fixed-cta-bar .fixed-cta-inner > .cta-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 16px; }
}:root,
body[class] {
--navy: #101D2F;
--navy-deep: #0B1422;
--navy-mid: #172334;
--navy-light: #243449;
--gold: #B99555;
--gold-dark: #806333;
--gold-light: #C9AA72;
--gold-muted: rgba(185, 149, 85, .12);
--text-heading: #172334;
--text-primary: #374151;
--text-secondary: #374151;
--text-muted: #596273;
--text-light: #596273;
--text-on-dark: #FFFFFF;
--text-on-dark-secondary: #D5DCE5;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-warm: #F5F3EE;
--border-light: #DDDCD6;
--border-subtle: #DDDCD6;
--ksl-card-line: #DDDCD6;
--hj-ink: #172334;
--hj-muted: #374151;
--hj-gold: #B99555;
--hj-line: #DDDCD6;
}
body[class] {
background: var(--bg-page);
color: var(--text-primary);
font-size: 17px;
line-height: 1.7;
letter-spacing: normal;
}
body[class] :is(input, select, textarea, button, summary, th, td) {
font-family: var(--font-sans);
}
body[class] :is(input, select, textarea) { font-size: 16px; }
body[class] :is(h2, h3, h4, h5, h6, .logo-main, .footer-logo-main,
.tag-name, .stat-val, .stat-num, .sol-number, .authority-number,
.profile-sig-name, .p-num, .step-num, .t-year, .overview-label,
.faq-q-text, .q-title-lg, .report-title, .cases-reading-guide li > span,
.certificate-label, .authority-certificate figcaption, .authority-promise strong,
.desktop-consult-title) {
font-family: var(--font-sans);
letter-spacing: -.02em;
}
body[class] main :is(h1, h2, h3, h4, h5, h6) { color: var(--text-heading); }
body[class] main h1 {
font-family: var(--font-serif);
font-weight: 700;
font-size: 38px;
line-height: 1.35;
letter-spacing: -.02em;
}
body[class] main h2 { font-size: 30px; font-weight: 700; line-height: 1.4; }
body[class] main :is(h3, h4, .overview-label, .q-title-lg) {
font-size: 21px; font-weight: 700; line-height: 1.5;
}
body[class] main :is(p, dd, .pasan-card-desc, .overview-text, .acc-panel-inner,
.step-desc, .intro-text, .faq-answer-inner, .case-text) {
color: var(--text-primary); font-size: 17px; line-height: 1.7;
letter-spacing: normal; text-align: left;
}
body[class] main :is(.section-header, .pasan-card-header, .faq-group-head) { text-align: left; }
body[class] main :is(button, .btn, .hj-button, .pasan-nav-link, .cs-tabs a,
.mode-btn, .dg-tabs button, .dg-case-filters button, .cases-filter-button) {
font-size: 16px; font-weight: 600; letter-spacing: normal;
}
body[class] main :is(.q-title-lg, .faq-q-text, .report-title) { color: var(--text-heading); }
body[class] main :is(.dg-calc-range, .report-result-value) {
font-family: var(--font-sans); font-size: 34px; font-weight: 700;
line-height: 1.4; font-variant-numeric: tabular-nums;
}
body[class] .ksl-subpage-hero[class] h1 {
font-family: var(--font-serif); font-size: 38px; font-weight: 700;
line-height: 1.35; letter-spacing: -.02em;
}
body[class] .home-main .section-title { font-size: 30px; line-height: 1.4; }
body[class] .home-main .section-title,
body[class] main :is(.section-heading, .pasan-card-title, .cases-head-title) {
font-family: var(--font-sans); letter-spacing: -.02em; color: var(--text-heading);
}
body[class] :is(.overview-label, .report-title) { color: var(--text-heading); }
body[class] main[class] :is(.cases-library-heading h2, .cases-head-title,
.faq-group-title, .fq-priority h2) { font-size: 30px; line-height: 1.4; } body[class] :is(.hj-home, .dg-main, .fq-main, .cs-main, .cases-main,
.cases-library, .hj-paper, .hj-credentials, .hj-consult) { background: var(--bg-page); }
body[class] .hj-home :is(.hj-paper, .hj-process) { background: var(--bg-page); }
body[class] .hj-home .hj-paper:has(.hj-comparison),
body.ksl-page-corp #sec-overview { background: var(--bg-warm); }
body[class] .hj-home { --hj-ink: #172334; --hj-muted: #374151; --hj-line: #DDDCD6; }
body[class*="ksl-page-"] .ksl-subpage-hero[class] {
background: var(--navy-deep); color: #fff;
border-bottom-color: var(--navy-light);
}
body[class*="ksl-page-"] .ksl-subpage-hero[class] :is(h1, .cases-title, .cases-title > span) { color: #fff; }
body[class*="ksl-page-"] .ksl-subpage-hero[class] :is(.hero-kicker, .pasan-hero-kicker, .cases-kicker, .faq-hero-kicker, .contact-hero-kicker, .loc-kicker) { color: var(--gold-light); }
body[class*="ksl-page-"] .ksl-subpage-hero[class] :is(p, .hero-desc, .pasan-hero-desc, .cases-desc,
.faq-hero-desc, .contact-hero-desc, .loc-desc) {
color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.7;
border-left-color: rgba(185,149,85,.55);
}
body[class*="ksl-page-"] main .ksl-subpage-hero[class] :is(p, .hero-desc, .pasan-hero-desc, .cases-desc) {
color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.7;
}
body[class] main :is(.section-desc, .diff-desc, .s-content p, .hj-guide,
.hj-stage-details p, .hj-audience > p, .case-preview-summary,
.case-preview-facts dd, .case-specs li) { color: var(--text-primary); }
body[class] main :is(.hj-process h2, .hj-process h3) { color: var(--text-heading); }
body[class] .hj-home .hj-process .hj-timeline a {
color: var(--text-primary); border-top-color: var(--border-light);
}
body[class] .hj-home .hj-process .hj-timeline a[aria-current=step] {
color: var(--text-heading); border-top-color: var(--gold);
}
body[class] .hj-home .hj-process :is(.hj-timeline span, .hj-step-label, .hj-small-label, .hj-text-link) {
color: var(--gold-dark);
} body[class] main :is(.hj-footnote, .hj-proof-points p, .hj-certificate figcaption,
.hj-video figcaption, .dg-small, .dg-note, .dg-answer-help p,
.hj-footnote, .cs-help, .cs-privacy p, .cs-panel-heading p, .fq-note,
.case-note, .case-doc figcaption, .cases-reading-note, .q-desc-box,
.hint-text, .form-desc, .form-hint, .contact-receipt-note,
.privacy-check, .privacy-text, .photo-caption, .t-desc, .cases-head-sub) {
color: var(--text-muted); font-size: 14px; line-height: 1.7; text-align: left;
}
body[class] main :is(.dg-budget-visual figcaption, .hj-credentials small,
.cases-reading-guide p, .hj-portrait figcaption) { font-size: 14px; line-height: 1.7; }
body[class] main :is(.hj-step-label, .hj-small-label, .hj-case-type,
.case-q-label, .cases-hero-link, .cases-section-count, .t-year, .tag-role,
.hj-text-link, .dg-eyebrow, .faq-q-label, .case-preview-facts dt,
.ksl-explore-action, .certificate-label) { color: var(--gold-dark); } body[class] .site-header,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) {
background: var(--navy); border-bottom-color: var(--navy-light);
}
body[class] .site-header :is(.logo-main, .nav-link),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) :is(.logo-main, .nav-link) { color: #FFF; }
body[class] .site-header .logo-sub,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .logo-sub { color: var(--text-on-dark-secondary); }
body[class] .site-header .nav-link:is(:hover, .active),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .nav-link:is(:hover, .active) {
color: #FFF; background: var(--navy-light);
}
body[class] .site-header .menu-toggle span,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .menu-toggle span { background: #FFF; }
body[class] .site-header .nav-cta,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .nav-cta {
background: var(--gold); color: var(--navy-deep); font-size: 15px; font-weight: 600;
}
body[class] .site-header .nav-link { font-size: 15px; font-weight: 600; }
body[class] .site-footer { background: var(--navy); }
body[class] .site-footer :is(.footer-logo-main, h4) { color: #FFF; }
body[class] .site-footer :is(.footer-desc, .footer-contact, .footer-notice,
.footer-bottom, .footer-logo-sub, .footer-links a) {
color: var(--text-on-dark-secondary); font-size: 14px; line-height: 1.7;
} body[class] .hj-home .hj-hero, body[class] .home-main .hero { background: var(--navy-deep); }
body[class] main :is(.hj-hero, .hero, .consult-section, .consult-card, .cta-box) :is(h1, h2, h3) { color: #FFF; }
body[class] main :is(.hj-hero h1, .hero-content h1) { font-size: 50px; line-height: 1.35; }
body[class] .hj-home .hj-hero h1 { font-size: 50px; line-height: 1.35; letter-spacing: -.02em; }
body[class] main :is(.hj-hero h1 span, .hero-content h1 .highlight) { color: var(--gold); }
body[class] main :is(.hj-hero, .hero, .consult-section, .consult-card, .cta-box) p,
body[class] .hj-home .hj-audience > p,
body[class] .hj-home .hj-portrait figcaption { color: var(--text-on-dark-secondary); }
body[class] main :is(.consult-section, .cta-box) { background: var(--navy); } body[class] :is(.case-detail-hero, .legal-hero, .error-hero) { background: var(--navy-deep); border-bottom: 0; }
body[class] .error-hero { padding-block: 48px; margin-bottom: var(--ksl-content-gap); }
body[class] :is(.case-detail-hero, .legal-hero, .error-hero) h1 { color: #FFF; }
body[class] :is(.case-detail-hero, .legal-hero, .error-hero) p { color: var(--text-on-dark-secondary); }
body[class] .case-detail-hero .case-detail-kicker { color: var(--gold-light); }
body[class] .case-detail-hero .case-decision-badge { background: var(--gold); color: var(--navy-deep); }
body[class] .ksl-404-actions { display: flex; flex-wrap: wrap; gap: var(--ksl-action-gap); margin-bottom: var(--ksl-section-space); }
body[class] .ksl-404-actions .wp-block-button__link {
display: inline-flex; align-items: center; min-height: var(--ksl-action-height); padding: 10px 20px;
border: 1px solid var(--navy); border-radius: var(--ksl-action-radius); background: transparent; color: var(--navy); font-weight: 600;
}
body[class] .ksl-404-actions .wp-block-button__link:not(.is-style-outline) { border-color: var(--gold); background: var(--gold); color: var(--navy-deep); }
body[class] main :is(.consult-section, .cta-box) :is(.privacy-check, .form-hint, .form-desc) {
color: var(--text-on-dark-secondary);
}
body[class] main .gold { color: var(--gold-dark); }
body[class] main :is(.hero, .consult-section, .cta-box) .gold { color: var(--gold); } body[class] main :is(.btn-primary, .cta-btn, .consult-submit, .submit-btn,
.btn-submit-main, .btn-gold, .hj-button:not(.hj-button-outline), .cases-consult-primary),
body[class] .desktop-consult-submit,
body[class] .fixed-cta-bar .cta-btn.primary,
body[class] .ksl-dock-primary,
body[class] .wizard-controls :is(.wizard-btn:not(.secondary), .wizard-details-link) {
background: var(--gold); color: var(--navy-deep); border-color: var(--gold);
}
body[class] .hj-home .hj-choice button[aria-selected=true],
body[class] main .dg-tabs button[aria-selected=true] {
background: var(--gold); color: var(--navy-deep); border-color: var(--gold);
}
body[class] main .cases-consult-secondary { color: var(--gold-dark); } body[class] :is(.desktop-consult-bar, .desktop-consult-inner, .fixed-cta-bar,
.ksl-contact-dock, .question-wizard-ready .wizard-controls) {
background: var(--navy); color: #FFF; border-color: var(--navy-light);
}
body[class] :is(.ksl-consult-toggle, .desktop-consult-title,
.ksl-contact-dock-inner, .wizard-dock-label),
body[class] .fixed-cta-bar .cta-btn:not(.primary) { color: #FFF; }
body[class] .fixed-cta-bar .cta-btn:not(.primary) { background: var(--navy); }
body[class] :is(.ksl-consult-toggle-label, .desktop-consult-sub,
.desktop-consult-privacy, .desktop-consult-privacy-link, .desktop-consult-status) {
color: var(--text-on-dark-secondary); font-size: 14px; line-height: 1.7;
}
body[class] .desktop-consult-title { font-size: 21px; }
body[class] .desktop-consult-input {
background: #FFF; color: var(--text-primary); font-size: 16px;
border-color: var(--border-light);
}
body[class] .desktop-consult-input::placeholder { color: var(--text-muted); opacity: 1; }
body[class] .desktop-consult-status[data-tone=success] { color: #FFF; }
body[class] .desktop-consult-status[data-tone=error] { color: #FCA5A5; }
body[class] .desktop-consult-bar .desktop-consult-submit:hover {
background: var(--gold-light); color: var(--navy-deep); border-color: var(--gold-light);
}
body[class] .desktop-consult-submit { font-size: 16px; font-weight: 600; }
body[class] .fixed-cta-bar .cta-label-main { font-size: 15px; font-weight: 600; }
body[class] .fixed-cta-bar .cta-btn.primary:hover { background: var(--gold-light); color: var(--navy-deep); }
@media (max-width: 992px) {
body[class] .site-header .gnb { background: #FFF; }
body[class] .site-header .gnb .nav-link,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .gnb .nav-link { color: var(--text-heading); }
body[class] .site-header .gnb .nav-link:is(:hover, .active),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .gnb .nav-link:is(:hover, .active) {
background: var(--gold-muted); color: var(--text-heading);
}
}
@media (max-width: 768px) {
body[class] { font-size: 16px; line-height: 1.7; }
body[class] main h1 { font-size: 29px; }
body[class] .ksl-subpage-hero[class] h1 { font-size: 29px; }
body[class] main :is(.hj-hero h1, .hero-content h1) { font-size: 32px; }
body[class] .hj-home .hj-hero h1 { font-size: 32px; }
body[class] main h2 { font-size: 25px; }
body[class] .home-main .section-title { font-size: 25px; }
body[class] main[class] :is(.cases-library-heading h2, .cases-head-title,
.faq-group-title, .fq-priority h2) { font-size: 25px; }
body[class] main :is(h3, h4, .overview-label, .q-title-lg) { font-size: 19px; }
body[class] main :is(p, dd, .pasan-card-desc, .overview-text, .acc-panel-inner,
.step-desc, .intro-text, .faq-answer-inner, .case-text),
body[class] .ksl-subpage-hero :is(p, .hero-desc, .pasan-hero-desc, .cases-desc,
.faq-hero-desc, .contact-hero-desc, .loc-desc) { font-size: 16px; }
body[class] main .ksl-subpage-hero[class] :is(p, .hero-desc, .pasan-hero-desc, .cases-desc) { font-size: 16px; }
body[class] main :is(.dg-calc-range, .report-result-value) { font-size: 30px; }
body[class] .cs-main .cs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[class] .cs-main .cs-tabs a {
min-width: 0; padding-inline: 8px; font-size: 15px; white-space: normal; text-align: center;
}
body[class] main :is(.hj-footnote, .hj-proof-points p, .hj-certificate figcaption,
.hj-video figcaption, .dg-small, .dg-note, .dg-answer-help p, .cs-help,
.cs-privacy p, .cs-panel-heading p, .fq-note, .case-note, .case-doc figcaption,
.cases-reading-note, .q-desc-box, .hint-text, .form-desc, .form-hint,
.contact-receipt-note, .privacy-check, .privacy-text, .photo-caption,
.t-desc, .cases-head-sub) { font-size: 14px; }
}  :root,
body[class] {
--ksl-content-max: 1160px;
--ksl-reading-max: 760px;
--ksl-selfcheck-max: 680px;
--ksl-form-max: 720px;
--ksl-page-gutter: 32px;
--ksl-layout-max: calc(var(--ksl-content-max) + 2 * var(--ksl-page-gutter));
--max-width: var(--ksl-layout-max);
--ksl-section-space: 80px;
--ksl-title-gap: 16px;
--ksl-content-gap: 32px;
--ksl-item-gap: 24px;
--ksl-field-gap: 24px;
--ksl-column-gap: 48px;
} body[class] :is(.inner, .container, .header-inner, .footer-inner, .pasan-nav,
.stats-bar-inner, .dg-container, .sc-container, .ksl-subpage-tool-inner),
body[class] .legal-main :is(.container, .inner),
body[class] .fq-main :is(.fq-content, .fq-hero > .inner),
body[class] .dg-main .dg-hero > .inner,
body[class] .ksl-subpage-hero > .inner,
body.ksl-page-selfcheck .ksl-subpage-hero--tool > .ksl-subpage-tool-inner {
width: 100%; max-width: var(--ksl-layout-max);
margin-inline: auto; padding-inline: var(--ksl-page-gutter);
}
body[class] :is(.site-footer, .hero-area, .dg-hero, .consult-section, .cta-box) { padding-inline: 0; }
body[class] .dg-main .dg-hero { padding-inline: 0; }
body[class] .home-main :is(.container, .hero-grid) { padding-inline: var(--ksl-page-gutter); }
body[class] :is(.footer-notice, .footer-bottom) {
width: 100%; max-width: var(--ksl-layout-max);
margin-inline: auto; padding-inline: var(--ksl-page-gutter);
}
body[class] .footer-line { max-width: var(--ksl-content-max); width: calc(100% - 2 * var(--ksl-page-gutter)); }
body[class] :is(.ksl-consult-toggle, .ksl-contact-dock-inner) {
max-width: var(--ksl-layout-max); padding-inline: var(--ksl-page-gutter);
}
body[class] .desktop-consult-inner {
max-width: var(--ksl-layout-max); width: 100%; padding-inline: var(--ksl-page-gutter);
} body[class] :is(.intro-text, .case-text, .case-summary, .pasan-card-desc,
.acc-panel-inner, .profile-editorial, .dg-stage-content, .dg-section-heading,
.dg-disclosure > p, .dg-term > p, .dg-note, .legal-desc) { max-width: var(--ksl-reading-max); }
body[class] .fq-main :is(.fq-keywords, .fq-topics, .fq-priority, .faq-section,
.fq-consult, .fq-source),
body[class] .legal-card { max-width: var(--ksl-reading-max); margin-inline: 0; }
body[class] .sc-container .main-card,
body.ksl-page-selfcheck main .info-section { width: 100%; max-width: var(--ksl-selfcheck-max); margin-inline: 0; padding-inline: 0; }
body[class] .sc-container { padding-block: var(--ksl-content-gap) var(--ksl-section-space); }
body[class] .sc-container .main-card { margin-top: 0; }
body[class] .section-header { margin-inline: 0; max-width: var(--ksl-reading-max); }
body.ksl-page-single :is(.page-head, .wp-content) { max-width: var(--ksl-reading-max); margin-inline: 0; } body[class] .ksl-subpage-hero[class] { min-height: 0; padding-block: 48px; }
body[class] .ksl-subpage-hero--tool[class] { padding-block: 32px; }
body[class] .ksl-subpage-hero[class] > .inner { display: block; }
body[class] .ksl-subpage-hero[class] h1 { margin: 0; }
body[class] .ksl-subpage-hero[class] :is(.hero-desc, .pasan-hero-desc,
.cases-desc, .faq-hero-desc, .contact-hero-desc, .loc-desc, .dg-hero p, .fq-hero p, .cs-hero p) {
max-width: var(--ksl-reading-max); margin: var(--ksl-title-gap) 0 0;
padding-left: 0; border-left: 0;
}
body[class] .dg-main .dg-hero > .inner { display: flex; flex-direction: column; align-items: flex-start; }
body[class] .dg-main .dg-hero :is(.dg-button, .dg-hero-actions) { margin-top: var(--ksl-content-gap); }
body[class] .ksl-subpage-hero .cases-hero-link { margin-top: var(--ksl-content-gap); }
body[class] .hj-home .hj-hero { padding-block: calc(var(--header-h) + 48px) 48px; }
body[class] .hj-home .hj-hero h1 { margin-bottom: var(--ksl-title-gap); }
body[class] .hj-home .hj-hero-desc { margin-bottom: var(--ksl-content-gap); } body[class] main :is(.hj-section, .section-py, .dg-section, .loc-section)[class],
body[class] .fq-main :is(.faq-section, .fq-consult),
body[class] .cs-main .cs-panel,
body[class] main .pasan-section-card[class],
body[class] .home-main .section-py { padding-block: var(--ksl-section-space); }
body[class] .cases-main .cases-library { padding-block: var(--ksl-section-space); }
body[class] .cases-main .cases-section { padding-top: var(--ksl-section-space); }
body[class] :is(.location-wrap, .contact-main, .faq-main) { padding-bottom: 0; }
body[class] main :is(.section-header, .pasan-card-header, .dg-section-heading,
.faq-group-head, .cases-library-heading, .cases-head, .cs-panel-heading,
.sec-header, .hj-heading-row) { margin-bottom: var(--ksl-content-gap); }
body[class] main :is(.section-header, .pasan-card-header, .dg-section-heading,
.faq-group-head, .cases-head, .cs-panel-heading, .sec-header, .hj-section-head) :is(h2, h3) { margin-bottom: 0; }
body[class] main :is(.section-header, .pasan-card-header, .dg-section-heading,
.faq-group-head, .cases-head, .cs-panel-heading, .hj-section-head) > p:not([class*="label"]),
body[class] .hj-home .hj-section-head > p:not(.hj-step-label) { margin: var(--ksl-title-gap) 0 0; }
body[class] .hj-home .hj-heading-row { flex-direction: column; align-items: flex-start; gap: var(--ksl-title-gap); }
body[class] .sec-header { align-items: flex-start; flex-direction: column; gap: var(--ksl-title-gap); }
body[class] .ksl-subpage-actions { margin-top: var(--ksl-content-gap); }
body[class] .ksl-subpage-actions a { justify-content: flex-start; }
body[class] .legal-hero { padding-block: 48px var(--ksl-content-gap); }
body[class] .legal-section { padding-block: var(--ksl-content-gap) var(--ksl-section-space); }
body[class] .legal-wrap { gap: 0; }
body[class] main .legal-card { padding-block: 40px; }
body[class] .legal-card h2 { margin-bottom: var(--ksl-title-gap); } body[class] :is(.hj-hero-layout, .hj-split, .hj-consult-grid, .hj-proof,
.hj-comparison, .profile-card, .dg-check-layout, .dg-calculator,
.dg-consult-layout, .dg-bankruptcy-compare, .cs-new-layout, .case-body,
.cases-consult) { gap: var(--ksl-column-gap); }
body[class] main .profile-content { padding: 0; }
body[class] main :is(.diff-grid, .service-list, .trans-grid, .case-list,
.hj-case-grid, .dg-case-grid, .dg-doc-groups, .ksl-explore-grid) { gap: var(--ksl-item-gap); }
body[class] main .select-grid { gap: var(--ksl-item-gap); }
body[class] main .dg-options { gap: var(--ksl-item-gap); }
body[class] main :is(.service-list, .trans-grid, .case-list, .dg-core-conditions) { column-gap: var(--ksl-column-gap); }
body[class] main :is(.hj-stage-details, .dg-review-result) { min-height: 0; }
body[class] main .hj-section-head .hj-situation-choices { margin-top: var(--ksl-content-gap); }
body[class] main :is(.q-item, .dg-question) { margin-bottom: var(--ksl-field-gap); }
body[class] main :is(.form-group, .dg-field) { margin-bottom: var(--ksl-field-gap); }
body[class] main :is(.hj-form, .contact-form) .form-group { margin-bottom: var(--ksl-field-gap); }
body[class] .dg-main .dg-field { margin-top: var(--ksl-field-gap); margin-bottom: 0; }
body[class] main :is(.form-grid-two, .form-row) { gap: var(--ksl-field-gap); }
body[class] main .form-grid-two > .form-group { margin-bottom: 0; }
body[class] main .form-grid-two { margin-bottom: var(--ksl-field-gap); }
body[class] main :is(.hj-form, .contact-form) .form-grid-two {
gap: var(--ksl-field-gap); margin-bottom: var(--ksl-field-gap);
}
body[class] main :is(.hj-form, .contact-form) .form-grid-two > .form-group { margin-bottom: 0; }
body[class] .cases-main .cases-head { row-gap: 0; }
body[class] .sc-container .mode-tabs { margin-bottom: var(--ksl-title-gap); }
body[class] .sc-container .ksl-selfcheck-intro { margin: 0 0 var(--ksl-content-gap); }
body[class] .cs-main .ksl-contact-intro { max-width: var(--ksl-reading-max); margin: 0 0 var(--ksl-content-gap); } body[class] .cs-main .cs-panel { padding-top: 0; }
body[class] .cs-main .cs-content { padding-bottom: 0; }
body[class] .question-wizard-ready .wizard-controls {
--wizard-content-left: max(var(--ksl-page-gutter), calc((100vw - var(--ksl-content-max)) / 2));
--wizard-content-width: min(var(--ksl-selfcheck-max), calc(100vw - 2 * var(--wizard-content-left)));
padding-left: var(--wizard-content-left);
padding-right: calc(100vw - var(--wizard-content-left) - var(--wizard-content-width));
}
@media (max-width: 768px) {
:root, body[class] {
--ksl-page-gutter: 20px;
--ksl-section-space: 44px;
--ksl-title-gap: 12px;
--ksl-content-gap: 24px;
--ksl-item-gap: 16px;
--ksl-field-gap: 20px;
--ksl-column-gap: 24px;
}
body[class] .ksl-subpage-hero[class] { padding-block: 32px; }
body[class] .ksl-subpage-hero--tool[class] { padding-block: 24px; }
body[class] .hj-home .hj-hero { padding-block: calc(var(--header-h) + 32px) 32px; }
body[class] :is(.hj-hero-layout, .hj-split, .hj-consult-grid, .hj-proof,
.hj-comparison, .profile-card, .dg-check-layout, .dg-calculator,
.dg-consult-layout, .dg-bankruptcy-compare, .cs-new-layout, .case-body,
.cases-consult, .service-list, .trans-grid, .case-list, .hj-case-grid,
.dg-case-grid, .select-grid, .form-grid-two, .form-row, .dg-core-conditions,
.dg-doc-groups, .hj-greeting-body, .photo-grid, .footer-inner) {
grid-template-columns: minmax(0, 1fr);
}
body[class] main :is(.hj-form, .contact-form) .form-grid-two { grid-template-columns: minmax(0, 1fr); }
body[class] .sc-container, body[class] .fq-main .fq-content { padding-top: var(--ksl-content-gap); }
body[class] .legal-hero { padding-block: 32px var(--ksl-content-gap); }
body[class] main .legal-card { padding-block: var(--ksl-content-gap); }
body[class] main .hj-hero-copy,
body[class] main .hj-section-head { display: flex; flex-direction: column; align-items: flex-start; }
body[class] main .hj-hero-copy > .hj-eyebrow { order: 0; }
body[class] main .hj-hero-copy > h1 { order: 1; }
body[class] main .hj-hero-copy > .hj-hero-desc { order: 2; }
body[class] main .hj-hero-copy > .hj-hero-proof { order: 3; }
body[class] main .hj-hero-copy > .hj-choice { order: 4; margin-bottom: var(--ksl-title-gap); }
body[class] main .hj-hero-copy > .hj-audience { order: 5; width: 100%; }
body[class] main .hj-hero-copy > .hj-hero-phone { order: 6; }
body[class] main .hj-audience { display: flex; flex-direction: column; }
body[class] main .hj-audience > .hj-actions { order: -1; }
body[class] main .hj-section-head > .hj-step-label { order: 0; }
body[class] main .hj-section-head > h2 { order: 1; }
body[class] main .hj-section-head > .hj-situation-choices { order: 2; width: 100%; margin-top: var(--ksl-content-gap); }
body[class] main .hj-section-head > p:not(.hj-step-label) { order: 3; }
body[class] .dg-main .dg-hero h1 { order: 0; }
body[class] .dg-main .dg-hero :is(.dg-button, .dg-hero-actions) { order: 1; margin-top: var(--ksl-title-gap); }
body[class] .dg-main .dg-hero p { order: 2; }
body[class] .cases-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
body[class] .cases-hero-copy h1 { order: 0; }
body[class] .cases-hero-copy .cases-hero-link { order: 1; margin-top: var(--ksl-title-gap); }
body[class] .cases-hero-copy p { order: 2; }
}  body[class] { --header-h: 78px; }
body[class] .site-header[data-ksl-header],
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) {
--header-fill: var(--navy);
--header-ink: #FFFFFF;
--header-muted: var(--text-on-dark-secondary);
--header-selected: rgba(255, 255, 255, .12);
--header-line: var(--navy-light);
height: var(--header-h); background: var(--header-fill);
border-bottom: 1px solid var(--header-line); box-shadow: none; backdrop-filter: none;
}
body[class] .site-header[data-ksl-header].is-scrolled,
body.ksl-page-index .site-header.site-header--hero.is-scrolled {
--header-fill: #FFFFFF;
--header-ink: var(--text-heading);
--header-muted: var(--text-muted);
--header-selected: var(--bg-warm);
--header-line: var(--border-light);
}
body[class] .site-header .header-inner {
width: 100%; max-width: var(--ksl-layout-max); margin-inline: auto;
padding-inline: var(--ksl-page-gutter); height: var(--header-h); gap: 24px;
}
body[class] .site-header .logo-area { width: 240px; max-width: 240px; flex: 0 0 240px; }
body[class] .site-header .logo-text { min-width: 0; max-width: none; }
body[class] .site-header .logo-main {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; line-height: 1.2;
word-break: keep-all;
}
body[class] .site-header[data-ksl-header] :is(.logo-main, .nav-link),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) :is(.logo-main, .nav-link) { color: var(--header-ink); }
body[class] .site-header[data-ksl-header] .logo-sub,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .logo-sub { color: var(--header-muted); }
body[class] .site-header .gnb { flex: 1 1 auto; min-width: 0; gap: 24px; justify-content: flex-end; }
body[class] .site-header .nav-list { gap: 24px; height: 100%; }
body[class] .site-header .nav-item { height: 100%; padding: 0; }
body[class] .site-header .nav-link { height: 44px; padding-inline: 4px; font-size: 15px; font-weight: 600; white-space: nowrap; }
body[class] .site-header a { transition: color var(--ksl-motion) ease, background-color var(--ksl-motion) ease, border-color var(--ksl-motion) ease; }
body[class] .site-header[data-ksl-header] .nav-link:is(:hover, :focus-visible, .active, [aria-current=page]),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .nav-link:is(:hover, :focus-visible, .active, [aria-current=page]) {
color: var(--header-ink); background: var(--header-selected);
}
body[class] .site-header .nav-link::after {
content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0;
width: 100%; height: 2px; background: var(--gold); transform: scaleX(0);
transition: transform .2s ease;
}
body[class] .site-header .nav-link:is(.active, [aria-current=page], :hover, :focus-visible)::after { transform: scaleX(1); }
body[class] .site-header[data-ksl-header] .nav-cta,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .nav-cta {
display: inline-flex; height: 44px; min-height: 44px; padding: 0 20px;
flex-shrink: 0; color: var(--navy-deep); background: var(--gold);
font-size: 15px; font-weight: 600; white-space: nowrap;
}
body[class] .site-header .sub-menu { border-radius: 4px; top: 100%; transition: opacity .2s ease, transform .2s ease; }
body[class] .site-header .sub-menu a[aria-current=page] { background: var(--bg-warm); color: var(--text-heading); border-bottom: 2px solid var(--gold); }
body[class] .site-header[data-ksl-header] .nav-item > .sub-menu { opacity: 0; visibility: hidden; }
body[class] .site-header[data-ksl-header] .nav-item.submenu-open > .sub-menu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
body[class] .site-header :is(.nav-link, .nav-cta, .menu-toggle, .sub-menu a, .mobile-service-links a):focus-visible {
outline: 2px solid var(--gold-dark); outline-offset: 3px;
}
body[class] .site-header :is(.mobile-service-links, .menu-toggle, .menu-backdrop) { display: none; }
@media (max-width: 1199px) {
body[class] .site-header .header-inner { justify-content: space-between; }
body[class] .site-header .menu-toggle {
display: block; position: relative; z-index: 1003;
flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: transparent;
}
body[class] .site-header .menu-toggle span,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .menu-toggle span {
width: 22px; left: 11px; height: 2px; background: var(--header-ink);
}
body[class] .site-header .menu-toggle span:nth-child(1) { top: 14px; }
body[class] .site-header .menu-toggle span:nth-child(2) { top: 22px; transform: none; }
body[class] .site-header .menu-toggle span:nth-child(3) { top: 30px; bottom: auto; }
body[class] .site-header .menu-toggle.active span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body[class] .site-header .menu-toggle.active span:nth-child(2) { opacity: 0; }
body[class] .site-header .menu-toggle.active span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
body[class] .site-header .gnb {
position: fixed; top: var(--header-h); right: -100%; z-index: 1002;
width: min(100%, 380px); height: calc(100dvh - var(--header-h));
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 0;
border: 0; border-left: 1px solid var(--border-light); border-radius: 0;
background: #FFF; color: var(--text-heading); box-shadow: none; overflow-y: auto;
visibility: hidden; transition: right .2s ease, visibility .2s;
}
body[class] .site-header .gnb.open { right: 0; visibility: visible; }
body[class] .site-header .nav-list {
display: flex; flex-direction: column; gap: 4px; width: 100%; height: auto;
flex: 0 0 auto; overflow: visible; margin-bottom: 24px;
}
body[class] .site-header .nav-item { height: auto; width: 100%; display: block; border: 0; }
body[class] .site-header .gnb .nav-link,
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .gnb .nav-link {
display: flex; align-items: center; width: 100%; min-height: 44px; height: auto;
padding: 12px; margin: 0; font-size: 15px; color: var(--text-heading);
}
body[class] .site-header .gnb .nav-link:is(.active, [aria-current=page], :hover, :focus-visible),
body.ksl-page-index .site-header.site-header--hero:is(.is-scrolled, :not(.is-scrolled)) .gnb .nav-link:is(.active, [aria-current=page], :hover, :focus-visible) {
color: var(--text-heading); background: var(--bg-warm);
}
body[class] .site-header .gnb .nav-cta {
width: 100%; height: 44px; min-height: 44px; margin: auto 0 0; justify-content: center;
}
body[class] .site-header .mobile-service-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
body[class] .mobile-service-label { grid-column: 1 / -1; font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
body[class] .mobile-service-links a {
display: flex; justify-content: center; align-items: center; min-height: 48px;
border: 1px solid var(--border-light); border-radius: 4px;
color: var(--text-heading); font-size: 15px; font-weight: 600;
}
body[class] .mobile-service-links a[aria-current=page] { background: var(--bg-warm); border-bottom: 2px solid var(--gold); }
body[class] .site-header .gnb .ksl-services-menu { display: none; }
body[class] .site-header .gnb .sub-menu {
position: static; top: auto; width: 100%; margin: 4px 0 8px; padding: 4px;
display: none; opacity: 1; visibility: visible; transform: none;
background: var(--bg-warm); box-shadow: none; border: 1px solid var(--border-light);
}
body[class] .site-header[data-ksl-header] .gnb .nav-item.submenu-open > .sub-menu { display: block; transform: none; opacity: 1; visibility: visible; }
body[class] .site-header .gnb .sub-menu a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 12px; color: var(--text-heading); }
body[class] .site-header .menu-backdrop:not([hidden]) {
display: block; position: fixed; z-index: 1001; top: var(--header-h); bottom: 0; left: 0; right: 0;
width: 100%; padding: 0; background: rgba(11, 20, 34, .28); cursor: default;
}
body.ksl-menu-open :is(.fixed-cta-bar, .desktop-consult-bar, .wizard-controls) { visibility: hidden; }
}
@media (max-width: 992px) {
body[class] { --header-h: 64px; }
body[class] .site-header .header-inner { gap: 16px; }
body[class] .site-header .logo-area { width: 200px; max-width: 200px; flex-basis: 200px; }
body[class] .site-header .logo-main { font-size: 18px; }
body[class] .site-header .logo-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body[class] .site-header .gnb,
body[class] .site-header .sub-menu,
body[class] .site-header a,
body[class] .site-header .nav-link,
body[class] .site-header .nav-link::after { transition: none; }
}  :root {
--ksl-action-height: 48px;
--ksl-action-radius: 5px;
--ksl-action-gap: 12px;
--ksl-action-disabled-bg: #ECEDEF;
--ksl-action-disabled-text: #8A9099;
--ksl-action-disabled-border: #D9DCE1;
} body[class] main :is(.hj-actions, .dg-hero-actions, .btn-group, .sec-actions,
.cases-consult-actions, .btn-action-group, .cs-success-actions, .fq-empty-actions) {
gap: var(--ksl-action-gap);
}
body[class] .report-box .btn-action-group { gap: var(--ksl-action-gap); } body[class] main :is(.hj-button:not(.hj-button-outline), .dg-button, .consult-submit,
.submit-btn, .btn-submit-main, .btn-primary, .cta-btn, .consult-btn,
.cases-consult-primary, .fq-consult a, .fq-empty-primary,
.ksl-board-button:not(.ksl-board-button-secondary), .cs-button-primary, .btn-action.primary),
body[class] .report-box .btn-primary,
body[class] .wizard-controls :is(.wizard-btn:not(.secondary), .wizard-details-link) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--ksl-action-height);
padding: 10px 20px;
border: 1px solid var(--gold);
border-radius: var(--ksl-action-radius);
background: var(--gold);
color: var(--navy-deep);
font-size: 15px;
font-weight: 600;
line-height: 1.7;
text-align: center;
text-decoration: none;
}
body[class] main :is(.hj-button:not(.hj-button-outline), .dg-button, .consult-submit,
.submit-btn, .btn-submit-main, .btn-primary, .cta-btn, .consult-btn,
.cases-consult-primary, .fq-consult a, .fq-empty-primary,
.ksl-board-button:not(.ksl-board-button-secondary), .cs-button-primary, .btn-action.primary):hover,
body[class] .report-box .btn-primary:hover,
body[class] .wizard-controls :is(.wizard-btn:not(.secondary), .wizard-details-link):hover {
border-color: var(--gold-light);
background: var(--gold-light);
color: var(--navy-deep);
} body[class] main :is(.hj-button-outline, .btn-secondary, .btn-ghost, .btn-outline,
.btn-action.secondary, .cases-consult-secondary, .cs-button-secondary,
.ksl-board-button-secondary, .fq-empty-secondary, .cs-board-filter button),
body[class] .report-box .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--ksl-action-height);
padding: 10px 20px;
border: 1px solid var(--navy);
border-radius: var(--ksl-action-radius);
background: transparent;
color: var(--navy);
font-size: 15px;
font-weight: 600;
line-height: 1.7;
text-align: center;
text-decoration: none;
}
body[class] main :is(.hj-button-outline, .btn-secondary, .btn-ghost, .btn-outline,
.btn-action.secondary, .cases-consult-secondary, .cs-button-secondary,
.ksl-board-button-secondary, .fq-empty-secondary, .cs-board-filter button):hover,
body[class] .report-box .btn-secondary:hover {
border-color: var(--navy-deep);
background: #F5F3EE;
color: var(--navy-deep);
} body[class] main :is(.hj-hero, .consult-card)
:is(.hj-button-outline, .btn-secondary, .btn-ghost, .btn-outline),
body[class] .wizard-controls .wizard-btn.secondary {
min-height: var(--ksl-action-height);
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--ksl-action-radius);
background: transparent;
color: #FFF;
}
body[class] main :is(.hj-hero, .consult-card)
:is(.hj-button-outline, .btn-secondary, .btn-ghost, .btn-outline):hover,
body[class] .wizard-controls .wizard-btn.secondary:hover {
border-color: #FFF;
background: rgba(255, 255, 255, .08);
color: #FFF;
} body[class] main :is(.hj-choice, .hj-situation-choices, .hj-case-filters, .dg-tabs, .dg-case-filters,
.mode-tabs, .fq-topics > div, .cs-tabs, .cases-filter) {
gap: var(--ksl-action-gap);
}
body[class] main .hj-choice {
padding: 0;
border: 0;
background: transparent;
}
body[class] main .hj-situation-choices { gap: var(--ksl-action-gap); border-top: 0; }
body[class] main .mode-tabs { border-bottom: 0; }
body[class] main :is(.hj-choice button, .hj-situation-choices button, .hj-case-filters button,
.dg-tabs button, .dg-case-filters button, .mode-btn, .fq-topics button,
.cs-tabs a, .cases-filter-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--ksl-action-height);
padding: 10px 16px;
margin: 0;
border: 1px solid var(--border-light);
border-radius: var(--ksl-action-radius);
background: #FFF;
color: var(--text-heading);
font-size: 15px;
font-weight: 600;
line-height: 1.7;
text-align: center;
text-decoration: none;
}
body[class] main :is(.hj-choice button[aria-selected="true"],
.hj-situation-choices button[aria-selected="true"],
.hj-case-filters button[aria-pressed="true"], .dg-tabs button[aria-selected="true"],
.dg-case-filters button[aria-pressed="true"], .mode-btn.active,
.mode-btn[aria-selected="true"], .fq-topics button[aria-pressed="true"],
.cs-tabs a[aria-selected="true"], .cases-filter-button.is-selected,
.cases-filter-button[aria-pressed="true"]) {
border-color: var(--navy);
background: var(--navy);
color: #FFF;
}
body[class] main.hj-home .hj-choice button[aria-selected="true"] {
border-color: var(--navy);
background: var(--navy);
color: #FFF;
}
body[class] main.hj-home .hj-situation-choices button[aria-selected="true"],
body[class] main.dg-main :is(.dg-tabs button[aria-selected="true"], .dg-case-filters button[aria-pressed="true"]),
body[class] main.sc-container .mode-btn:is(.active, [aria-selected="true"]),
body[class] main.fq-main .fq-topics button[aria-pressed="true"],
body[class] main.cs-main .cs-tabs a[aria-selected="true"],
body[class] main.cases-main .cases-filter-button:is(.is-selected, [aria-pressed="true"]) {
border-color: var(--navy) !important;
background: var(--navy) !important;
color: #FFF !important;
}
body.ksl-page-contact main.cs-main .cs-tabs a[aria-selected="true"] {
border-color: #101D2F !important;
background: #101D2F !important;
color: #FFF !important;
}
body[class] main :is(.hj-choice button[aria-selected="true"],
.hj-situation-choices button[aria-selected="true"],
.hj-case-filters button[aria-pressed="true"], .dg-tabs button[aria-selected="true"],
.dg-case-filters button[aria-pressed="true"], .mode-btn.active,
.fq-topics button[aria-pressed="true"], .cs-tabs a[aria-selected="true"],
.cases-filter-button.is-selected) :is(span, i) { color: inherit; } body[class] main :is(.hj-text-link, .dg-text-link, .cs-text-link, .case-article-link,
.cases-hero-link, .corp-action-link,
.fq-related a, .fq-next a, .fq-empty-text, .cs-process a) {
color: var(--gold-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
body[class] main .fq-empty-text {
min-height: 44px;
padding: 8px 2px;
border: 0;
border-radius: 0;
background: transparent;
font-size: 14px;
font-weight: 600;
}
body[class] main :is(.hj-process, .cases-hero) :is(.hj-text-link, .cases-hero-link) {
color: var(--gold);
} body[class] main :is(.hj-button, .dg-button, .consult-submit, .submit-btn,
.btn-submit-main, .btn-big, .ksl-board-button, .cs-button, .btn-action,
.mode-btn, .fq-topics button, .cases-filter-button):disabled,
body[class] .wizard-controls .wizard-btn:disabled {
border-color: var(--ksl-action-disabled-border) !important;
background: var(--ksl-action-disabled-bg) !important;
color: var(--ksl-action-disabled-text) !important;
opacity: 1 !important;
cursor: not-allowed;
}
body[class] .report-box :is(.btn-primary, .btn-secondary):disabled {
border-color: var(--ksl-action-disabled-border) !important;
background: var(--ksl-action-disabled-bg) !important;
color: var(--ksl-action-disabled-text) !important;
opacity: 1 !important;
cursor: not-allowed;
}
body[class] .wizard-controls .wizard-details-link { display: none !important; }
body[class] .is-contact-step .wizard-details-link { display: inline-flex !important; } body[class] main .corp-action-links {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--ksl-action-gap) 24px;
margin-top: 4px;
}
body[class] main .corp-action-link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--gold);
font-size: 15px;
font-weight: 600;
}
@media (max-width: 767px) {
body[class] main :is(.hj-choice button, .hj-situation-choices button, .hj-case-filters button,
.dg-tabs button, .dg-case-filters button, .mode-btn, .fq-topics button,
.cs-tabs a, .cases-filter-button) { padding-inline: 12px; font-size: 15px; }
body[class] main .btn-action-group { grid-template-columns: 1fr; }
body[class] main .corp-action-links { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 480px) {
body[class] main .hj-actions { flex-direction: column; }
body[class] main .hj-actions .hj-button { width: 100%; min-height: var(--ksl-action-height); }
}  :root {
--ksl-card-radius: 6px;
--ksl-card-line: #DDDCD6;
--ksl-card-border: 1px solid var(--ksl-card-line);
--ksl-warm-surface: #F5F3EE;
} body[class] .hj-home { background: #FFF; }
body[class] .hj-home .hj-credentials,
body[class] .hj-home #home-situation,
body[class] .hj-home #home-cases,
body[class] .hj-home #home-authority,
body[class] .hj-home #home-faq,
body[class] .hj-home #sec-consult { background: #FFF; }
body[class] .hj-home #home-compare,
body[class] .hj-home #home-process { background: var(--ksl-warm-surface); }
body[class] .hj-home .hj-credentials { border-bottom: var(--ksl-card-border); } body[class] .hj-home #home-process { color: var(--text-primary); border-color: var(--border-light); }
body[class] .hj-home #home-process :is(h2, h3) { color: var(--text-heading); }
body[class] .hj-home #home-process :is(.hj-step-label, .hj-small-label, .hj-text-link) { color: var(--gold-dark); }
body[class] .hj-home #home-process .hj-footnote,
body[class] .hj-home #home-process .hj-stage-details p:last-child { color: var(--text-muted); }
body[class] .hj-home #home-process .hj-timeline a {
color: var(--text-primary);
border-top-color: var(--border-light);
}
body[class] .hj-home #home-process .hj-timeline a span { color: var(--gold-dark); }
body[class] .hj-home #home-process .hj-timeline a[aria-current="step"] {
color: var(--text-heading);
border-top-color: var(--gold);
}
body[class] .hj-home #home-process .hj-stage-details { border-top-color: var(--border-light); } body[class] main :is(.hj-case, .dg-case, .case-card, .case-item, .ksl-explore-card, .report-box) {
border: var(--ksl-card-border);
border-radius: var(--ksl-card-radius);
background: #FFF;
box-shadow: none;
}
body[class] main :is(.hj-case, .dg-case, .case-card, .case-item, .ksl-explore-card) {
transition: border-color .2s ease;
}
body[class] main :is(.hj-case, .dg-case, .case-card, .case-item, .ksl-explore-card):hover {
border-color: var(--gold);
background: #FFF;
box-shadow: none;
transform: none;
}
body[class] main :is(.hj-case, .dg-case, .ksl-explore-card) { padding: 24px; }
body[class] main .report-box { padding: 28px; }
body[class] main .case-item :is(.case-preview-facts, .case-specs, .case-note, .case-doc) {
border-radius: 0;
background: transparent;
box-shadow: none;
} body[class] main .select-card {
border: var(--ksl-card-border);
border-radius: var(--ksl-card-radius);
background: #FFF;
box-shadow: none;
transform: none;
transition: border-color .2s ease, background-color .2s ease;
}
body[class] main .select-card:hover {
border-color: var(--gold);
background: #FFF;
box-shadow: none;
transform: none;
}
body[class] main .select-card:has(input:checked) {
border-color: var(--gold);
background: var(--gold-muted);
} body[class] main :is(.hj-form-wrap, .dg-consult-form, .dg-calculator-inputs),
body[class] main.cs-main :is(.contact-form, #kslBoardVerify, .cs-success),
body[class] main.sc-container .info-section {
width: 100%;
padding: 28px;
border: var(--ksl-card-border);
border-radius: var(--ksl-card-radius);
background: #FFF;
box-shadow: none;
}
body[class] main.cs-main :is(.contact-form, #kslBoardVerify, .cs-success) { max-width: 720px; }
body[class] main.cs-main #kslBoardVerify { margin-top: 20px; }
body[class] main.sc-container .info-section { margin-top: 36px; }
body[class] main :is(.hj-form-wrap, .dg-consult-form, .dg-calculator-inputs, .contact-form, #kslBoardVerify, .info-section)
:is(.privacy-wrap, .privacy-detail, .info-block) {
border-radius: 0;
background: transparent;
box-shadow: none;
} body.ksl-page-about .stats-bar {
padding: 0;
border: 0;
border-block: var(--ksl-card-border);
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.ksl-page-about .stat-item { padding: 24px; }
body[class] main :is(.diff-card, .service-item, .trans-item, .review-card, .check-card) {
background: transparent;
border: 0;
border-top: var(--ksl-card-border);
border-radius: 0;
box-shadow: none;
}
body[class] main :is(.faq-item, .acc-item, .hj-faq) {
border-radius: 0;
box-shadow: none;
}
body[class] main :is(.faq-answer, .q-box, .a-box) {
border-radius: 0;
background: transparent;
box-shadow: none;
}
body[class] main .dg-doc-groups fieldset {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
@media (max-width: 768px) {
body[class] main :is(.hj-case, .dg-case, .ksl-explore-card) { padding: 24px; }
body[class] main .report-box { padding: 24px; }
body[class] main :is(.hj-form-wrap, .dg-consult-form, .dg-calculator-inputs),
body[class] main.cs-main :is(.contact-form, #kslBoardVerify, .cs-success),
body[class] main.sc-container .info-section { padding: 24px; }
body.ksl-page-about .stat-item { padding: 20px 12px; }
}  :root {
--ksl-motion-fast: 160ms;
--ksl-motion: 120ms; --ksl-content-motion: 320ms;
--ksl-motion-slow: 240ms;
--ksl-reveal-motion: 680ms;
--ksl-motion-ease: cubic-bezier(.2, .7, .2, 1);
}
body[class] :is(a, button, summary, input, select, textarea) {
transition-duration: var(--ksl-motion);
transition-timing-function: ease;
}
body[class] .menu-toggle span { transition-duration: var(--ksl-motion); } body.js-enhanced main :is(.fade-section, .check-card, .sol-card, .case-card, .review-card,
.p-step, .process-step, .diff-card, .service-item, .overview-item, .acc-item,
.case-item, .faq-item, .trans-item, .q-section, .info-section) {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
body.js-enhanced main .photo-item.ksl-reveal-pending {
opacity: .94;
transform: translateY(6px);
}
body.js-enhanced main .photo-item.visible,
body.js-enhanced main .photo-item.is-visible {
opacity: 1;
transform: none;
transition: opacity var(--ksl-reveal-motion) var(--ksl-motion-ease), transform var(--ksl-reveal-motion) var(--ksl-motion-ease);
} body.js-enhanced main .ksl-section-reveal.ksl-reveal-pending {
opacity: .97 !important;
transform: translateY(4px) !important;
}
body.js-enhanced main .ksl-section-reveal.is-visible {
opacity: 1 !important;
transform: none !important;
transition: opacity var(--ksl-reveal-motion) var(--ksl-motion-ease), transform var(--ksl-reveal-motion) var(--ksl-motion-ease) !important;
} body[class] main :is(button, [role="button"], [role="tab"], .hj-button, .dg-button,
.cases-filter-button, .select-card, .case-item, .hj-case, .dg-case, .ksl-explore-card),
body[class] :is(.ksl-consult-toggle, .desktop-consult-submit) {
transition-property: color, background-color, border-color, opacity;
transition-duration: var(--ksl-motion);
transition-timing-function: ease;
}
body[class] main :is(button, [role="button"], [role="tab"], a[class*="btn"], a[class*="button"]),
body[class] :is(.ksl-consult-toggle, .desktop-consult-submit) { transition-duration: 120ms; }
body[class] main :is(button, [role="button"], .hj-button, .dg-button,
.cases-filter-button, .select-card, .case-item, .hj-case, .dg-case, .ksl-explore-card):hover,
body[class] :is(.ksl-consult-toggle, .desktop-consult-submit):hover {
transform: none !important;
box-shadow: none !important;
}
body[class] main a[class*="btn"]:hover,
body[class] main a[class*="button"]:hover {
transform: none !important;
box-shadow: none !important;
}
body[class] main .acc-btn:hover {
width: 100% !important;
margin-inline: 0 !important;
padding-inline: 4px !important;
}
body[class] main :is(.hj-choice button, .hj-situation-choices button, .dg-tabs button,
.dg-case-filters button, .mode-btn, .fq-topics button, .cases-filter-button)[aria-selected="true"],
body[class] main :is(.dg-case-filters button, .fq-topics button, .cases-filter-button)[aria-pressed="true"] {
box-shadow: inset 0 -3px 0 var(--gold) !important;
} body[class] main .ksl-state-updated,
body[class] main .hj-panel-enter {
animation: kslStateUpdate var(--ksl-content-motion) var(--ksl-motion-ease) both !important;
}
@keyframes kslStateUpdate {
from { opacity: .9; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
body[class] main .faq-answer {
transition: max-height var(--ksl-content-motion) var(--ksl-motion-ease), border-color var(--ksl-motion) ease;
}
body[class] main :is(.dg-options label, .dg-doc-groups label, .select-card),
body[class] main :is(.dg-options input, .dg-doc-groups input, .select-card input) {
transition: color var(--ksl-motion) ease, background-color var(--ksl-motion) ease,
border-color var(--ksl-motion) ease, opacity var(--ksl-motion) ease;
}
body[class] main .dg-budget-bar i { transition: width var(--ksl-motion-slow) var(--ksl-motion-ease); }
body[class] main #cases-sections { transition: opacity var(--ksl-content-motion) ease; }
body[class] main #cases-sections.is-filtering { opacity: .96; } .hj-certificate-dialog::backdrop,
.cases-document-dialog::backdrop { background: rgba(6, 16, 34, .78); }
.hj-dialog-head { position: sticky; top: 0; z-index: 2; background: #FBFAF7; }
.hj-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hj-dialog-body { overflow: auto; }
.hj-dialog-body img { min-width: 0; transition: width var(--ksl-motion) ease; }
.hj-dialog-body.is-zoomed img { width: 1200px; max-width: none; }
.hj-certificate-dialog[open],
.cases-document-dialog[open] { animation: kslDialogIn var(--ksl-reveal-motion) var(--ksl-motion-ease) both; }
.hj-certificate-dialog[open]::backdrop,
.cases-document-dialog[open]::backdrop { animation: kslBackdropIn var(--ksl-reveal-motion) ease both; }
@keyframes kslDialogIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes kslBackdropIn { from { opacity: 0; } to { opacity: 1; } } body[class] .desktop-consult-bar[open] .desktop-consult-inner {
animation: kslConsultRise var(--ksl-motion) var(--ksl-motion-ease) both;
}
body[class] .desktop-consult-bar[open] .ksl-consult-toggle { position: relative; z-index: 2; }
@keyframes kslConsultRise {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
body.js-enhanced main .photo-item {
opacity: 1 !important;
transform: none !important;
}
body.js-enhanced main .ksl-section-reveal { opacity: 1 !important; transform: none !important; }
}body[class] main .faq-question {
min-height: 60px;
padding-block: 16px;
}
body[class] main .faq-q-text { font-size: 17px; line-height: 1.6; }
body[class] main .faq-icon { display: inline-grid; flex: 0 0 24px; width: 24px; height: 24px; margin-left: auto; place-items: center; }
body[class] main .faq-icon::before { content: "+"; }
body[class] main .faq-item.active .faq-icon::before { content: "−"; }
body[class] main .faq-answer-inner { width: 100%; max-width: 760px; margin-right: auto; }
body[class] main :is(.fq-short-answer, .fq-full-answer, .fq-full-answer p, .fq-full-answer li) { font-size: 16px; line-height: 1.75; }
body[class] main .fq-short-answer { margin-top: 0; font-weight: 600; color: var(--text-heading); }
body[class] main mark { padding: 0 2px; background: #f2e6cb; color: var(--text-heading); }
body[class] main .select-card { padding: 16px 18px; border-radius: 6px; }
body[class] main .select-card:has(input:checked) { border-color: var(--gold); background: var(--bg-warm); }
body[class] main .select-card:has(input[type="radio"]) .select-icon { border-radius: 50%; }
body[class] main .select-card:has(input[type="checkbox"]) .select-icon { border-radius: 3px; }
body[class] main .select-card:has(input:checked) .select-icon::after { border-radius: inherit; }
body[class] main .wizard-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
body[class] main .wizard-controls .wizard-dock-label,
body[class] main .wizard-controls .wizard-details-link { grid-column: 1 / -1; }
body[class] main .wizard-controls .wizard-btn { width: 100%; min-width: 0; min-height: 48px; }
body[class] main .selfcheck-field { display: grid; gap: 8px; min-width: 0; color: var(--text-heading); font-size: 15px; font-weight: 600; }
body[class] main .selfcheck-field em { color: var(--text-muted); font-size: 12px; font-style: normal; font-weight: 500; }
body[class] main :is(
.form-input,
.form-select,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group select,
.cs-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cs-form select
) {
box-sizing: border-box;
height: 50px;
min-height: 50px;
border-width: 1px;
font-size: 16px;
}
body[class] main .form-label { display: block; margin-bottom: 8px; }
body[class] main :is(.form-textarea, .form-group textarea, .cs-form textarea) {
box-sizing: border-box;
height: 180px;
min-height: 180px;
max-height: 200px;
border-width: 1px;
font-size: 16px;
resize: vertical;
}
body[class] main :is(.selfcheck-error, .cs-field-error, .hj-field-error) { margin: 0; color: #a43a32; font-size: 13px; font-weight: 500; line-height: 1.5; }
body[class] main :is(.form-group, .selfcheck-field) > :is(.selfcheck-error, .cs-field-error, .hj-field-error) { margin-top: 6px; }
body[class] main [aria-invalid="true"] { border-color: #a43a32 !important; }
@media (max-width: 767px) {
body[class] main .select-card { padding: 16px; }
body[class] main :is(.btn-submit-main, .submit-btn, .ksl-board-button, .cs-form button[type="submit"], .hj-form button[type="submit"]) { width: 100%; }
}.ksl-visual-image { display: block;width: 100%;height: auto; }
body[class] :is(.ksl-home-scene, .ksl-hero-art, .ksl-contact-scene) { position: absolute;inset: 0;pointer-events: none;overflow: hidden; }
body[class] :is(.ksl-home-scene, .ksl-hero-art, .ksl-contact-scene) .ksl-visual-image { width: 100%;height: 100%;object-fit: cover; }
body[class] main.hj-home .hj-hero { background: #102d43; }
body[class] main.hj-home .hj-hero::before, body[class] main.hj-home .hj-hero::after { display: none;animation: none; }
body[class] .ksl-home-scene { z-index: -1; }
body[class] .ksl-home-scene::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #102d43ef 0%, #102d43d9 38%, #102d436b 74%, #102d4342 100%), linear-gradient(0deg, #102d4370, transparent 60%); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] { position: relative;isolation: isolate;overflow: hidden;background: #fff;border: 0;color: #102d43;min-height: 420px;border-bottom: 1px solid #dce3e8}
body[class] .ksl-visual-hero .ksl-hero-art { z-index: -1; }
body[class] .ksl-visual-hero .ksl-hero-art::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #f4f8fcf5 0%, #f0f5faeb 31%, #edf3f9c4 47%, #edf3f930 68%, transparent 100%); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class]::before, body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class]::after { display: none; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner { position: relative;z-index: 1; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner > * { order: 0; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner > p { margin-top: 16px; }
body[class] main .ksl-visual-hero .inner > .dg-button { margin-top: 20px; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(h1, .cases-title, .cases-title > span) { max-width: 720px;color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(p, .hero-desc, .pasan-hero-desc, .cases-desc) { max-width: 580px;color: #344653;text-shadow: none; }
body[class] main .ksl-visual-hero :is(.cases-hero-link, .dg-button, .btn-primary) { position: relative;z-index: 1; }
body[class] .ksl-philosophy-visual { margin: 28px 0 0;overflow: hidden;border-radius: 8px;background: #fff; }
body[class] .ksl-philosophy-visual img { aspect-ratio: 1.65;object-fit: cover;object-position: 72% center; }
body[class] main.hj-home .ksl-process-visual { margin: 24px 0 0;border-radius: 8px;overflow: hidden; }
body[class] main.hj-home .ksl-process-visual img { aspect-ratio: 2.6;object-fit: cover;object-position: right 57%; }
body[class] .ksl-subpage-hero.fq-hero[class] > .inner { position: relative;max-width: var(--ksl-layout-max);padding-right: 340px; }
body[class] .ksl-faq-visual { position: absolute;width: 260px;right: var(--ksl-page-gutter);top: 50%;transform: translateY(-50%);margin: 0;border-radius: 12px;overflow: hidden; }
body[class] .ksl-faq-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] main.hj-home .ksl-home-faq-visual { position: absolute;right: -12px;top: 8px;width: 170px;margin: 0;border-radius: 10px;overflow: hidden;pointer-events: none; }
body[class] main.hj-home .ksl-home-faq-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] { min-height: 420px;background: #fff;color: #102d43;border-bottom: 1px solid #dce3e8}
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] > .ksl-subpage-tool-inner { display: grid;grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);gap: 64px;align-items: center;max-width: var(--ksl-layout-max); }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] h1 { color: #102d43; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] .ksl-selfcheck-start-desc { margin: 20px 0 0;color: #344653;font-size: 17px;line-height: 1.8; }
body[class] .ksl-selfcheck-visual { margin: 0;overflow: hidden;border-radius: 12px; }
body[class] .ksl-selfcheck-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] .ksl-selfcheck-start { display: inline-flex;align-items: center;justify-content: center;gap: 24px;min-height: 52px;margin-top: 28px;padding: 14px 24px;border: 1px solid #102d43;border-radius: 5px;background: #102d43;color: #fff;font: 650 16px/1.5 var(--font-sans); }
body[class].ksl-selfcheck-intro { padding-bottom: 0 !important; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero.is-started[class] { min-height: 0;padding-block: 28px; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero.is-started[class] > .ksl-subpage-tool-inner { display: block; }
body[class] .ksl-selfcheck-hero.is-started .ksl-selfcheck-start-desc { display: none; }
body[class] .ksl-contact-scene { z-index: -1; }
body[class] .ksl-contact-scene img { object-position: center 52%; }
body[class] .ksl-contact-scene::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #102d43f2, #102d43bf 45%, #102d432b); }
body[class] main.cs-main .cs-hero :is(h1, p) { position: relative;z-index: 1;max-width: 620px; }
body[class] main.cs-main .contact-form { background: #fff; }
body[class] .ksl-location-visual { position: absolute;right: var(--ksl-page-gutter);top: 50%;transform: translateY(-50%);width: 180px;margin: 0;border-radius: 10px;overflow: hidden; }
body[class] .ksl-location-visual img { aspect-ratio: 1.5;object-fit: cover;object-position: right center; }
body[class] main .location-map-fallback h3 { color: #fff; }
body[class] main .location-map-fallback :is(p, ol, li) { color: #dce7f0; }
body[class] main .location-map-fallback a { color: #e2c486; }
@media (max-width: 1100px) {
body[class] main.hj-home .ksl-home-faq-visual { right: 0;top: -68px;width: 120px; }
}
@media (max-width: 768px) {
body[class] .ksl-home-scene .ksl-visual-image { object-position: 62% center; }
body[class] .ksl-home-scene::after { background: linear-gradient(90deg, #102d43ed, #102d43bf); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] { display: flex;flex-direction: column;gap: 28px;min-height: 0;padding-block: 40px 0; }
body[class] main .ksl-visual-hero .ksl-hero-art { position: relative;z-index: 0;order: 2;inset: auto;flex: none;width: 100%;height: auto; }
body[class] main .ksl-visual-hero .ksl-hero-art img { width: 100%;height: auto;aspect-ratio: 16/9;object-fit: cover;object-position: right center; }
body[class] main .ksl-visual-hero .ksl-hero-art::after { display: none; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner { order: 1;flex: none;align-self: start;width: 100%; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(h1, .cases-title) { font-size: 29px; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(p, .pasan-hero-desc, .cases-desc) { font-size: 16px; }
body[class] .ksl-philosophy-visual { max-width: 460px;margin-top: 22px; }
body[class] main.hj-home .ksl-process-visual { max-width: 420px;margin-top: 20px; }
body[class] main.hj-home .ksl-process-visual img { aspect-ratio: 3.2; }
body[class] .ksl-subpage-hero.fq-hero[class] > .inner { padding-right: var(--ksl-page-gutter); }
body[class] .ksl-faq-visual { position: static;float: right;width: 120px;transform: none;margin: 12px 0 12px 16px; }
body[class] .fq-search { clear: both; }
body[class] main.hj-home .ksl-home-faq-visual { width: 70px;top: 32px;right: 12px;z-index: 2; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] > .ksl-subpage-tool-inner { grid-template-columns: minmax(0, 1fr);gap: 24px; }
body[class] .ksl-selfcheck-visual { width: 100%;max-width: 380px;justify-self: center; }
body[class] .ksl-selfcheck-visual img { aspect-ratio: 2;object-position: right 48%; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] .ksl-selfcheck-start-desc { font-size: 16px; }
body[class] .ksl-selfcheck-start { margin-top: 22px; }
body[class] main.cs-main .ksl-contact-scene { position: relative;z-index: 0;order: 2;inset: auto;width: 100%; }
body[class] main.cs-main .ksl-contact-scene img { height: auto;aspect-ratio: 16/9;object-fit: cover; }
body[class] .ksl-contact-scene::after { display: none; }
body[class] .ksl-location-visual { position: static;transform: none;grid-column: 1;grid-row: 3;width: 140px;margin: 0; }
}body.ksl-page-selfcheck { --sr-ink: #102d43;--sr-blue: #2464a0;--sr-line: #d5e0eb;background: #fff;font-family: var(--font-sans); }
body.ksl-page-selfcheck main.sr-page { padding: 0;background: #fff;color: var(--sr-ink);font-family: var(--font-sans); }
body.ksl-page-selfcheck main.sr-page * { box-sizing: border-box; }
body.ksl-page-selfcheck main.sr-page :is(h1,h2,h3,p,fieldset,legend,figure,dl,dd) { margin: 0; }
body.ksl-page-selfcheck main.sr-page :is(h1,h2,h3) { font-family: inherit;color: var(--sr-ink);font-weight: 750;letter-spacing: -.04em; }
body.ksl-page-selfcheck main.sr-page p { line-height: 1.7;word-break: keep-all; }
body.ksl-page-selfcheck main.sr-page :is(button,input,textarea) { font-family: inherit; }
body.ksl-page-selfcheck main.sr-page svg { flex-shrink: 0; }
body.ksl-page-selfcheck main.sr-page .sr-container { width: 100%;max-width: 808px;margin-inline: auto;padding: 0 24px 48px; }
body.ksl-page-selfcheck main.sr-page .sr-layout { display: block; }
body.ksl-page-selfcheck main.sr-page .sr-content { min-width: 0; }
body.ksl-page-selfcheck main.sr-page .sr-breadcrumb { display: flex;align-items: center;gap: 12px;padding-block: 24px;color: #60717d;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-breadcrumb a { color: inherit; }
body.ksl-page-selfcheck main.sr-page .sr-button { display: inline-flex;align-items: center;justify-content: center;gap: 12px;min-height: 48px;padding: 12px 24px;border: 1px solid #a7bbcd;border-radius: 5px;background: #fff;color: var(--sr-ink);font-size: 16px;font-weight: 600;line-height: 1.5;cursor: pointer;transition: background-color 150ms,border-color 150ms; }
body.ksl-page-selfcheck main.sr-page .sr-button svg { width: 21px;height: 21px; }
body.ksl-page-selfcheck main.sr-page .sr-primary { border-color: var(--sr-ink);background: var(--sr-ink);color: #fff; }
body.ksl-page-selfcheck main.sr-page .sr-button:hover { background: #f3f6f8; }
body.ksl-page-selfcheck main.sr-page .sr-primary:hover { background: #2464a0;border-color: #2464a0; }
body.ksl-page-selfcheck main.sr-page .sr-button:disabled { border-color: #e1e7ed;background: #edf0f3;color: #60717d;cursor: default; }
body.ksl-page-selfcheck main.sr-page .sr-intro { padding-block: 24px 40px;text-align: center; }
body.ksl-page-selfcheck main.sr-page .sr-eyebrow { display: block;margin-bottom: 12px;color: #60717d;font-size: 14px;font-weight: 600; }
body.ksl-page-selfcheck main.sr-page .sr-intro h2 { font-size: clamp(28px,3vw,38px);line-height: 1.4;word-break: keep-all; }
body.ksl-page-selfcheck main.sr-page .sr-intro > div > p { margin-top: 12px;color: #60717d;font-size: 17px; }
body.ksl-page-selfcheck main.sr-page .sr-mode { display: flex;gap: 12px;max-width: 440px;margin: 28px auto 18px;padding: 0;border: 0;text-align: left; }
body.ksl-page-selfcheck main.sr-page .sr-mode legend { margin-bottom: 10px;color: #60717d;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-mode label { display: flex;flex: 1;align-items: center;justify-content: center;gap: 10px;min-height: 52px;padding: 12px;border: 1px solid var(--sr-line);border-radius: 5px;font-size: 16px;cursor: pointer;transition: background-color 150ms,border-color 150ms; }
body.ksl-page-selfcheck main.sr-page .sr-mode label:has(input:checked) { border-color: var(--sr-blue);background: #eef4fa; }
body.ksl-page-selfcheck main.sr-page .sr-mode input { appearance: auto;width: 19px;height: 19px;margin: 0;accent-color: var(--sr-blue); }
body.ksl-page-selfcheck main.sr-page #selfcheckStart { width: 100%;max-width: 440px; }
body.ksl-page-selfcheck main.sr-page .sr-intro-note { margin-top: 20px;color: #60717d;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-noscript { padding-block: 20px;color: #2464a0; }
body.ksl-page-selfcheck main.sr-page .sr-workspace { padding: 28px 32px;border: 1px solid var(--sr-line);border-radius: 8px;background: #fff; }
body.ksl-page-selfcheck main.sr-page .sr-progress { display: grid;grid-template-columns: auto minmax(0,1fr);align-items: center;gap: 18px;margin-bottom: 28px; }
body.ksl-page-selfcheck main.sr-page .sr-progress > span { color: #60717d;font-size: 14px;font-weight: 600;white-space: nowrap; }
body.ksl-page-selfcheck main.sr-page .sr-progress-track { height: 4px;overflow: hidden;border-radius: 4px;background: #eef4fa; }
body.ksl-page-selfcheck main.sr-page .sr-progress-track > span { display: block;height: 100%;border-radius: inherit;background: var(--sr-blue); }
body.ksl-page-selfcheck main.sr-page #checkForm { display: block;width: 100%;max-width: none;margin: 0;padding: 0;border: 0;background: #fff;box-shadow: none; }
body.ksl-page-selfcheck main.sr-page .sr-question { min-width: 0;width: 100%;padding: 0;border: 0; }
body.ksl-page-selfcheck main.sr-page .sr-question legend { display: block;width: 100%;padding: 0;color: var(--sr-ink);font-size: 28px;font-weight: 750;line-height: 1.45;letter-spacing: -.04em;word-break: keep-all;overflow-wrap: anywhere; }
body.ksl-page-selfcheck main.sr-page .sr-question-hint { margin-block: 10px 20px;color: #60717d;font-size: 16px; }
body.ksl-page-selfcheck main.sr-page .sr-options { display: grid;gap: 10px; }
body.ksl-page-selfcheck main.sr-page .sr-option { display: flex;align-items: center;gap: 14px;min-height: 58px;padding: 15px 18px;border: 1px solid var(--sr-line);border-radius: 5px;background: #fff;color: #102d43;font-size: 17px;line-height: 1.6;cursor: pointer; }
body.ksl-page-selfcheck main.sr-page .sr-option:has(input:checked) { border-color: var(--sr-blue);background: #eef4fa; }
body.ksl-page-selfcheck main.sr-page .sr-option:has(input:focus-visible) { outline: 3px solid #78adf4;outline-offset: 3px; }
body.ksl-page-selfcheck main.sr-page .sr-option input { appearance: none;display: grid;place-items: center;width: 22px;height: 22px;flex: 0 0 22px;margin: 0;padding: 0;border: 1.5px solid #a5b7c8;border-radius: 50%;background: #fff; }
body.ksl-page-selfcheck main.sr-page .sr-option input::after { content: '';width: 10px;height: 6px;margin-top: -2px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(-45deg);opacity: 0; }
body.ksl-page-selfcheck main.sr-page .sr-option input:checked { border-color: var(--sr-blue);background: var(--sr-blue); }
body.ksl-page-selfcheck main.sr-page .sr-option input:checked::after { opacity: 1; }
body.ksl-page-selfcheck main.sr-page .sr-option span { min-width: 0;word-break: keep-all;overflow-wrap: anywhere; }
body.ksl-page-selfcheck main.sr-page .sr-controls { display: flex;justify-content: space-between;gap: 16px;margin-top: 24px;padding-top: 24px;border-top: 1px solid var(--sr-line); }
body.ksl-page-selfcheck main.sr-page #wizardNextBtn { min-width: 168px; }
body.ksl-page-selfcheck main.sr-page .sr-question-note, body.ksl-page-selfcheck main.sr-page .sr-edit-note { margin-top: 16px;color: #60717d;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-edit-note { margin: -8px 0 20px;color: #344653; }
body.ksl-page-selfcheck main.sr-page .sr-result { padding-top: 12px; }
body.ksl-page-selfcheck main.sr-page .sr-result-heading h2 { font-size: 32px;line-height: 1.45; }
body.ksl-page-selfcheck main.sr-page .sr-result-heading p { margin-top: 12px;color: #60717d;font-size: 17px; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary { margin-top: 28px;padding: 24px;border: 1px solid var(--sr-line);border-radius: 6px;background: #fff; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary h3 { margin-bottom: 12px;font-size: 23px; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dl > div { display: grid;grid-template-columns: 90px minmax(0,1fr);align-items: start;gap: 16px;padding-block: 12px;border-bottom: 1px solid #e2e8ed; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dl > div:last-child { border: 0;padding-bottom: 0; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dt { padding-top: 9px;color: #60717d;font-size: 14px;font-weight: 600; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dd { display: flex;align-items: start;gap: 12px;font-size: 16px;line-height: 1.7; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dd > span { flex: 1;min-width: 0;padding-block: 8px;overflow-wrap: anywhere; }
body.ksl-page-selfcheck main.sr-page [data-sc-edit-question] { flex: 0 0 44px;min-width: 44px;min-height: 44px;padding: 8px 4px;border: 0;border-radius: 4px;background: transparent;color: #2464a0;font-size: 14px;font-weight: 600;text-decoration: underline;text-underline-offset: 4px;cursor: pointer; }
body.ksl-page-selfcheck main.sr-page .sr-review { margin-top: 32px; }
body.ksl-page-selfcheck main.sr-page .sr-review h3 { margin-bottom: 17px;font-size: 25px;line-height: 1.5; }
body.ksl-page-selfcheck main.sr-page .sr-review-list { border: 1px solid #d4e2f1;border-radius: 4px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list details + details { border-top: 1px solid #d4e2f1; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary { display: grid;grid-template-columns: 205px minmax(0,1fr) 20px;align-items: center;gap: 22px;min-height: 76px;padding: 20px 24px;list-style: none;cursor: pointer; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary::-webkit-details-marker { display: none; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary strong { font-size: 20px;font-weight: 700;letter-spacing: -.025em; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary span { color: #344653;font-size: 14px;line-height: 1.7;word-break: keep-all; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary b { color: #2464a0;font-size: 28px;font-weight: 400;transition: transform 150ms; }
body.ksl-page-selfcheck main.sr-page .sr-review-list details[open] summary b { transform: rotate(45deg); }
body.ksl-page-selfcheck main.sr-page .sr-review-list details > div { padding: 0 24px 20px;color: #60717d;font-size: 15px; }
body.ksl-page-selfcheck main.sr-page .sr-result-actions { display: flex;gap: 16px;margin-top: 28px; }
body.ksl-page-selfcheck main.sr-page .sr-result-actions .sr-button { min-width: 220px; }
body.ksl-page-selfcheck main.sr-page .sr-consult { margin-top: 36px;padding-top: 37px;border-top: 1px solid var(--sr-line); }
body.ksl-page-selfcheck main.sr-page .sr-consult > h3 { font-size: 29px;line-height: 1.5; }
body.ksl-page-selfcheck main.sr-page .sr-consult > p { margin-top: 8px;color: #344653;font-size: 18px; }
body.ksl-page-selfcheck main.sr-page #selfcheckSmsForm { display: grid;gap: 21px;width: 100%;max-width: none;margin-top: 25px;padding: 28px;border: 0;border-radius: 4px;background: #fff;box-shadow: none; }
body.ksl-page-selfcheck main.sr-page .form-group { position: relative;display: grid;gap: 9px;min-width: 0;margin: 0; }
body.ksl-page-selfcheck main.sr-page .form-group > label { color: #2464a0;font-size: 15px;font-weight: 500; }
body.ksl-page-selfcheck main.sr-page .form-group > label > span { margin-left: 4px;color: #60717d;font-size: 12px; }
body.ksl-page-selfcheck main.sr-page .form-group :is(input,textarea,select) { width: 100%;min-width: 0;min-height: 47px;padding: 12px 15px;border: 1px solid #ccdbeb;border-radius: 4px;background: #fff;color: #102d43;font-size: 16px;line-height: 1.5;box-shadow: none; }
body.ksl-page-selfcheck main.sr-page .form-group textarea { height: 125px;min-height: 125px;max-height: 500px;padding-bottom: 27px;resize: vertical; }
body.ksl-page-selfcheck main.sr-page .form-group :is(input,textarea)::placeholder { color: #96a7bc;opacity: 1; }
body.ksl-page-selfcheck main.sr-page .sr-count { justify-self: end;margin: -31px 12px 0 0;z-index: 1;color: #60717d;font-size: 12px;pointer-events: none; }
body.ksl-page-selfcheck main.sr-page .sr-privacy-row { display: flex;align-items: start;justify-content: space-between;flex-wrap: wrap;gap: 10px 20px; }
body.ksl-page-selfcheck main.sr-page .privacy-check { display: flex;align-items: start;gap: 11px;margin: 0;color: #2464a0;font-size: 14px;line-height: 1.7; }
body.ksl-page-selfcheck main.sr-page .privacy-check input { appearance: auto;width: 22px;height: 22px;flex-shrink: 0;margin: 0;accent-color: var(--sr-blue); }
body.ksl-page-selfcheck main.sr-page .privacy-check small { font-size: inherit; }
body.ksl-page-selfcheck main.sr-page .sr-privacy-row > a { display: inline-flex;align-items: center;gap: 10px;color: #2464a0;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-privacy-row > a svg { width: 18px;height: 18px; }
body.ksl-page-selfcheck main.sr-page #selfcheckSmsForm > button { justify-self: start;min-width: 330px; }
body.ksl-page-selfcheck main.sr-page .sr-consult-note { display: flex;align-items: start;gap: 11px;color: #60717d;font-size: 13px; }
body.ksl-page-selfcheck main.sr-page .sr-consult-note svg { width: 22px;height: 22px; }
body.ksl-page-selfcheck main.sr-page .sr-honeypot { position: absolute !important;left: -10000px !important;top: auto;width: 1px;height: 1px;overflow: hidden; }
body.ksl-page-selfcheck main.sr-page .sr-receipt { padding: 18px;border: 1px solid #a8c7e6;border-radius: 4px;background: #fff;color: #2464a0;font-size: 15px;line-height: 1.8;white-space: pre-line;overflow-wrap: anywhere; }
body.ksl-page-selfcheck main.sr-page .sr-receipt a { color: #2464a0;text-decoration: underline;text-underline-offset: 4px; }
body.ksl-page-selfcheck main.sr-page .sr-guide-links { display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 15px;margin-top: 26px; }
@media (max-width: 600px) {
body.ksl-page-selfcheck main.sr-page .sr-container { padding-inline: 20px; }
body.ksl-page-selfcheck main.sr-page .sr-breadcrumb { padding-block: 20px;font-size: 13px; }
body.ksl-page-selfcheck main.sr-page .sr-intro { padding-block: 16px 28px; }
body.ksl-page-selfcheck main.sr-page .sr-intro > div > p { font-size: 16px; }
body.ksl-page-selfcheck main.sr-page .sr-mode { gap: 10px;margin-top: 24px; }
body.ksl-page-selfcheck main.sr-page .sr-mode label { gap: 8px;padding-inline: 8px; }
body.ksl-page-selfcheck main.sr-page .sr-workspace { padding: 20px 16px; }
body.ksl-page-selfcheck main.sr-page .sr-progress { margin-bottom: 24px;gap: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-question legend { font-size: 25px; }
body.ksl-page-selfcheck main.sr-page .sr-option { gap: 12px;padding: 14px 12px;font-size: 16px; }
body.ksl-page-selfcheck main.sr-page .sr-controls { gap: 12px;margin-top: 20px;padding-top: 20px; }
body.ksl-page-selfcheck main.sr-page .sr-controls .sr-button { min-width: 0;padding-inline: 16px; }
body.ksl-page-selfcheck main.sr-page #wizardNextBtn { flex: 1;max-width: 200px; }
body.ksl-page-selfcheck main.sr-page .sr-result-heading h2 { font-size: 27px; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary { padding: 18px; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dl > div { grid-template-columns: minmax(0,1fr);gap: 0; }
body.ksl-page-selfcheck main.sr-page .sr-answer-summary dt { padding-top: 0; }
body.ksl-page-selfcheck main.sr-page .sr-review { margin-top: 27px; }
body.ksl-page-selfcheck main.sr-page .sr-review h3 { margin-bottom: 13px;font-size: 23px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary { grid-template-columns: minmax(0,1fr) 20px;gap: 5px 13px;min-height: 86px;padding: 17px 18px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary strong { font-size: 18px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary span { grid-column: 1;font-size: 12px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list summary b { grid-column: 2;grid-row: 1/3;font-size: 25px; }
body.ksl-page-selfcheck main.sr-page .sr-review-list details > div { padding: 0 18px 18px;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-result-actions { display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px;margin-top: 23px; }
body.ksl-page-selfcheck main.sr-page .sr-result-actions .sr-button { min-width: 0;padding-inline: 8px;gap: 5px;font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .sr-result-actions .sr-button svg { width: 17px;height: 17px; }
body.ksl-page-selfcheck main.sr-page .sr-consult { margin-top: 28px;padding-top: 27px; }
body.ksl-page-selfcheck main.sr-page .sr-consult > h3 { font-size: 25px; }
body.ksl-page-selfcheck main.sr-page .sr-consult > p { font-size: 15px; }
body.ksl-page-selfcheck main.sr-page #selfcheckSmsForm { gap: 21px;margin-top: 20px;padding: 21px 17px; }
body.ksl-page-selfcheck main.sr-page .form-group > label { font-size: 14px; }
body.ksl-page-selfcheck main.sr-page .form-group > label > span { font-size: 11px; }
body.ksl-page-selfcheck main.sr-page .form-group :is(input,textarea) { padding-inline: 12px;font-size: 16px; }
body.ksl-page-selfcheck main.sr-page .privacy-check { gap: 9px;font-size: 12px; }
body.ksl-page-selfcheck main.sr-page .privacy-check small { display: block; }
body.ksl-page-selfcheck main.sr-page .sr-privacy-row > a { margin-left: 31px;font-size: 13px; }
body.ksl-page-selfcheck main.sr-page #selfcheckSmsForm > button { width: 100%;min-width: 0;font-size: 15px; }
body.ksl-page-selfcheck main.sr-page .sr-consult-note { font-size: 12px; }
body.ksl-page-selfcheck main.sr-page .sr-guide-links { gap: 10px;margin-top: 21px; }
body.ksl-page-selfcheck main.sr-page .sr-guide-links .sr-button { padding-inline: 8px;font-size: 14px;gap: 6px; }
body.ksl-page-selfcheck main.sr-page .sr-guide-links svg { width: 17px;height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
body.ksl-page-selfcheck main.sr-page * { transition: none;animation: none; }
}
body.ksl-page-selfcheck main.sr-page .sr-receive { padding: 28px 0; }@media (max-width: 768px) {
html body[class] :is(.rr-note, .dg-note, .hj-footnote, .rr-receipt-help, .rr-doc-status, .dg-summary-consent, .privacy-check > span, .cs-privacy p, .hm-stage-footer p, .dg-eyebrow, .rr-advanced > summary, .rr-advanced > p, .kr-point, .kr-reading-note, .fq-note, .fr-topic-status p, .ar-certificate-copy p, .lr-map-fallback p, .sr-intro-note, .contact-main td) { font-size: 14px !important;line-height: 1.65 !important; }
html body[class] :is(.rr-note, .dg-note, .hj-footnote) a { font-size: inherit; } html body[class] main.rr-page .rr-hero > figure:not(.ksl-flow-graphic) { display: none; }
}body[class] .ksl-naver-actions { --na-ink: #102d43;--na-muted: #60717d;--na-line: #d6e0eb;--na-accent: #03c75a;margin: 56px 0;padding: 32px;border: 1px solid var(--na-line);border-radius: 12px;background: #fff;color: var(--na-ink);text-align: left; }
body[class] .ksl-naver-actions .ksl-naver-actions__head h2 { margin: 0;font-family: var(--font-sans);font-size: clamp(20px, 2.2vw, 26px);font-weight: 800;line-height: 1.35;letter-spacing: -0.02em;color: var(--na-ink); }
body[class] .ksl-naver-actions .ksl-naver-actions__head p { margin: 8px 0 0;color: var(--na-muted);font-size: 15px;line-height: 1.6; }
body[class] .ksl-naver-actions .ksl-naver-action { margin-top: 20px;max-width: 420px;display: flex;align-items: center;gap: 14px;height: 100%;min-height: 76px;padding: 16px 18px;border: 1px solid var(--na-line);border-radius: 12px;background: #fff;color: var(--na-ink);text-decoration: none;transition: border-color 120ms, background-color 120ms; }
body[class] .ksl-naver-actions .ksl-naver-action:hover { border-color: var(--na-ink); }
body[class] .ksl-naver-actions .ksl-naver-action__icon { display: inline-flex;flex: none;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;background: #fff;color: var(--na-ink); }
body[class] .ksl-naver-actions .ksl-naver-action__icon svg { width: 22px;height: 22px; }
body[class] .ksl-naver-actions .ksl-naver-action__text { display: flex;flex: 1;flex-direction: column;gap: 2px;min-width: 0; }
body[class] .ksl-naver-actions .ksl-naver-action__text strong { color: inherit;font-size: 16px;font-weight: 800;line-height: 1.4; }
body[class] .ksl-naver-actions .ksl-naver-action__text small { color: var(--na-muted);font-size: 14px;line-height: 1.45; }
body[class] .ksl-naver-actions .ksl-naver-action__arrow { flex: none;font-size: 18px;line-height: 1; }
body[class] .ksl-naver-actions .ksl-naver-action--booking { border-color: var(--na-ink);background: var(--na-ink);color: #fff; }
body[class] .ksl-naver-actions .ksl-naver-action--booking:hover { background: #102d43; }
body[class] .ksl-naver-actions .ksl-naver-action--booking .ksl-naver-action__icon { background: var(--na-accent);color: #fff; }
body[class] .ksl-naver-actions .ksl-naver-action--booking .ksl-naver-action__text small { color: #c9d6e4; }
body[class] .ksl-naver-actions.ksl-naver-actions--compact { display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 8px 20px;margin: 20px 0;padding: 14px 0;border: 0;border-block: 1px solid var(--na-line);border-radius: 0;background: #fff; }
body[class] .ksl-naver-actions.ksl-naver-actions--compact .ksl-naver-actions__head h2 { font-size: 18px; }
body[class] .ksl-naver-actions.ksl-naver-actions--compact .ksl-naver-actions__head p { margin-top: 4px;font-size: 14px; }
body[class] .ksl-naver-actions.ksl-naver-actions--compact .ksl-naver-action { margin-top: 0;min-height: 44px;padding: 8px 12px;border: 1px solid var(--na-line);border-radius: 4px;background: #fff;color: var(--na-ink); }
body[class] .ksl-naver-actions.ksl-naver-actions--compact :is(.ksl-naver-action__icon,.ksl-naver-action__text small) { display: none; }
body[class] .ksl-naver-actions .ksl-naver-actions__more { display: flex;flex-wrap: wrap;gap: 4px 20px;margin: 12px 0 0;font-size: 15px; }
body[class] .ksl-naver-actions .ksl-naver-actions__more a { display: inline-flex;align-items: center;min-height: 44px;color: var(--na-muted);text-decoration: underline;text-underline-offset: 4px; }
body[class] .ksl-consult-links { display: flex;flex-wrap: wrap;gap: 8px 24px;padding-block: 24px;border-top: 1px solid var(--chrome-line); }
body[class] .ksl-consult-links a { display: inline-flex;align-items: center;min-height: 44px;color: var(--chrome-muted);text-decoration: underline;text-underline-offset: 4px; }
@media (max-width: 640px) {
body[class] .ksl-naver-actions { margin: 40px 0;padding: 22px 16px; }
body[class] .ksl-naver-actions .ksl-naver-action { min-height: 68px;padding: 14px; }
}body[class] { --header-h: 88px;--chrome-ink: #102d43;--chrome-blue: #2464a0;--chrome-muted: #60717d;--chrome-line: #d9e3ed;--chrome-gutter: var(--ksl-gutter);--chrome-width: calc(var(--ksl-max) + 2 * var(--ksl-gutter));--ksl-admin-offset: 0px; }
body.admin-bar { --ksl-admin-offset: 32px; }
html { scroll-padding-top: calc(var(--header-h, 88px) + 24px); }
body[class] .site-header { position: fixed;inset: var(--ksl-admin-offset) 0 auto;z-index: 10000;height: var(--header-h);background: #fff;border-bottom: 1px solid var(--chrome-line);color: var(--chrome-ink);transition: box-shadow .2s; }
body[class] .site-header.is-scrolled { box-shadow: 0 5px 24px #102d430a; }
body[class] .site-header .header-inner { display: flex;align-items: center;justify-content: space-between;gap: 24px;width: 100%;max-width: var(--chrome-width);height: 100%;margin-inline: auto;padding-inline: var(--chrome-gutter); }
body[class] .site-header .logo-area { display: flex;align-items: center;flex: none;gap: 12px;min-width: 0; }
body[class] .site-header .logo-img { width: auto;height: 40px;max-width: 64px;object-fit: contain; }
body[class] .site-header .logo-text { display: flex;flex-direction: column;gap: 5px;min-width: 0; }
body[class] .site-header .logo-main { color: var(--chrome-ink);font: 800 clamp(21px, 1.9vw, 27px)/1.2 var(--font-sans);letter-spacing: -.055em;white-space: nowrap; }
body[class] .site-header .logo-sub { color: var(--chrome-muted);font: 500 9px/1.2 var(--font-sans);letter-spacing: .18em; }
body[class] .site-header .gnb { display: flex;align-items: center;justify-content: flex-end;gap: clamp(20px, 2.4vw, 36px);height: 100%;min-width: 0; }
body[class] .site-header .nav-list { display: flex;align-items: stretch;gap: clamp(14px, 1.7vw, 28px);height: 100%;margin: 0;padding: 0;list-style: none; }
body[class] .site-header .nav-item { position: relative;display: flex;align-items: center;height: 100%;padding: 0;border: 0; }
body[class] .site-header .nav-link { position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 7px;min-height: 44px;height: 100%;margin: 0;padding: 0 2px;border: 0;border-radius: 0;background: transparent;color: var(--chrome-ink);font: 550 15px/1.4 var(--font-sans);letter-spacing: -.025em;white-space: nowrap;appearance: none;text-decoration: none; }
body[class] .site-header .nav-link::after { content: "";position: absolute;inset: auto 0 -1px;display: block;width: 100%;height: 3px;background: var(--chrome-blue);transform: scaleX(0);transition: transform .18s; }
body[class] .site-header .nav-link:is(:hover, .active, [aria-current=page]) { color: var(--chrome-blue); }
body[class] .site-header .nav-link:is(:hover, .active, [aria-current=page])::after { transform: scaleX(1); }
body[class] .site-header .has-sub > .nav-link::before { content: "";order: 1;width: 6px;height: 6px;margin-top: -3px;border-right: 1.5px solid currentColor;border-bottom: 1.5px solid currentColor;transform: rotate(45deg); }
body[class] .site-header .sub-menu { position: absolute;inset: calc(100% - 6px) auto auto 50%;z-index: 2;min-width: 196px;margin: 0;padding: 8px;border: 1px solid var(--chrome-line);border-radius: 10px;background: #fff;box-shadow: 0 16px 40px #102d4314;list-style: none;visibility: hidden;opacity: 0;transform: translateX(-50%) translateY(6px);transition: opacity .18s, transform .18s; }
body[class] .site-header .nav-item.submenu-open > .sub-menu { visibility: visible;opacity: 1;transform: translateX(-50%) translateY(0); }
body[class] .site-header .sub-menu a { display: flex;align-items: center;min-height: 44px;padding: 10px 13px;border: 0;border-radius: 5px;color: var(--chrome-ink);font: 550 15px/1.4 var(--font-sans);white-space: nowrap; }
body[class] .site-header .sub-menu a:is(:hover, [aria-current=page]) { background: #eef4fa;color: var(--chrome-blue); }
body[class] .site-header .nav-cta { display: inline-flex;align-items: center;justify-content: center;flex: none;gap: 9px;min-height: 48px;padding: 11px 18px;border: 1px solid var(--chrome-ink);border-radius: 6px;background: var(--chrome-ink);color: #fff;font: 650 14px/1.4 var(--font-sans);white-space: nowrap; }
body[class] .site-header .nav-cta:hover { border-color: #2464a0;background: #2464a0; }
body[class] .site-header .nav-cta svg { flex: none;width: 17px;height: 17px; }
body[class] .site-header :is(.menu-toggle, .menu-backdrop) { display: none; }
body[class] .site-header a { transition: color .18s, background-color .18s; }
body[class] .site-footer { padding: 56px 0 30px;border-top: 1px solid var(--chrome-line);background: #fff;color: var(--chrome-ink);font-family: var(--font-sans); }
body[class] .site-footer .footer-inner { display: grid;grid-template-columns: minmax(0, 1fr) minmax(290px, .55fr);gap: 32px 64px;width: 100%;max-width: var(--chrome-width);margin-inline: auto;padding-inline: var(--chrome-gutter); }
body[class] .site-footer .footer-brand { display: inline-block;color: var(--chrome-ink);font-size: 24px;font-weight: 800;line-height: 1.3;letter-spacing: -.05em; }
body[class] .site-footer p { margin: 0; }
body[class] .site-footer .footer-tagline { margin: 10px 0 22px;color: var(--chrome-muted);font-size: 14px; }
body[class] .site-footer .footer-contact { display: grid;gap: 8px;margin: 0;color: var(--chrome-muted);font: normal 14px/1.7 var(--font-sans);word-break: keep-all;overflow-wrap: anywhere; }
body[class] .site-footer .footer-contact p + p { display: flex;flex-wrap: wrap;gap: 4px 18px; }
body[class] .site-footer .footer-registration { display: flex;flex-wrap: wrap;gap: 4px 18px;margin-top: 12px;color: var(--chrome-muted);font-size: 12px;line-height: 1.6; }
body[class] .site-footer .footer-connect { border-left: 1px solid var(--chrome-line);padding-left: 40px; }
body[class] .site-footer .footer-connect-label { display: block;color: var(--chrome-muted);font-size: 13px;font-weight: 600; }
body[class] .site-footer .footer-phone { display: inline-block;margin-top: 6px;color: var(--chrome-ink);font-size: clamp(25px, 2.3vw, 32px);font-weight: 750;line-height: 1.3;letter-spacing: -.035em; }
body[class] .site-footer .footer-hours { margin-top: 7px;color: var(--chrome-muted);font-size: 13px; }
body[class] .site-footer .footer-actions { display: flex;align-items: center;flex-wrap: wrap;gap: 16px 20px;margin-top: 20px; }
body[class] .site-footer .footer-actions a { display: inline-flex;align-items: center;justify-content: center;gap: 12px;min-height: 44px;color: var(--chrome-ink);font-size: 14px;font-weight: 650; }
body[class] .site-footer .footer-actions .footer-consult { padding: 10px 16px;border: 1px solid var(--chrome-ink);border-radius: 6px;background: var(--chrome-ink);color: #fff; }
body[class] .site-footer .footer-consult:hover { border-color: var(--chrome-blue);background: var(--chrome-blue);color: #fff; }
body[class] .site-footer .footer-actions svg { width: 18px;height: 18px; }
body[class] .site-footer a:hover { color: var(--chrome-blue); }
body[class] .site-footer .footer-navigation { grid-column: 1 / -1;display: flex;flex-wrap: wrap;gap: 0 26px;margin-top: 4px;padding: 13px 0;border-block: 1px solid var(--chrome-line); }
body[class] .site-footer .footer-navigation a { display: inline-flex;align-items: center;min-height: 36px;color: var(--chrome-muted);font-size: 13px; }
body[class] .site-footer .footer-bottom { grid-column: 1 / -1;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 14px 24px;margin-top: -12px;color: var(--chrome-muted); }
body[class] .site-footer .footer-bottom small { font-size: 12px;line-height: 1.7; }
body[class] .site-footer .footer-bottom nav { display: flex;flex-wrap: wrap;gap: 24px; }
body[class] .site-footer .footer-bottom nav a { font-size: 12px;line-height: 1.7; }
body[class] .site-footer .footer-notice { grid-column: 1 / -1;margin-top: -18px;color: var(--chrome-muted);font-size: 11px;line-height: 1.8; }
body[class] .fixed-cta-bar { display: none; }
body[class] .desktop-consult-bar { background: var(--chrome-ink);border-top: 1px solid #344653; }
body[class] .desktop-consult-bar .ksl-consult-toggle { max-width: var(--chrome-width);padding-inline: var(--chrome-gutter); }
body[class] .desktop-consult-bar .ksl-consult-toggle-label { color: #dceaf7; }
body[class] .desktop-consult-bar .desktop-consult-inner { padding: 28px;border: 1px solid var(--chrome-line);border-radius: 12px 12px 0 0;background: #fff;color: var(--chrome-ink);box-shadow: 0 -10px 32px #102d4314; }
body[class] .desktop-consult-bar .desktop-consult-title { color: var(--chrome-ink);font: 750 20px/1.4 var(--font-sans); }
body[class] .desktop-consult-bar .desktop-consult-sub { color: var(--chrome-muted); }
body[class] .desktop-consult-bar .desktop-consult-input { border-color: var(--chrome-line);border-radius: 6px;background: #fff;color: var(--chrome-ink); }
body[class] .desktop-consult-bar .desktop-consult-input::placeholder { color: var(--chrome-muted); }
body[class] .desktop-consult-bar .desktop-consult-input:focus { border-color: var(--chrome-blue);box-shadow: 0 0 0 3px #2464a020; }
body[class] .desktop-consult-bar .desktop-consult-submit { border-color: var(--chrome-ink);border-radius: 6px;background: var(--chrome-ink);color: #fff; }
body[class] .desktop-consult-bar :is(.desktop-consult-privacy, .desktop-consult-privacy-link, .desktop-consult-status) { color: var(--chrome-muted); }
body[class] .desktop-consult-bar .desktop-consult-status[data-tone=error] { color: #b42332; }
body[class] .desktop-consult-bar .desktop-consult-status[data-tone=success] { color: #176b4b; }
body[class] .desktop-consult-bar input[type=checkbox] { accent-color: var(--chrome-blue); }
@media (max-width: 1199px) {
body[class] { --header-h: 76px; }
body[class] .site-header .menu-toggle { display: block;position: relative;z-index: 3;flex: none;width: 44px;height: 44px;padding: 0;border: 1px solid var(--chrome-line);border-radius: 8px;background: #fff; }
body[class] .site-header .menu-toggle span { position: absolute;left: 11px;display: block;width: 20px;height: 2px;background: var(--chrome-ink);transition: transform .18s, opacity .18s; }
body[class] .site-header .menu-toggle span:nth-child(1) { top: 14px; }
body[class] .site-header .menu-toggle span:nth-child(2) { top: 21px; }
body[class] .site-header .menu-toggle span:nth-child(3) { top: 28px; }
body[class] .site-header .menu-toggle.active span:nth-child(1) { top: 21px;transform: rotate(45deg); }
body[class] .site-header .menu-toggle.active span:nth-child(2) { opacity: 0; }
body[class] .site-header .menu-toggle.active span:nth-child(3) { top: 21px;transform: rotate(-45deg); }
body[class] .site-header .gnb { position: fixed;inset: calc(var(--header-h) + var(--ksl-admin-offset)) 0 auto auto;z-index: 2;display: flex;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: 0;width: min(100%, 400px);height: calc(100dvh - var(--header-h) - var(--ksl-admin-offset));padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));border: 0;border-left: 1px solid var(--chrome-line);border-radius: 0;background: #fff;overflow-y: auto;overscroll-behavior: contain;visibility: hidden;transform: translateX(100%);transition: transform .2s ease, visibility .2s; }
body[class] .site-header .gnb.open { visibility: visible;transform: translateX(0); }
body[class] .site-header .nav-list { flex: none;flex-direction: column;gap: 0;width: 100%;height: auto;margin-bottom: 28px;overflow: visible; }
body[class] .site-header .nav-item { display: block;width: 100%;height: auto;border-bottom: 1px solid var(--chrome-line); }
body[class] .site-header .nav-link { justify-content: space-between;width: 100%;height: auto;min-height: 60px;padding: 16px 4px;font-size: 18px;font-weight: 650; }
body[class] .site-header .nav-link::after { display: none; }
body[class] .site-header .gnb .sub-menu { position: static;display: none;width: 100%;min-width: 0;margin: 0 0 12px;padding: 5px 8px;border: 0;border-radius: 6px;background: #fff;box-shadow: none;visibility: visible;opacity: 1;transform: none; }
body[class] .site-header .gnb .nav-item.submenu-open > .sub-menu { display: block;transform: none; }
body[class] .site-header .gnb .nav-cta { width: 100%;min-height: 52px;margin-top: auto;font-size: 16px; }
body[class] .site-header .menu-backdrop:not([hidden]) { position: fixed;inset: calc(var(--header-h) + var(--ksl-admin-offset)) 0 0;z-index: 1;display: block;width: 100%;padding: 0;border: 0;background: #102d434d;cursor: default; }
body[class].ksl-menu-open :is(.fixed-cta-bar, .desktop-consult-bar, .wizard-controls) { visibility: hidden; }
}
@media (max-width: 992px) {
body[class] .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(240px, .6fr);gap: 28px 32px; }
body[class] .site-footer .footer-connect { padding-left: 28px; }
html body.ksl-has-naver-bar { padding-bottom: var(--ksl-fixed-bottom-h, calc(78px + env(safe-area-inset-bottom, 0px))) !important; }
body[class] .fixed-cta-bar.fixed-cta-bar--naver { position: fixed;inset: auto 0 0;z-index: 9997;display: block;padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));border-top: 1px solid var(--chrome-line);border-radius: 0;background: #fff;box-shadow: 0 -6px 24px #102d430a; }
body[class] .fixed-cta-inner { display: grid;grid-template-columns: 1fr 1.4fr .8fr;gap: 6px;width: 100%;max-width: 620px;min-height: 56px;margin: 0 auto; }
body[class] .fixed-cta-bar .cta-btn { display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px;min-width: 0;min-height: 56px;padding: 5px 8px;border: 0;border-radius: 8px;background: #fff;color: var(--chrome-ink);text-decoration: none; }
body[class] .fixed-cta-bar .cta-btn.primary { flex-direction: row;gap: 8px;background: var(--chrome-ink);color: #fff; }
body[class] .fixed-cta-bar .cta-btn:hover { background: #eef4fa; }
body[class] .fixed-cta-bar .cta-btn.primary:hover { background: #2464a0; }
body[class] .fixed-cta-bar .cta-btn svg { flex: none;width: 20px;height: 20px; }
body[class] .fixed-cta-bar .cta-label-main { color: inherit;font-size: 12px;font-weight: 650;line-height: 1.3;white-space: nowrap; }
body[class] .fixed-cta-bar .primary .cta-label-main { font-size: 14px; }
}
@media (max-width: 782px) {
body.admin-bar { --ksl-admin-offset: 46px; }
}
@media (max-width: 640px) {
body[class] { --header-h: 72px; }
body[class] .site-header .header-inner { gap: 12px; }
body[class] .site-header .logo-main { font-size: 23px; }
body[class] .site-header .logo-sub { font-size: 8px;letter-spacing: .12em; }
body[class] .site-header .logo-img { height: 30px;max-width: 40px; }
body[class] .site-footer { padding-block: 36px 24px; }
body[class] .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr);gap: 24px; }
body[class] .site-footer .footer-brand { font-size: 22px; }
body[class] .site-footer .footer-tagline { margin: 7px 0 16px;font-size: 13px; }
body[class] .site-footer .footer-contact { font-size: 13px; }
body[class] .site-footer .footer-registration { font-size: 11px; }
body[class] .site-footer .footer-connect { padding: 22px 0 0;border-left: 0;border-top: 1px solid var(--chrome-line); }
body[class] .site-footer .footer-phone { font-size: 28px; }
body[class] .site-footer .footer-actions { gap: 12px 24px;margin-top: 16px; }
body[class] .site-footer .footer-navigation { gap: 0 22px;margin-top: 0;padding-block: 12px; }
body[class] .site-footer .footer-navigation a { font-size: 12px; }
body[class] .site-footer .footer-bottom { flex-direction: column;align-items: flex-start;gap: 12px;margin-top: 0; }
body[class] .site-footer .footer-bottom nav { order: -1; }
body[class] .site-footer .footer-notice { margin-top: -8px;font-size: 11px; }
}
@media (max-width: 360px) {
body[class] { }
body[class] .site-header .logo-main { font-size: 20px; }
body[class] .site-header .logo-sub { display: none; }
body[class] .site-header .logo-area { gap: 7px; }
body[class] .site-header .logo-img { max-width: 26px;height: 26px; }
body[class] .fixed-cta-bar .primary svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body[class] .site-header, body[class] .site-header :is(a, .gnb, .sub-menu, .menu-toggle span, .nav-link::after) { transition: none; }
} @media (min-width: 1200px) {
body:not(.js-enhanced) .site-header .nav-item:is(:hover, :focus-within) > .sub-menu { visibility: visible;opacity: 1;transform: translateX(-50%); }
} body[class] .site-header .nav-actions { display: flex;align-items: center;flex: none;gap: 10px; }
body[class] .site-header .nav-selfcheck { display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 48px;padding: 11px 16px;border: 1px solid var(--chrome-ink);border-radius: 6px;background: #fff;color: var(--chrome-ink);font: 650 14px/1.4 var(--font-sans);white-space: nowrap; }
body[class] .site-header .nav-selfcheck:is(:hover, [aria-current=page]) { border-color: var(--chrome-blue);background: #eef4fa;color: var(--chrome-blue); }
body[class] .site-header .nav-selfcheck svg { flex: none;width: 17px;height: 17px; }
@media (max-width: 1199px) {
body[class] .site-header .gnb .nav-actions { display: grid;grid-template-columns: minmax(0, 1fr);gap: 10px;width: 100%;margin-top: auto; }
body[class] .site-header .gnb .nav-actions :is(.nav-cta, .nav-selfcheck) { width: 100%;min-height: 52px;margin: 0;font-size: 16px; }
}body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] {
background: #102d43;color: #fff;border-color: #ffffff30;
}
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(h1,h2,h1 span,.ar-eyebrow,.rr-eyebrow,.sr-eyebrow,.case-detail-kicker) { color: #fff; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(p,.ar-breadcrumb,.ar-credentials li,.ar-hero-photo figcaption span,.fq-shortcuts > span,.sr-mode legend) { color: #d5e0e9; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(.ar-text-link,.rr-text-link,.fq-shortcuts a,.corp-purpose-link) { color: #fff; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(.ar-primary,.rr-primary,.sr-primary,.fq-search-submit) { border-color: #fff;background: #fff;color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(.ar-primary,.rr-primary,.sr-primary,.fq-search-submit):hover { border-color: #d5e0e9;background: #d5e0e9;color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] :is(.ar-breadcrumb a,.ar-hero-photo figcaption) { color: #fff;border-color: #ffffff60; } body[class]:not(.ksl-page-index) main .ksl-dark-hero[class]:is(.kr-heading,.cr-page-heading,.lr-heading,.legal-heading,.page-head,.ksl-page-head) { padding: 28px 32px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class].rr-hero { padding: 30px 32px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class].fq-hero { padding-block: 28px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class].sr-intro { padding: 28px 24px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .sr-mode label { border-color: #ffffff70;color: #fff; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .sr-mode label:has(input:checked) { border-color: #fff;background: #fff;color: #102d43; } body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .ksl-flow-graphic { color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .ksl-flow-graphic[class] p { color: #60717d; } body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .corp-purpose-options button { border-color: #ffffff70;background: transparent;color: #fff; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .corp-purpose-options button[aria-selected=true] { border-color: #fff;background: #fff;color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .corp-purpose-results { border-color: #ffffff40;background: #ffffff08; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .case-decision-badge { border-color: #ffffff70;background: transparent;color: #fff; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class] .kr-page-badge { border-color: #ffffff70;background: transparent;color: #fff; }
@media (max-width: 640px) {
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class]:is(.kr-heading,.cr-page-heading,.lr-heading,.legal-heading,.page-head,.ksl-page-head,.rr-hero) { padding: 24px 20px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class].sr-intro { padding: 24px 18px; }
body[class]:not(.ksl-page-index) main .ksl-dark-hero[class].fq-hero { padding-block: 24px; }
} body[class] .ksl-site-resources { padding: 40px 0;background: #f6f6f3;border-top: 1px solid #d9e3ed;color: #102d43; }
body[class] .ksl-site-resources__inner { width: 100%;max-width: calc(var(--ksl-max) + 2 * var(--ksl-gutter));margin-inline: auto;padding-inline: var(--ksl-gutter); }
body[class] .ksl-site-resources header p { margin: 0 0 8px;color: #60717d;font-size: 14px; }
body[class] .ksl-site-resources h2 { margin: 0;font: 750 clamp(22px,2.3vw,30px)/1.4 var(--font-sans);letter-spacing: -.035em; }
body[class] .ksl-site-resources__links { display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 16px;margin-top: 24px; }
body[class] .ksl-site-resource { display: flex;align-items: center;gap: 16px;min-width: 0;min-height: 112px;padding: 22px;border: 1px solid #c5d0d9;border-radius: 6px;background: #fff;color: #102d43;transition: background-color 150ms,border-color 150ms; }
body[class] .ksl-site-resource:hover { border-color: #2464a0;background: #f1f5f8; }
body[class] .ksl-site-resource:focus-visible { outline: 3px solid #78adf4;outline-offset: 4px; }
body[class] .ksl-site-resource--primary { border-color: #102d43;background: #102d43;color: #fff; }
body[class] .ksl-site-resource--primary:hover { border-color: #2464a0;background: #2464a0; }
body[class] .ksl-site-resource__icon { flex: none; }
body[class] .ksl-site-resource svg { display: block;width: 26px;height: 26px; }
body[class] .ksl-site-resource strong { display: block;font-size: 19px;font-weight: 700;line-height: 1.5; }
body[class] .ksl-site-resource small { display: block;margin-top: 6px;color: #344653;font-size: 14px;line-height: 1.6;word-break: keep-all; }
body[class] .ksl-site-resource--primary small { color: #d5e0e9; }
body[class] .ksl-site-resource__arrow { flex: none;margin-left: auto;font-size: 23px; }
@media (max-width: 992px) {
body[class] .ksl-site-resources__links { gap: 10px; }
body[class] .ksl-site-resource { flex-wrap: wrap;gap: 10px;padding: 18px; }
body[class] .ksl-site-resource > span:nth-child(2) { flex: 1 1 100%;order: 1; }
}
@media (max-width: 640px) {
body[class] .ksl-site-resources { padding-block: 28px; }
body[class] .ksl-site-resources__links { grid-template-columns: minmax(0,1fr);margin-top: 20px; }
body[class] .ksl-site-resource { flex-wrap: nowrap;gap: 14px;min-height: 96px;padding: 18px; }
body[class] .ksl-site-resource > span:nth-child(2) { flex: 1;order: 0; }
body[class] .ksl-site-resource strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
body[class] .ksl-site-resource { transition: none; }
}:root { --ksl-navy: #102d43;--ksl-blue: #2464a0;--ksl-text: #344653;--ksl-muted: #60717d;--ksl-tint: #eef4fa;--ksl-line: #dce3e8;--ksl-max: 1280px;--ksl-gutter: clamp(20px, 4vw, 48px);--ksl-radius-sm: 6px;--ksl-radius-lg: 10px;--ksl-section: 104px;--ksl-control-h: 52px; }
@media (max-width: 768px) { :root { --ksl-section: 64px; } }
:root { --ksl-anchor-offset: 104px;--ksl-state-ink: #102d43;--ksl-state-accent: #2464a0;--ksl-state-error: #a13329;--ksl-state-success: #236344;--ksl-state-line: #ccdceb;--ksl-state-selected: var(--ksl-tint); } :root { --ksl-motion-hero: 600ms;--ksl-motion-section: 420ms;--ksl-motion-panel: 220ms;--ksl-motion-question: 220ms;--ksl-motion-accordion: 260ms;--ksl-motion-progress: 280ms; }
body[class] [hidden] { display: none !important; }
body[class] main[id], body[class] main [id] { scroll-margin-top: var(--ksl-anchor-offset);scroll-margin-bottom: calc(var(--ksl-fixed-bottom-h, 0px) + 24px); }
body[class] :is(main,.site-header,.site-footer,.fixed-cta-bar,.desktop-consult-bar) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid #78adf4;outline-offset: 4px; }
body[class] main [data-ui-disclosure-panel]:not([hidden]) { display: block !important;max-height: none !important;opacity: 1 !important; }
body[class] [data-ui-tabs] [data-ui-selected=true] { border-color: var(--ksl-state-accent); }
body[class] [data-ui-tabs=navigation] [data-ui-selected=true] { background: var(--ksl-state-selected);color: var(--ksl-state-ink);font-weight: 700; }
body[class] main [aria-invalid=true] { border-color: var(--ksl-state-error) !important; }
body[class] :is(.ksl-field-error,.dg-field-error,.selfcheck-error) { margin: 6px 0 0;color: var(--ksl-state-error);font-size: 14px;line-height: 1.6; } body[class] .ksl-status[data-ui-state=error] { color: var(--ksl-state-error) !important;border-color: #d9aaa4 !important;background: #fff4f2 !important; }
body[class] .ksl-status[data-ui-state=success] { color: var(--ksl-state-success) !important;border-color: #b8d8c7 !important;background: #f2faf5 !important; }
body[class] .ksl-status[data-ui-state=loading] { display: flex;align-items: center;gap: 10px;color: var(--ksl-state-ink) !important;border-color: var(--ksl-state-line) !important;background: var(--ksl-state-selected) !important; }
body[class] .ksl-status[data-ui-state=loading]::before { content: "";flex: none;width: 16px;height: 16px;border: 2px solid currentColor;border-right-color: transparent;border-radius: 50%;animation: kslStatusSpin 800ms linear infinite; }
@keyframes kslStatusSpin { to { transform: rotate(1turn); } }
body[class] .ksl-status:is([data-ui-state=error],[data-ui-state=success],[data-ui-state=loading]) { padding: 12px 14px;border-width: 1px;border-style: solid;border-radius: 4px;overflow-wrap: anywhere;white-space: pre-line; }
body[class] [data-ui-form][aria-busy=true] [type=submit] { cursor: wait;opacity: .7; }
body[class] [data-ui-privacy] { flex-wrap: wrap; }
body[class] [data-ui-privacy] > .ksl-field-error { flex-basis: 100%;grid-column: 1 / -1; }
body[class] [data-ui-selected=true] input[type=checkbox], body[class] [data-ui-form] :is(input[type=checkbox],input[type=radio]) { accent-color: var(--ksl-state-accent); }
body[class] main :is(.sr-option,.rr-quick-options label,.dg-options label,.dg-doc-groups label,.select-card,.cr-category) { transition: background-color var(--ksl-motion,150ms) ease, border-color var(--ksl-motion,150ms) ease, color var(--ksl-motion,150ms) ease; }
body[class] main :is(#questionProgressBar,[data-rr-question-fill],[data-doc-progress-fill],.dg-budget-bar i) { transition: width var(--ksl-motion-progress) ease-out; }
@media (prefers-reduced-motion: reduce) {
[data-ui-tabs] *, [data-ui-disclosure-panel], .ksl-status, .ksl-status::before { animation: none !important;transition: none !important; }
} .ksl-service-guides ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ksl-service-guides li { padding: 1.25rem 0; border-top: 1px solid var(--line, #dce2e6); }
.ksl-service-guides h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.ksl-service-guides p { margin: 0; line-height: 1.7; } body[class] .ksl-faq-context { display: grid;gap: 8px;padding: 16px;border: 1px solid #b9c6d1;border-left: 3px solid #2464a0;border-radius: 4px;background: #f7f7f5; }
body[class] .ksl-faq-context p { margin: 0;font-size: 13px;color: #60717d; }
body[class] .ksl-faq-context strong { font-size: 15px;line-height: 1.7;overflow-wrap: anywhere; }
body[class] .ksl-faq-context button { width: fit-content;min-height: 44px;padding: 8px 0;border: 0;background: transparent;color: #2464a0;font-size: 14px;text-decoration: underline;text-underline-offset: 4px; } body[class] main h1 { font-size: clamp(30px, 3.2vw, 42px) !important;line-height: 1.36 !important; }
body.ksl-page-index main h1 { font-size: clamp(40px, 4vw, 54px) !important; }
@media (max-width: 768px) {
body[class] main h1 { font-size: 30px !important; }
body.ksl-page-index main h1 { font-size: 32px !important; }
}
@media (max-width: 360px) {
body[class]:not(.ksl-page-index) main h1 { font-size: 28px !important; }
} body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-layout { grid-template-columns: 200px minmax(0, 1fr);gap: 48px; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar { max-height: calc(100dvh - var(--header-h) - 40px);overflow-y: auto;overscroll-behavior: contain;scrollbar-width: thin; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav { margin-top: 26px;padding-top: 4px; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-section-nav p { margin: 0 0 6px;color: var(--ksl-muted);font-size: 13px;font-weight: 700;letter-spacing: .02em; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav a { position: relative;min-height: 40px;padding: 9px 0 9px 14px;border-bottom: 0;color: var(--ksl-text);font-size: 15px;line-height: 1.45; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav a::before { content: "";position: absolute;left: 0;top: 8px;bottom: 8px;width: 2px;border-radius: 2px;background: var(--ksl-line); }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav a:hover { color: var(--ksl-blue); }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav a[aria-current=location] { color: var(--ksl-navy);font-weight: 700; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-sidebar .rr-section-nav a[aria-current=location]::before { background: var(--ksl-blue); }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > .sv-jump { display: none; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > section:not(.rr-hero):not(#sec-hero) { padding-block: 88px; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > section:not(.rr-hero):not(#sec-hero) + section { border-top: 1px solid var(--ksl-line); }
@media (max-width: 992px) {
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > .sv-jump { position: sticky;top: calc(var(--header-h) + var(--ksl-admin-offset, 0px));z-index: 5;display: flex;flex-wrap: nowrap;gap: 4px;margin: 0 calc(-1 * var(--ksl-gutter)) 8px;padding: 6px var(--ksl-gutter);overflow-x: auto;border-block: 1px solid var(--ksl-line);background: #fff;scrollbar-width: none; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > .sv-jump::-webkit-scrollbar { display: none; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > .sv-jump a { flex: none;display: inline-flex;align-items: center;min-height: 44px;padding: 0 12px;border-radius: 6px;color: var(--ksl-text);font-size: 15px;white-space: nowrap; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > .sv-jump a[aria-current=location] { background: var(--ksl-tint);color: var(--ksl-navy);font-weight: 700; }
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-content > section:not(.rr-hero):not(#sec-hero) { padding-block: 56px; }
}
body:is(.ksl-page-rehab,.ksl-page-pasan,.ksl-page-corp) main.rr-page .rr-actions .rr-hero-booking { margin-top: 0;padding-inline: 4px;font-size: 15px; } body:is(.ksl-page-rehab,.ksl-page-pasan) main.rr-page .rr-hero:has(.ksl-flow-graphic) { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr);align-items: center;gap: 48px; }
body[class] main .ksl-flow-graphic { margin: 0;padding: 28px 28px 24px;border: 1px solid var(--ksl-line);border-radius: var(--ksl-radius-lg);background: #fff; }
body[class] main .ksl-flow-graphic figcaption { margin-bottom: 18px;color: var(--ksl-blue);font-size: 14px;font-weight: 700; }
body[class] main .ksl-flow-graphic ol { position: relative;display: grid;gap: 22px;margin: 0;padding: 0;list-style: none; }
body[class] main .ksl-flow-graphic ol::before { content: "";position: absolute;left: 17px;top: 18px;bottom: 18px;width: 2px;background: var(--ksl-line); }
body[class] main .ksl-flow-graphic li { position: relative;display: grid;grid-template-columns: 36px minmax(0, 1fr);gap: 16px;align-items: start; }
body[class] main .ksl-flow-graphic .ksl-flow-number { display: grid;place-items: center;width: 36px;height: 36px;border: 2px solid var(--ksl-navy);border-radius: 50%;background: #fff;color: var(--ksl-navy);font-size: 15px;font-weight: 800; }
body[class] main .ksl-flow-graphic li:last-child .ksl-flow-number { background: var(--ksl-navy);color: #fff; }
body[class] main .ksl-flow-graphic strong { display: block;color: var(--ksl-navy);font-size: 17px;line-height: 1.5; }
body[class] main .ksl-flow-graphic p { margin: 4px 0 0;color: var(--ksl-muted);font-size: 15px;line-height: 1.65; }
@media (max-width: 1199px) {
body:is(.ksl-page-rehab,.ksl-page-pasan) main.rr-page .rr-hero:has(.ksl-flow-graphic) { grid-template-columns: minmax(0, 1fr);gap: 28px; }
}
@media (max-width: 768px) {
body[class] main .ksl-flow-graphic { padding: 20px 18px; }
body[class] main .ksl-flow-graphic ol { gap: 16px; }
} body[class] main h1 { text-wrap: balance; }
@media (max-width: 768px) {
body:not(.ksl-page-index) main h1 br { display: none; }
}