/* ============================================================
KS의료경영연구소 — site.css
Premium B2B · Navy / Blue / White
============================================================ */
:root {
--navy-950: #06122a;
--navy-900: #0b1e3f;
--navy-800: #12305c;
--navy-700: #1b4282;
--blue-600: #1e5fbf;
--blue-500: #2f7fe3;
--blue-100: #e8f0fb;
--accent: #2bb8a8;
--accent-soft: #d6f2ee;
--ink-900: #0d1522;
--ink-700: #2b3445;
--ink-500: #5a6477;
--ink-400: #8791a3;
--line: #e4e8ee;
--line-soft: #eef1f6;
--bg: #ffffff;
--bg-soft: #f7f9fc;
--bg-gray: #f2f5f9;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--shadow-sm: 0 1px 2px rgba(11, 30, 63, 0.06);
--shadow: 0 10px 30px -12px rgba(11, 30, 63, 0.18);
--shadow-lg: 0 30px 60px -24px rgba(11, 30, 63, 0.28);
--content-max: 1200px;
--content-narrow: 760px;
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--fs-eyebrow: 0.78rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-feature-settings: 'ss03', 'cv11';
color: var(--ink-900);
background: var(--bg);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
word-break: keep-all;
overflow-wrap: break-word;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue-600); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--navy-900); }
h1, h2, h3, h4 { color: var(--navy-900); letter-spacing: -0.01em; line-height: 1.25; margin: 0; font-weight: 700; }
p { margin: 0; }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--navy-900); color: #fff; padding: 8px 14px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }
.container {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
.container--narrow { max-width: var(--content-narrow); }
.eyebrow {
display: inline-block;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue-600);
margin: 0 0 14px;
}
.muted { color: var(--ink-500); }
.accent { color: var(--blue-500); }
/* -------- Buttons -------- */
.btn {
--btn-bg: var(--navy-900);
--btn-color: #fff;
--btn-border: var(--navy-900);
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
background: var(--btn-bg);
color: var(--btn-color);
border: 1.5px solid var(--btn-border);
transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
cursor: pointer;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary { --btn-bg: var(--navy-900); --btn-color: #fff; --btn-border: var(--navy-900); }
.btn--primary:hover { --btn-bg: var(--navy-800); color: #fff; }
.btn--outline { --btn-bg: transparent; --btn-color: var(--navy-900); --btn-border: var(--navy-900); }
.btn--outline:hover { --btn-bg: var(--navy-900); --btn-color: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-color: var(--navy-900); --btn-border: var(--line); }
.btn--ghost:hover { --btn-bg: var(--bg-soft); --btn-color: var(--navy-900); }
.btn--danger { --btn-bg: #c5342b; --btn-color: #fff; --btn-border: #c5342b; }
.btn--danger:hover { --btn-bg: #a92921; --btn-color: #fff; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.btn--block { width: 100%; }
.link-arrow {
display: inline-flex; align-items: center; gap: 6px;
color: var(--navy-900); font-weight: 600;
border-bottom: 1px solid transparent;
}
.link-arrow:hover { border-color: var(--navy-900); }
.tag {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--blue-100);
color: var(--blue-600);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.tag--soft { background: var(--accent-soft); color: #17746b; }
/* -------- Header -------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 76px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy-900); }
.brand:hover { color: var(--navy-800); }
.brand__mark {
width: 42px; height: 42px; border-radius: 10px;
background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
color: #fff; font-weight: 800; letter-spacing: 0.04em;
display: grid; place-items: center; font-size: 0.95rem;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 1.02rem; }
.brand__sub { font-size: 0.72rem; color: var(--ink-500); letter-spacing: 0.02em; }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav > ul { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.primary-nav > ul a {
color: var(--ink-700); font-weight: 600; font-size: 0.95rem;
padding: 8px 0; position: relative;
}
.primary-nav > ul a:hover, .primary-nav > ul a[aria-current='page'] { color: var(--navy-900); }
.primary-nav > ul a[aria-current='page']::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--blue-500); border-radius: 2px;
}
.primary-nav .nav-cta { color: #fff; }
.primary-nav .nav-cta:hover { color: #fff; }
.has-submenu { position: relative; }
.submenu {
position: absolute; top: 100%; left: -16px;
min-width: 260px; padding: 10px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
list-style: none; margin: 8px 0 0;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
display: block; padding: 10px 14px; border-radius: 10px;
color: var(--ink-700); font-size: 0.9rem;
}
.submenu a:hover { background: var(--bg-soft); color: var(--navy-900); }
.nav-lang { display: inline-flex; align-items: center; margin-right: 8px; }
.lang-form select {
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 10px;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
background: #fff;
color: var(--ink-700);
cursor: pointer;
}
.lang-form select:hover { border-color: var(--blue-500); color: var(--navy-900); }
.lang-form select:focus { outline: none; border-color: var(--blue-500); }
.nav-toggle {
display: none; background: transparent; border: 1px solid var(--line);
padding: 7px 12px 7px 10px;
height: 40px; cursor: pointer;
align-items: center; gap: 8px;
border-radius: 999px;
color: var(--navy-900);
font-family: inherit;
font-weight: 700;
font-size: 0.86rem;
transition: background 0.15s, border-color 0.15s;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle__icon {
display: inline-flex; flex-direction: column; justify-content: center;
width: 18px; height: 14px;
gap: 3px;
position: relative;
}
.nav-toggle__icon i {
display: block; height: 2px;
background: var(--navy-900);
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
transform-origin: center;
}
.nav-toggle__label { line-height: 1; letter-spacing: -0.01em; }
/* Open 상태 — X 아이콘 + 닫기 */
.nav-toggle[aria-expanded='true'] .nav-toggle__icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__icon i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-toggle[aria-expanded='true'] {
background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__icon i { background: #fff; }
/* -------- Hero -------- */
.hero {
position: relative;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero__bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(1200px 600px at 20% -10%, rgba(47, 127, 227, 0.45), transparent 60%),
radial-gradient(900px 500px at 90% 110%, rgba(43, 184, 168, 0.25), transparent 60%),
linear-gradient(140deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}
.hero__bg::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 70%);
}
.hero__inner {
padding: 120px 20px 130px;
max-width: 1200px;
position: relative;
}
.hero .eyebrow { color: #9ec6ff; }
.hero__title {
font-size: clamp(2.2rem, 5vw, 3.8rem);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.15;
}
.hero__title .accent { color: #7fc3ff; }
.hero__lead {
margin-top: 22px;
color: rgba(255,255,255,0.8);
font-size: clamp(1rem, 1.4vw, 1.15rem);
max-width: 640px;
}
.hero__actions {
display: flex; gap: 12px; flex-wrap: wrap;
margin-top: 36px;
}
.hero .btn--primary { --btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff; }
.hero .btn--primary:hover { --btn-bg: #eaf2ff; }
.hero .btn--outline { --btn-border: rgba(255,255,255,0.35); --btn-color: #fff; }
.hero .btn--outline:hover { --btn-bg: rgba(255,255,255,0.1); --btn-color: #fff; }
.hero .btn--ghost { --btn-bg: transparent; --btn-border: rgba(255,255,255,0.25); --btn-color: rgba(255,255,255,0.92); }
.hero .btn--ghost:hover { --btn-bg: rgba(255,255,255,0.12); --btn-color: #fff; --btn-border: rgba(255,255,255,0.5); }
.hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 60px 0 0;
padding: 22px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
background: rgba(255,255,255,0.04);
max-width: 640px;
}
.hero__stats div { }
.hero__stats dt { font-size: 0.78rem; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__stats dd {
margin: 6px 0 0; font-size: 1.9rem; font-weight: 800; color: #fff;
display: flex; align-items: baseline; gap: 2px;
}
.hero__stats dd span { font-size: 1rem; font-weight: 600; color: #7fc3ff; margin-left: 2px; }
/* -------- Sections -------- */
.section { padding: 90px 0; }
.section--gray { background: var(--bg-soft); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section__head--split {
display: flex; align-items: end; justify-content: space-between;
gap: 20px; text-align: left; max-width: none;
}
.section__title {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 800;
}
.section__desc {
margin-top: 14px; color: var(--ink-500);
font-size: 1.02rem;
}
/* -------- Credentials -------- */
.credential-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
}
.credential-card {
padding: 26px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
display: flex; flex-direction: column; gap: 8px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.credential-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-500); }
.credential-card__num {
font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800;
color: var(--navy-900); letter-spacing: -0.02em;
display: inline-flex; align-items: baseline; justify-content: center; gap: 2px;
}
.credential-card__num em { font-size: 0.62em; font-weight: 700; font-style: normal; color: var(--blue-600); }
.credential-card__label { color: var(--ink-500); font-size: 0.85rem; }
@media (max-width: 1024px) {
.credential-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* -------- Value cards -------- */
.value-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.value-card {
padding: 34px 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-500); }
.value-card__num {
display: inline-block; font-size: 0.78rem; font-weight: 700;
color: var(--blue-600); letter-spacing: 0.2em;
}
.value-card__label {
font-size: 1.2rem; margin: 14px 0 4px; color: var(--navy-900);
}
.value-card__title { font-weight: 700; color: var(--navy-900); margin: 0 0 10px; font-size: 1.08rem; }
.value-card__desc { color: var(--ink-500); font-size: 0.95rem; line-height: 1.7; }
/* -------- Service cards -------- */
.service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.service-card {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: inherit;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--blue-500), var(--accent));
transform: scaleX(0); transform-origin: left;
transition: transform .35s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-500); color: inherit; }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
width: 48px; height: 48px; border-radius: 12px;
background: var(--blue-100);
display: grid; place-items: center; color: var(--blue-600);
position: relative;
}
.service-card__icon::before {
content: ''; width: 22px; height: 22px;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: var(--icon, none); mask-image: var(--icon, none);
}
.service-card__icon[data-icon='mso'] { --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='tax'] { --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='labor'] { --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='claim'] { --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='asset'] { --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='global']{ --icon: url("data:image/svg+xml;utf8,"); }
.service-card__icon[data-icon='wealth']{ --icon: url("data:image/svg+xml;utf8,"); }
.service-card__title { font-size: 1.18rem; margin: 6px 0 0; color: var(--navy-900); }
.service-card__desc { color: var(--ink-500); font-size: 0.95rem; line-height: 1.65; }
.service-card__list { list-style: none; padding: 0; margin: 6px 0 0; color: var(--ink-700); font-size: 0.88rem; }
.service-card__list li { padding-left: 18px; position: relative; margin: 3px 0; }
.service-card__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); position: absolute; left: 4px; top: 9px; }
.service-card__more { margin-top: auto; color: var(--blue-600); font-weight: 600; font-size: 0.9rem; padding-top: 8px; }
.service-card--optional { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
/* -------- Problem / solution section -------- */
.problem-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.problem-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
}
.problem-list li {
padding: 18px 20px 18px 56px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
position: relative;
font-weight: 600; color: var(--ink-700);
box-shadow: var(--shadow-sm);
}
.problem-list li::before {
content: '';
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 24px; height: 24px; border-radius: 50%;
background: var(--blue-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px; background-repeat: no-repeat; background-position: center;
}
/* -------- Process -------- */
.process-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
counter-reset: step;
}
.process-item {
position: relative;
padding: 28px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: left;
}
.process-item__num {
font-size: 0.8rem; font-weight: 700;
color: var(--blue-600); letter-spacing: 0.2em;
}
.process-item h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.process-item p { color: var(--ink-500); font-size: 0.9rem; line-height: 1.6; }
/* -------- Insights -------- */
.insight-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.insight-grid--lg { gap: 22px; }
.insight-card {
display: flex; flex-direction: column; gap: 12px;
padding: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: inherit;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.insight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-500); color: inherit; }
.insight-card__cover {
display: block; border-radius: var(--radius); overflow: hidden;
aspect-ratio: 16 / 10;
}
.insight-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.insight-card h3 { font-size: 1.1rem; margin: 0; }
.insight-card p { color: var(--ink-500); font-size: 0.93rem; line-height: 1.6; }
.insight-card time { color: var(--ink-400); font-size: 0.82rem; margin-top: auto; }
.category-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.category-bar--stages { margin-bottom: 36px; }
.chip {
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--line);
color: var(--ink-700); font-size: 0.88rem; font-weight: 600;
background: #fff;
}
.chip--active, .chip:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.chip--stage { background: #f3f6fc; color: var(--navy-800); border-color: #d5e0f2; font-weight: 500; }
.chip--stage.chip--active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.insights-search {
display: flex; gap: 8px; margin-bottom: 20px; max-width: 560px;
flex-wrap: wrap;
}
.insights-search input[type="search"] {
flex: 1 1 260px; min-width: 0;
padding: 10px 14px;
border: 1px solid var(--line); border-radius: 10px;
font-size: 0.95rem; font-family: inherit;
background: #fff;
}
.insights-search input[type="search"]:focus {
outline: none; border-color: var(--navy-800);
box-shadow: 0 0 0 3px rgba(30, 95, 191, 0.15);
}
.search-summary {
margin: 0 0 18px; color: var(--ink-500); font-size: 0.92rem;
}
.search-summary strong { color: var(--navy-900); }
.pagination {
display: flex; align-items: center; justify-content: center;
gap: 16px; margin-top: 40px;
color: var(--ink-500);
}
.pagination a {
padding: 8px 16px; border-radius: 999px;
border: 1px solid var(--line); color: var(--navy-900); font-weight: 600;
}
.pagination a:hover { background: var(--bg-soft); }
.empty-state {
padding: 60px 20px; text-align: center;
color: var(--ink-500);
background: var(--bg-soft); border-radius: var(--radius);
}
/* -------- Page hero -------- */
.page-hero {
padding: 100px 0 60px;
background:
radial-gradient(900px 500px at 90% -20%, rgba(47, 127, 227, 0.12), transparent 60%),
linear-gradient(180deg, var(--bg-soft), #fff);
border-bottom: 1px solid var(--line-soft);
}
.page-hero--center { text-align: center; }
.page-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
}
.page-hero__lead {
margin-top: 16px; color: var(--ink-500); font-size: 1.05rem; max-width: 680px;
}
.page-hero--center .page-hero__lead { margin-left: auto; margin-right: auto; }
.page-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.page-hero--center .page-hero__actions { justify-content: center; }
.page-hero--service {
background:
radial-gradient(900px 500px at 90% -20%, rgba(47, 127, 227, 0.14), transparent 60%),
linear-gradient(180deg, #eef3fb, #fff);
}
/* -------- About -------- */
.vm-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.vm-card {
padding: 44px 36px; border-radius: var(--radius-lg);
background: #fff; border: 1px solid var(--line);
}
.vm-card--alt {
background: linear-gradient(140deg, var(--navy-900), var(--blue-600));
border-color: transparent; color: #fff;
}
.vm-card--alt h2, .vm-card--alt .eyebrow { color: #fff; }
.vm-card--alt .eyebrow { color: #9ec6ff; }
.diff-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.diff-card {
padding: 26px 22px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.diff-card__num { font-weight: 700; color: var(--blue-600); font-size: 0.82rem; letter-spacing: 0.2em; }
.diff-card h3 { font-size: 1.05rem; margin: 10px 0 6px; }
.diff-card p { color: var(--ink-500); font-size: 0.92rem; line-height: 1.6; }
.about-approach__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px;
}
.about-approach article {
padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.about-approach h3 { font-size: 1.1rem; color: var(--navy-900); }
.about-approach p { color: var(--ink-500); margin-top: 8px; font-size: 0.95rem; line-height: 1.7; }
/* ============================================================
Positioning section ("의사는 의료를 공부한 사람")
============================================================ */
.section--positioning {
background:
radial-gradient(900px 500px at 50% -20%, rgba(47, 127, 227, 0.10), transparent 60%),
linear-gradient(180deg, #fff, var(--bg-soft));
}
.positioning__title {
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.positioning__lead {
text-align: center;
color: var(--ink-700);
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.75;
margin-bottom: 36px;
}
.positioning__choice {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.positioning__choice-card {
padding: 32px 28px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 12px;
}
.positioning__choice-card .eyebrow { margin: 0; }
.positioning__choice-card h3 {
color: var(--navy-900);
font-size: 1.2rem;
line-height: 1.35;
margin-bottom: 4px;
}
.positioning__choice-card p {
color: var(--ink-500);
font-size: 0.95rem;
line-height: 1.75;
}
.positioning__choice-card--primary {
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
border-color: transparent;
box-shadow: var(--shadow);
position: relative;
}
.positioning__choice-card--primary::before {
content: '';
position: absolute;
top: -10px; right: 22px;
width: 20px; height: 20px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(43, 184, 168, 0.2);
}
.positioning__choice-card--primary .eyebrow { color: #9ec6ff; }
.positioning__choice-card--primary h3 { color: #fff; }
.positioning__choice-card--primary p { color: rgba(255, 255, 255, 0.85); }
.positioning__choice-card--primary .btn--primary {
--btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff;
margin-top: auto;
align-self: flex-start;
}
.positioning__choice-card--primary .btn--primary:hover {
--btn-bg: #eaf2ff; color: var(--navy-900);
}
.positioning__footnote {
text-align: center;
color: var(--ink-400);
font-size: 0.82rem;
margin-top: 28px;
line-height: 1.7;
}
.d-md { display: inline; }
@media (max-width: 768px) {
.positioning__choice { grid-template-columns: 1fr; gap: 14px; }
.positioning__choice-card { padding: 26px 22px; }
.d-md { display: none; }
}
/* Contact trust badge */
.contact-trust {
margin-top: 22px;
padding: 14px 18px;
background: var(--bg-soft);
border: 1.5px solid var(--line);
border-radius: var(--radius);
display: inline-flex;
align-items: center;
gap: 14px;
max-width: 480px;
}
.contact-trust__badge {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--accent-soft);
color: #17746b;
display: grid; place-items: center;
font-size: 1.2rem;
flex: none;
}
.contact-trust strong {
color: var(--navy-900);
font-size: 0.92rem;
display: block;
}
.contact-trust small {
color: var(--ink-500);
font-size: 0.82rem;
line-height: 1.5;
display: block;
}
/* ============================================================
Journey (life stages)
============================================================ */
.journey-arc {
position: relative;
padding: 28px 0 12px;
}
.journey-arc__track {
position: absolute;
top: 56px;
left: 20px;
right: 20px;
height: 2px;
background: linear-gradient(90deg, var(--blue-500), var(--accent));
opacity: 0.35;
border-radius: 2px;
}
.journey-arc__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(7, minmax(140px, 1fr));
gap: 0;
position: relative;
}
.journey-node {
display: flex;
justify-content: center;
}
.journey-node__link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 6px 10px 16px;
color: inherit;
width: 100%;
max-width: 170px;
transition: transform 0.2s ease;
}
.journey-node__link:hover { transform: translateY(-4px); color: inherit; }
.journey-node__dot {
position: relative;
width: 58px; height: 58px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--blue-500);
display: grid;
place-items: center;
box-shadow: 0 0 0 6px var(--bg-soft), var(--shadow-sm);
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.journey-node__dot em {
font-style: normal;
font-weight: 800;
color: var(--navy-900);
font-size: 1.1rem;
}
.journey-node__link:hover .journey-node__dot {
transform: scale(1.05);
background: var(--navy-900);
border-color: var(--navy-900);
}
.journey-node__link:hover .journey-node__dot em { color: #fff; }
.journey-node__body {
display: flex; flex-direction: column; gap: 4px;
min-height: 56px;
}
.journey-node__name {
font-weight: 700;
color: var(--navy-900);
font-size: 0.98rem;
}
.journey-node__tagline {
color: var(--ink-500);
font-size: 0.82rem;
line-height: 1.45;
}
/* Stage grid (overview below arc) */
.stage-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.stage-card {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 26px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: inherit;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
overflow: hidden;
}
.stage-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--blue-500), var(--accent));
transform: scaleY(0); transform-origin: top;
transition: transform 0.3s ease;
}
.stage-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--blue-500);
color: inherit;
}
.stage-card:hover::before { transform: scaleY(1); }
.stage-card__step {
font-size: 0.72rem;
font-weight: 700;
color: var(--blue-600);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.stage-card__name { color: var(--navy-900); font-size: 1.2rem; }
.stage-card__headline { color: var(--ink-700); font-size: 0.95rem; line-height: 1.6; }
.stage-card__focus {
list-style: none; padding: 0; margin: 4px 0 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.stage-card__focus li {
font-size: 0.78rem;
padding: 4px 10px;
border-radius: 999px;
background: var(--blue-100);
color: var(--blue-600);
font-weight: 600;
}
.stage-card__more {
margin-top: auto;
color: var(--blue-600);
font-weight: 600;
font-size: 0.9rem;
padding-top: 8px;
}
/* Stage detail */
.stage-hero {
padding: 80px 0 40px;
background:
radial-gradient(900px 500px at 90% -20%, rgba(47, 127, 227, 0.14), transparent 60%),
linear-gradient(180deg, #eef3fb, #fff);
border-bottom: 1px solid var(--line-soft);
}
.stage-hero__breadcrumb {
font-size: 0.85rem; color: var(--ink-500);
margin-bottom: 12px;
}
.stage-hero__breadcrumb a { color: var(--ink-500); }
.stage-hero__breadcrumb a:hover { color: var(--navy-900); }
.stage-hero__breadcrumb span:last-child { color: var(--navy-900); font-weight: 600; }
.stage-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
margin: 10px 0 10px;
}
.stage-hero__tagline {
color: var(--ink-500);
font-size: 1.05rem;
}
.stage-hero__mini-arc {
display: flex; gap: 10px; margin-top: 28px;
flex-wrap: wrap;
}
.stage-hero__dot {
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--line);
color: var(--ink-500);
display: grid; place-items: center;
font-weight: 700; font-size: 0.8rem;
transition: all 0.15s ease;
}
.stage-hero__dot:hover { border-color: var(--blue-500); color: var(--navy-900); }
.stage-hero__dot.is-current {
background: var(--navy-900);
border-color: var(--navy-900);
color: #fff;
transform: scale(1.08);
}
.empathy-block {
background: var(--bg-soft);
border-left: 4px solid var(--blue-500);
border-radius: var(--radius);
padding: 28px 32px;
margin-bottom: 40px;
}
.empathy-block .eyebrow { color: var(--blue-600); }
.empathy-block .prose p {
font-size: 1.05rem;
color: var(--ink-700);
line-height: 1.85;
}
.focus-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.focus-card {
padding: 22px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.focus-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.focus-card h3 { color: var(--navy-900); font-size: 1.05rem; margin-bottom: 6px; }
.focus-card p { color: var(--ink-500); font-size: 0.95rem; line-height: 1.7; }
.self-check {
margin-top: 28px;
padding: 28px;
background: linear-gradient(160deg, #f4f8ff, #fff);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.self-check__desc {
color: var(--ink-500);
font-size: 0.95rem;
margin-bottom: 18px;
line-height: 1.7;
}
.self-check__list {
list-style: none; padding: 0; margin: 0 0 20px;
display: grid; gap: 10px;
}
.self-check__q {
display: flex; align-items: flex-start; gap: 12px;
cursor: pointer;
padding: 14px 16px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: var(--radius);
transition: all 0.15s ease;
color: var(--ink-700);
font-size: 0.95rem;
line-height: 1.6;
}
.self-check__q:hover { border-color: var(--blue-500); }
.self-check__q input[type="checkbox"] {
width: 20px; height: 20px;
accent-color: var(--blue-500);
margin-top: 2px; flex: none;
}
.self-check__q:has(input:checked) {
background: var(--blue-100);
border-color: var(--blue-500);
color: var(--navy-900);
font-weight: 500;
}
.self-check__result {
display: flex; align-items: baseline; gap: 6px;
padding: 16px 20px;
background: var(--navy-900);
color: #fff;
border-radius: var(--radius);
margin-bottom: 18px;
}
.self-check__result strong {
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.self-check__result span { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.self-check__hint { margin-left: auto; color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 500; }
.stage-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.stage-tool {
display: flex; flex-direction: column; gap: 8px;
padding: 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: inherit;
transition: all 0.2s ease;
}
.stage-tool h3 { color: var(--navy-900); font-size: 1.05rem; }
.stage-tool .eyebrow { margin: 0; font-size: 0.72rem; }
.stage-tool--ready:hover {
border-color: var(--blue-500);
box-shadow: var(--shadow);
transform: translateY(-2px);
color: inherit;
}
.stage-tool--ready .stage-tool__cta { color: var(--blue-600); font-weight: 600; margin-top: auto; }
.stage-tool--soon {
background: var(--bg-soft);
color: var(--ink-400);
cursor: not-allowed;
}
.stage-tool--soon h3 { color: var(--ink-500); }
.stage-tool--soon .stage-tool__cta { color: var(--ink-400); margin-top: auto; }
.stage-tool--soon .eyebrow { color: var(--ink-400); }
.service-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stage-aside__nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-top: 4px;
}
.stage-aside__nav-item {
padding: 14px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: inherit;
display: flex; flex-direction: column; gap: 4px;
transition: border-color 0.15s ease;
}
.stage-aside__nav-item:hover { border-color: var(--blue-500); color: inherit; }
.stage-aside__nav-item strong { color: var(--navy-900); font-size: 0.92rem; }
.stage-aside__nav-item .eyebrow { margin: 0; font-size: 0.68rem; }
.stage-aside__nav-item--next { text-align: right; }
/* ============================================================
Tools hub + tax simulator
============================================================ */
.tool-hub-grid,
.home-tools-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.tool-card {
position: relative;
display: flex; flex-direction: column; gap: 12px;
padding: 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: inherit;
transition: all 0.2s ease;
overflow: hidden;
}
.tool-card:not(.tool-card--soon):hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--blue-500);
color: inherit;
}
.tool-card__icon {
width: 52px; height: 52px;
border-radius: 14px;
background: var(--blue-100);
display: grid; place-items: center;
color: var(--blue-600);
position: relative;
}
.tool-card__icon::before {
content: ''; width: 26px; height: 26px;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: var(--icon, none); mask-image: var(--icon, none);
}
.tool-card__icon[data-icon='tax'] { --icon: url("data:image/svg+xml;utf8,"); }
.tool-card__icon[data-icon='wealth']{ --icon: url("data:image/svg+xml;utf8,"); }
.tool-card__icon[data-icon='claim'] { --icon: url("data:image/svg+xml;utf8,"); }
.tool-card__badge {
position: absolute;
top: 20px; right: 20px;
padding: 4px 10px;
background: var(--navy-900);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
border-radius: 999px;
letter-spacing: 0.05em;
}
.tool-card--soon .tool-card__badge {
background: var(--ink-400);
}
.tool-card__name {
color: var(--navy-900);
font-size: 1.15rem;
margin-top: 6px;
}
.tool-card__lead {
color: var(--ink-500);
font-size: 0.92rem;
line-height: 1.65;
}
.tool-card__cta {
margin-top: auto;
color: var(--blue-600);
font-weight: 600;
font-size: 0.9rem;
padding-top: 8px;
}
.tool-card--soon {
background: var(--bg-soft);
cursor: not-allowed;
}
.tool-card--soon .tool-card__icon {
background: #e3e8ef;
color: var(--ink-400);
}
.tool-card--soon .tool-card__name,
.tool-card--soon .tool-card__lead,
.tool-card--soon .tool-card__cta {
color: var(--ink-400);
}
.tool-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
align-items: start;
}
.tool-form {
padding: 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: grid; gap: 20px;
}
.tool-form__row {
display: grid;
gap: 16px;
}
.tool-form__row:has(.field:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.tool-form__row:has(.field:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; }
.tool-form select,
.tool-form input[type='number'],
.tool-form input[type='text'] {
width: 100%;
padding: 13px 14px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
font: inherit;
color: var(--ink-900);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-form select:focus,
.tool-form input:focus {
outline: none;
border-color: var(--blue-500);
box-shadow: 0 0 0 4px rgba(47, 127, 227, 0.12);
}
.tool-aside { display: grid; gap: 16px; position: sticky; top: 110px; }
.tool-aside__box {
padding: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.tool-aside__box h3 { font-size: 1rem; margin-bottom: 12px; color: var(--navy-900); }
.tool-aside__box ul { list-style: none; padding: 0; margin: 0; }
.tool-aside__box li {
padding-left: 18px;
position: relative;
color: var(--ink-700);
font-size: 0.92rem;
margin: 8px 0;
line-height: 1.6;
}
.tool-aside__box li::before {
content: '';
position: absolute; left: 0; top: 10px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--blue-500);
}
.tool-aside__box--muted {
background: var(--bg-soft);
border-style: solid;
}
.tool-aside__box--muted p {
color: var(--ink-500);
font-size: 0.92rem;
margin-bottom: 14px;
line-height: 1.7;
}
/* Tool result */
.tool-result-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.tool-result-card {
padding: 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 14px;
}
.tool-result-card .eyebrow { margin: 0; font-size: 0.75rem; }
.tool-result-card__num {
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 800;
color: var(--navy-900);
line-height: 1.1;
letter-spacing: -0.02em;
}
.tool-result-card__num em {
font-size: 0.55em;
font-weight: 700;
font-style: normal;
color: var(--blue-600);
margin-left: 2px;
}
.tool-result-card__range { display: inline-flex; align-items: baseline; gap: 2px; }
.tool-result-card__range em {
font-size: 0.6em;
font-style: normal;
color: var(--ink-400);
padding: 0 4px;
}
.tool-result-card__note {
color: var(--ink-500);
font-size: 0.9rem;
line-height: 1.7;
margin-top: auto;
}
.tool-result-card--primary {
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
border-color: transparent;
}
.tool-result-card--primary .eyebrow { color: #9ec6ff; }
.tool-result-card--primary .tool-result-card__num { color: #fff; }
.tool-result-card--primary .tool-result-card__num em { color: #9ec6ff; }
.tool-result-card--primary .tool-result-card__note { color: rgba(255,255,255,0.85); }
.tool-result-card--primary strong { color: #fff; }
.savings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.savings-card {
padding: 22px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
border-left: 4px solid var(--accent);
}
.savings-card__delta {
color: #17746b;
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.01em;
}
.savings-card__delta em {
font-size: 0.65em;
font-weight: 700;
font-style: normal;
color: #1a8f7e;
margin-left: 2px;
}
.savings-card h3 { color: var(--navy-900); font-size: 1rem; margin: 6px 0; }
.savings-card p { color: var(--ink-500); font-size: 0.9rem; line-height: 1.7; }
.savings-grid__note {
color: var(--ink-500);
font-size: 0.85rem;
line-height: 1.7;
margin-bottom: 32px;
}
.tool-result-cta {
padding: 40px;
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 30px;
margin-bottom: 24px;
}
.tool-result-cta h2 { color: #fff; margin: 8px 0; font-size: 1.5rem; }
.tool-result-cta p { color: rgba(255,255,255,0.85); font-size: 0.98rem; }
.tool-result-cta .eyebrow { color: #9ec6ff; }
.tool-result-cta__actions { display: flex; flex-direction: column; gap: 10px; }
.tool-result-cta .btn--primary { --btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff; }
.tool-result-cta .btn--primary:hover { --btn-bg: #eaf2ff; color: var(--navy-900); }
.tool-result-cta .btn--ghost { --btn-color: #fff; --btn-border: rgba(255,255,255,0.4); }
.tool-result-cta .btn--ghost:hover { --btn-bg: rgba(255,255,255,0.12); color: #fff; }
.disclaimer {
color: var(--ink-400);
font-size: 0.82rem;
line-height: 1.7;
background: var(--bg-soft);
padding: 14px 18px;
border-radius: var(--radius-sm);
border-left: 3px solid var(--line);
}
/* Retirement result --------------------------------------------- */
.retire-gap {
padding: 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-bottom: 32px;
display: grid; gap: 20px;
}
.retire-gap__row {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
align-items: center;
}
.retire-gap__label .eyebrow { margin: 0 0 4px; font-size: 0.72rem; }
.retire-gap__label strong {
color: var(--navy-900);
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
display: block;
}
.retire-gap__label strong em {
font-size: 0.5em;
font-style: normal;
color: var(--blue-600);
margin-left: 2px;
}
.retire-gap__label small {
color: var(--ink-500);
font-size: 0.82rem;
display: block;
margin-top: 4px;
}
.retire-gap__bar {
height: 22px;
background: var(--bg-gray);
border-radius: 999px;
overflow: hidden;
}
.retire-gap__fill {
height: 100%;
border-radius: 999px;
transition: width 0.8s ease;
}
.retire-gap__fill--need { background: linear-gradient(90deg, var(--navy-900), var(--blue-600)); }
.retire-gap__fill--secured { background: linear-gradient(90deg, var(--accent), #4fcbbe); }
.retire-gap__summary {
margin-top: 12px;
padding: 24px 28px;
border-radius: var(--radius);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 20px;
}
.retire-gap__summary.is-gap { background: #fff4f4; border: 1.5px solid #ffd5d5; }
.retire-gap__summary.is-surplus { background: var(--accent-soft); border: 1.5px solid #aee4db; }
.retire-gap__summary .eyebrow { margin: 0 0 4px; }
.retire-gap__summary.is-gap .eyebrow { color: #c5342b; }
.retire-gap__summary.is-surplus .eyebrow { color: #17746b; }
.retire-gap__number {
font-size: 2rem;
font-weight: 800;
color: var(--navy-900);
line-height: 1.1;
letter-spacing: -0.02em;
}
.retire-gap__number em { font-style: normal; font-size: 0.6em; color: var(--ink-500); font-weight: 700; margin-left: 2px; }
.retire-gap__number span { font-size: 0.5em; font-weight: 600; color: var(--ink-500); margin-left: 8px; }
.retire-gap__note { color: var(--ink-700); font-size: 0.92rem; line-height: 1.75; margin-top: 8px; }
.retire-gap__coverage {
text-align: center;
padding: 14px 20px;
background: #fff;
border-radius: var(--radius);
border: 1.5px solid var(--line);
}
.retire-gap__coverage span {
display: block;
font-size: 0.72rem;
font-weight: 700;
color: var(--ink-500);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.retire-gap__coverage strong {
display: block;
font-size: 2rem;
color: var(--navy-900);
font-weight: 800;
margin-top: 4px;
}
.retire-scenarios {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.retire-scenario {
padding: 28px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 10px;
}
.retire-scenario .eyebrow { margin: 0; font-size: 0.72rem; }
.retire-scenario h3 { color: var(--navy-900); font-size: 1.1rem; line-height: 1.45; font-weight: 700; }
.retire-scenario h3 strong { color: var(--blue-600); }
.retire-scenario p { color: var(--ink-500); font-size: 0.92rem; line-height: 1.7; }
.retire-scenario__note {
color: var(--ink-400);
font-size: 0.82rem;
border-top: 1px dashed var(--line);
padding-top: 10px;
margin-top: 4px;
}
.retire-scenario--primary {
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
border-color: transparent;
}
.retire-scenario--primary h3 { color: #fff; }
.retire-scenario--primary h3 strong { color: #9ec6ff; }
.retire-scenario--primary p { color: rgba(255, 255, 255, 0.85); }
.retire-scenario--primary .eyebrow { color: #9ec6ff; }
.retire-scenario--primary .btn--primary {
--btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff;
margin-top: auto;
}
.retire-scenario--primary .btn--primary:hover { --btn-bg: #eaf2ff; color: var(--navy-900); }
@media (max-width: 1024px) {
.retire-scenarios { grid-template-columns: 1fr; }
.retire-gap__row { grid-template-columns: 1fr; gap: 12px; }
.retire-gap__summary { grid-template-columns: 1fr; text-align: center; }
.retire-gap__coverage { justify-self: center; }
}
@media (max-width: 768px) {
.retire-gap { padding: 22px; }
.retire-gap__label strong { font-size: 1.3rem; }
.retire-gap__number { font-size: 1.6rem; }
.retire-gap__coverage strong { font-size: 1.5rem; }
}
/* Attach diagnostic banner on contact form */
.attach-diagnostic {
padding: 16px 18px;
background: linear-gradient(140deg, #eef6ff, var(--accent-soft));
border: 1.5px solid #bcdaff;
border-radius: var(--radius);
}
.attach-diagnostic__label {
display: flex; gap: 14px; align-items: flex-start;
cursor: pointer; margin: 0;
}
.attach-diagnostic__label input[type='checkbox'] {
width: 20px; height: 20px; accent-color: var(--blue-500);
margin-top: 2px; flex: none;
}
.attach-diagnostic__label strong { color: var(--navy-900); font-size: 0.95rem; display: block; margin-bottom: 4px; }
.attach-diagnostic__label small { color: var(--ink-700); font-size: 0.85rem; line-height: 1.6; display: block; }
/* ============================================================
Urgent Legal (law firm relay)
============================================================ */
.legal-hero {
padding: 72px 0 48px;
background:
radial-gradient(900px 500px at 90% -20%, rgba(197, 52, 43, 0.1), transparent 60%),
linear-gradient(180deg, #fff7f7, #fff);
border-bottom: 1px solid var(--line-soft);
text-align: center;
}
.legal-hero h1 {
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
line-height: 1.2;
margin: 10px 0;
}
.legal-hero h1 .accent { color: #c5342b; }
.legal-hero__lead {
color: var(--ink-700);
font-size: 1.02rem;
line-height: 1.75;
margin: 14px auto 28px;
max-width: 620px;
}
.legal-perks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 640px;
margin: 0 auto;
}
.legal-perks > div {
padding: 18px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.legal-perks span { font-size: 1.4rem; line-height: 1; }
.legal-perks strong { color: var(--navy-900); font-size: 0.92rem; }
.legal-perks small { color: var(--ink-500); font-size: 0.78rem; }
.legal-alert {
padding: 18px 22px;
background: #fff4f4;
border: 1.5px solid #ffd5d5;
border-radius: var(--radius);
margin-bottom: 4px;
}
.legal-alert > strong {
color: #c5342b;
font-size: 0.95rem;
display: block;
margin-bottom: 10px;
}
.legal-alert .checkbox { background: #fff; border-color: #ffcfcf; }
@media (max-width: 768px) {
.legal-perks { grid-template-columns: 1fr; }
}
/* ============================================================
Portal (client-only area)
============================================================ */
.portal-hero {
padding: 64px 0 32px;
background: linear-gradient(180deg, var(--bg-soft), #fff);
border-bottom: 1px solid var(--line-soft);
}
.portal-hero__inner {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 20px; flex-wrap: wrap;
}
.portal-hero h1 { font-size: clamp(1.6rem, 2.8vw, 2rem); margin: 6px 0 8px; }
.portal-hero__lead { color: var(--ink-500); font-size: 0.95rem; line-height: 1.7; }
.portal-hero__actions { flex: none; }
.portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 18px;
}
.portal-card {
padding: 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 16px;
min-height: 260px;
}
.portal-card > header .eyebrow { margin: 0 0 4px; }
.portal-card > header h2 { font-size: 1.15rem; }
.portal-card .btn { align-self: flex-start; margin-top: auto; }
.portal-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
.portal-list li a {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 14px;
padding: 14px 16px;
background: var(--bg-soft);
border-radius: var(--radius-sm);
border: 1px solid transparent;
color: inherit;
transition: border-color 0.15s ease;
}
.portal-list li a:hover { border-color: var(--blue-500); color: inherit; }
.portal-list strong { grid-row: 1 / 2; grid-column: 1 / 2; color: var(--navy-900); font-size: 0.95rem; line-height: 1.4; }
.portal-list span { grid-row: 2 / 3; grid-column: 1 / 2; color: var(--ink-500); font-size: 0.82rem; }
.portal-list time { grid-row: 1 / 3; grid-column: 2 / 3; color: var(--ink-400); font-size: 0.82rem; align-self: center; font-variant-numeric: tabular-nums; }
.portal-full-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 8px;
}
.portal-full-list li a {
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
padding: 18px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: inherit;
transition: border-color 0.15s ease;
}
.portal-full-list li a:hover { border-color: var(--blue-500); }
.portal-full-list strong { display: block; color: var(--navy-900); font-size: 1rem; margin-bottom: 3px; }
.portal-full-list small { color: var(--ink-500); font-size: 0.84rem; }
.portal-full-list time { color: var(--ink-400); font-size: 0.88rem; font-variant-numeric: tabular-nums; flex: none; }
.portal-empty {
padding: 30px 16px;
text-align: center;
color: var(--ink-500);
background: var(--bg-soft);
border-radius: var(--radius);
font-size: 0.92rem;
}
/* ============================================================
Resources (free diagnostic checklist) + my-diagnostics
============================================================ */
.resource-block {
padding: 28px 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-bottom: 20px;
}
.resource-block .detail-section__title { margin-top: 0; }
.resource-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.resource-list li {
padding: 12px 16px 12px 40px;
background: var(--bg-soft);
border-radius: var(--radius-sm);
color: var(--ink-700);
font-size: 0.95rem;
line-height: 1.65;
position: relative;
}
.resource-list li::before {
content: '✓';
position: absolute;
left: 14px;
top: 12px;
color: var(--accent);
font-weight: 800;
font-size: 1rem;
}
.resource-list strong { color: var(--navy-900); }
.resource-tip {
margin-top: 20px;
padding: 28px 32px;
background: linear-gradient(140deg, #eef6ff, var(--accent-soft));
border: 1.5px solid #bcdaff;
border-radius: var(--radius-lg);
}
.resource-tip .eyebrow { color: var(--blue-600); margin: 0 0 6px; }
.resource-tip h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; }
.resource-tip p { color: var(--ink-700); line-height: 1.8; }
.my-diag-list { display: grid; gap: 12px; margin-bottom: 32px; }
.my-diag-card {
padding: 22px 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.my-diag-card__head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 10px;
}
.my-diag-card__head time {
color: var(--ink-500); font-size: 0.88rem; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.my-diag-card__summary { color: var(--navy-900); font-weight: 500; line-height: 1.7; margin-bottom: 12px; }
.my-diag-card__details summary {
cursor: pointer; color: var(--blue-600);
font-size: 0.88rem; font-weight: 600; list-style: none;
}
.my-diag-card__details summary::-webkit-details-marker { display: none; }
.my-diag-card__details summary::before { content: '▸ '; color: var(--blue-500); }
.my-diag-card__details[open] summary::before { content: '▾ '; }
.my-diag-card__json {
margin-top: 12px; padding: 14px 18px;
background: var(--bg-soft); border-radius: var(--radius-sm);
font-size: 0.82rem;
}
.my-diag-card__json h4 {
color: var(--ink-500); font-size: 0.78rem;
letter-spacing: 0.06em; text-transform: uppercase; margin: 6px 0;
}
.my-diag-card__json pre {
color: var(--ink-700); background: transparent;
padding: 0; margin: 0;
white-space: pre-wrap; word-break: break-all;
}
/* ============================================================
Partners (ecosystem)
============================================================ */
.partner-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.partner-card {
--accent: var(--blue-600);
position: relative;
padding: 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 16px;
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.partner-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent);
opacity: 0.9;
}
.partner-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.partner-card__head {
display: flex; gap: 14px; align-items: center;
}
.partner-card__mark {
flex: none;
width: 52px; height: 52px;
border-radius: 12px;
background: var(--accent);
color: #fff;
display: grid; place-items: center;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.04em;
overflow: hidden;
}
.partner-card__mark--img {
background: #fff;
border: 1px solid var(--line);
padding: 6px;
}
.partner-card__mark--img img {
width: 100%; height: 100%;
object-fit: contain;
}
.partner-card__name {
color: var(--navy-900);
font-size: 1.15rem;
line-height: 1.35;
margin-bottom: 4px;
}
.partner-card__role {
color: var(--ink-500);
font-size: 0.88rem;
font-weight: 500;
}
.partner-card__summary {
color: var(--ink-700);
font-size: 0.95rem;
line-height: 1.7;
}
.partner-card__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
margin: 0;
padding: 14px;
background: var(--bg-soft);
border-radius: var(--radius);
}
.partner-card__stats > div { text-align: center; }
.partner-card__stats dt {
color: var(--ink-500);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.partner-card__stats dd {
color: var(--navy-900);
font-weight: 800;
font-size: 1.02rem;
margin: 2px 0 0;
letter-spacing: -0.01em;
}
.partner-card__features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 4px;
}
.partner-card__features li {
color: var(--ink-700);
font-size: 0.88rem;
padding-left: 16px;
position: relative;
line-height: 1.6;
}
.partner-card__features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
}
.partner-card__foot {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 4px;
}
.partner-card__foot .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; }
.partner-hero {
--accent: var(--blue-600);
padding: 72px 0 48px;
background:
linear-gradient(135deg, rgba(47, 127, 227, 0.06), transparent 40%),
linear-gradient(180deg, var(--bg-soft), #fff);
border-bottom: 1px solid var(--line-soft);
border-top: 4px solid var(--accent);
}
.partner-hero__body {
display: flex;
gap: 24px;
align-items: flex-start;
margin-top: 16px;
flex-wrap: wrap;
}
.partner-hero__mark {
flex: none;
width: 84px; height: 84px;
border-radius: 18px;
background: var(--accent);
color: #fff;
display: grid; place-items: center;
font-weight: 800;
font-size: 1.8rem;
letter-spacing: 0.04em;
box-shadow: 0 12px 30px -12px rgba(11, 30, 63, 0.3);
overflow: hidden;
}
.partner-hero__mark--img {
background: #fff;
border: 1px solid var(--line);
padding: 10px;
}
.partner-hero__mark--img img {
width: 100%; height: 100%;
object-fit: contain;
}
.partner-hero h1 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin: 6px 0 8px;
}
.partner-hero__role {
color: var(--ink-500);
font-size: 1.02rem;
font-weight: 600;
margin-bottom: 14px;
}
.partner-hero__summary {
color: var(--ink-700);
font-size: 1rem;
line-height: 1.75;
margin-bottom: 24px;
max-width: 720px;
}
.partner-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.partner-stats__card {
padding: 26px 20px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
}
.partner-stats__value {
color: var(--navy-900);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.partner-stats__label {
color: var(--ink-500);
font-size: 0.88rem;
margin-top: 6px;
}
/* Home ecosystem strip */
.section--ecosystem .partner-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 768px) {
.partner-card { padding: 22px; }
.partner-hero { padding: 56px 0 32px; }
.partner-hero__mark { width: 64px; height: 64px; font-size: 1.4rem; border-radius: 14px; }
}
/* ============================================================
Booking (embed)
============================================================ */
.booking-embed {
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow);
background: #fff;
}
.booking-embed iframe {
display: block;
width: 100%;
min-height: 720px;
border: 0;
}
.booking-fallback {
padding: 40px 28px;
background: var(--bg-soft);
border: 1.5px dashed var(--line);
border-radius: var(--radius-lg);
text-align: center;
}
.booking-fallback h2 { font-size: 1.4rem; margin: 6px 0 14px; }
.booking-fallback p { color: var(--ink-500); line-height: 1.7; margin-bottom: 20px; }
/* ============================================================
Seminars (list + detail)
============================================================ */
.seminar-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.seminar-grid--past { opacity: 0.75; }
.seminar-card {
position: relative;
display: flex; flex-direction: column; gap: 12px;
padding: 28px 28px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.seminar-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--blue-500), var(--accent));
transform: scaleX(0); transform-origin: left;
transition: transform 0.35s ease;
}
.seminar-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--blue-500);
color: inherit;
}
.seminar-card:hover::before { transform: scaleX(1); }
.seminar-card__badge {
display: flex; flex-wrap: wrap; gap: 6px;
}
.seminar-card__source {
padding: 4px 10px;
background: var(--navy-900);
color: #fff;
font-size: 0.72rem; font-weight: 700;
border-radius: 999px; letter-spacing: 0.04em;
}
.seminar-card__online {
padding: 4px 10px;
background: var(--accent);
color: #fff;
font-size: 0.7rem; font-weight: 800;
border-radius: 999px;
}
.seminar-card__featured {
padding: 4px 10px;
background: var(--blue-100);
color: var(--blue-600);
font-size: 0.72rem; font-weight: 700;
border-radius: 999px;
}
.seminar-card__title {
color: var(--navy-900);
font-size: 1.22rem;
line-height: 1.35;
}
.seminar-card__subtitle {
color: var(--ink-700);
font-size: 0.92rem;
font-weight: 500;
}
.seminar-card__summary {
color: var(--ink-500);
font-size: 0.92rem;
line-height: 1.65;
}
.seminar-card__meta {
display: grid; gap: 6px;
margin: 0;
}
.seminar-card__meta > div {
display: grid;
grid-template-columns: 50px 1fr;
gap: 10px;
font-size: 0.88rem;
}
.seminar-card__meta dt {
color: var(--ink-400);
font-weight: 600;
}
.seminar-card__meta dd {
color: var(--ink-700);
margin: 0;
}
.seminar-card__meta-inline {
color: var(--ink-500);
font-size: 0.88rem;
}
.seminar-card__cta {
margin-top: auto;
color: var(--blue-600);
font-weight: 600;
font-size: 0.9rem;
padding-top: 8px;
}
.seminar-card--past::before { display: none; }
.seminar-hero {
padding: 80px 0 48px;
background:
radial-gradient(900px 500px at 90% -20%, rgba(47, 127, 227, 0.15), transparent 60%),
linear-gradient(180deg, #eef3fb, #fff);
border-bottom: 1px solid var(--line-soft);
}
.seminar-hero__row { max-width: 820px; }
.seminar-hero h1 {
font-size: clamp(1.8rem, 3.4vw, 2.4rem);
line-height: 1.25;
margin: 8px 0 10px;
}
.seminar-hero__subtitle {
color: var(--navy-900);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
}
.seminar-hero__summary {
color: var(--ink-500);
font-size: 1rem;
line-height: 1.75;
margin-bottom: 22px;
}
.seminar-hero__meta {
display: grid; gap: 10px; margin: 0 0 22px;
}
.seminar-hero__meta > div {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
font-size: 0.95rem;
}
.seminar-hero__meta dt {
color: var(--ink-500);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.seminar-hero__meta dd {
color: var(--navy-900);
margin: 0;
font-weight: 500;
}
.seminar-hero__meta dd small {
display: block;
color: var(--ink-500);
font-size: 0.85rem;
font-weight: 400;
margin-top: 2px;
}
.seminar-perks {
list-style: none; padding: 0;
margin: 0 0 28px;
display: grid; gap: 6px;
}
.seminar-perks li {
color: var(--ink-700);
font-size: 0.95rem;
font-weight: 500;
}
.seminar-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.seminar-tracks {
display: grid; gap: 18px;
}
.seminar-track {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px 32px 32px;
}
.seminar-track__head {
padding-bottom: 16px;
margin-bottom: 18px;
border-bottom: 1.5px solid var(--line-soft);
}
.seminar-track__idx {
display: inline-block;
padding: 4px 12px;
background: var(--navy-900);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
border-radius: 999px;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.seminar-track__head h3 {
color: var(--navy-900);
font-size: 1.3rem;
line-height: 1.35;
}
.seminar-track__head p {
color: var(--ink-500);
font-size: 0.95rem;
margin-top: 6px;
}
.seminar-sessions {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 0;
}
.seminar-session {
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
padding: 16px 0;
border-bottom: 1px dashed var(--line-soft);
}
.seminar-session:last-child { border-bottom: 0; }
.seminar-session__time {
color: var(--blue-600);
font-weight: 700;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
padding-top: 2px;
}
.seminar-session__body h4 {
color: var(--navy-900);
font-size: 1rem;
line-height: 1.45;
margin-bottom: 4px;
}
.seminar-session__speaker {
color: var(--ink-500);
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 6px;
}
.seminar-session__bullets {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: grid; gap: 3px;
}
.seminar-session__bullets li {
color: var(--ink-500);
font-size: 0.88rem;
line-height: 1.65;
padding-left: 14px;
position: relative;
}
.seminar-session__bullets li::before {
content: '·';
position: absolute;
left: 4px;
color: var(--blue-500);
font-weight: 700;
}
@media (max-width: 1024px) {
.seminar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.seminar-hero { padding: 56px 0 32px; }
.seminar-track { padding: 22px 20px 26px; }
.seminar-session { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
.seminar-session__time { font-size: 0.85rem; }
.seminar-hero__meta > div { grid-template-columns: 64px 1fr; gap: 10px; font-size: 0.9rem; }
}
/* Tool widget (embedded in stage detail) ------------------------ */
.stage-widgets {
display: grid;
gap: 16px;
margin-bottom: 16px;
}
.tool-widget {
padding: 26px 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: grid;
gap: 18px;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-widget:focus-within {
border-color: var(--blue-500);
box-shadow: var(--shadow);
}
.tool-widget__head {
display: flex;
gap: 16px;
align-items: flex-start;
}
.tool-widget__head > div { flex: 1; }
.tool-widget__head .eyebrow { margin: 0 0 4px; font-size: 0.7rem; }
.tool-widget__head h3 {
color: var(--navy-900);
font-size: 1.15rem;
margin-bottom: 4px;
}
.tool-widget__lead {
color: var(--ink-500);
font-size: 0.9rem;
line-height: 1.6;
}
.tool-widget__icon {
flex: none;
width: 48px; height: 48px;
border-radius: 12px;
background: var(--blue-100);
display: grid; place-items: center;
color: var(--blue-600);
position: relative;
}
.tool-widget__icon::before {
content: ''; width: 22px; height: 22px;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: var(--icon, none); mask-image: var(--icon, none);
}
.tool-widget__icon[data-icon='tax'] { --icon: url("data:image/svg+xml;utf8,"); }
.tool-widget__icon[data-icon='wealth']{ --icon: url("data:image/svg+xml;utf8,"); }
.tool-widget__icon[data-icon='claim'] { --icon: url("data:image/svg+xml;utf8,"); }
.tool-widget__grid {
display: grid;
gap: 10px;
}
.tool-widget__grid--5 { grid-template-columns: 1.3fr 1fr 0.8fr 0.8fr 0.8fr; }
.tool-widget__grid--4 { grid-template-columns: 1.3fr 1fr 0.8fr 0.8fr; }
.tool-widget__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-widget .field { gap: 4px; }
.tool-widget .field__label { font-size: 0.78rem; font-weight: 600; color: var(--ink-700); }
.tool-widget input,
.tool-widget select {
width: 100%;
padding: 10px 12px;
font: inherit;
color: var(--ink-900);
background: #fff;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-widget input:focus,
.tool-widget select:focus {
outline: none;
border-color: var(--blue-500);
box-shadow: 0 0 0 3px rgba(47, 127, 227, 0.12);
}
.tool-widget__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding-top: 4px;
border-top: 1px dashed var(--line);
}
.tool-widget__foot .btn {
padding: 11px 22px;
}
.tool-widget__more {
color: var(--ink-500);
font-size: 0.85rem;
font-weight: 600;
}
.tool-widget__more:hover { color: var(--navy-900); }
.tool-widget--soon {
background: var(--bg-soft);
color: var(--ink-500);
padding: 22px 26px;
}
@media (max-width: 1024px) {
.tool-widget__grid--5 { grid-template-columns: 1fr 1fr 1fr; }
.tool-widget__grid--4 { grid-template-columns: 1fr 1fr; }
.tool-widget__grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.tool-widget { padding: 20px; }
.tool-widget__grid--5,
.tool-widget__grid--4,
.tool-widget__grid--3 { grid-template-columns: 1fr; }
.tool-widget__foot { justify-content: center; }
.tool-widget__foot .btn { width: 100%; }
}
/* Benchmark result --------------------------------------------- */
.bench-position {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
padding: 32px;
background: linear-gradient(140deg, var(--navy-900), var(--blue-600));
color: #fff;
border-radius: var(--radius-lg);
margin-bottom: 32px;
align-items: center;
}
.bench-position__label .eyebrow { color: #9ec6ff; margin: 0 0 6px; }
.bench-position__label h2 {
color: #fff;
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 6px;
}
.bench-position__share {
color: rgba(255, 255, 255, 0.85);
font-size: 0.95rem;
}
.bench-tiers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.bench-tier {
padding: 18px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius);
text-align: center;
color: rgba(255, 255, 255, 0.75);
display: flex; flex-direction: column; gap: 4px;
}
.bench-tier__no {
font-weight: 800;
font-size: 1.4rem;
color: #9ec6ff;
}
.bench-tier__label {
font-size: 0.85rem;
font-weight: 600;
}
.bench-tier__mark {
margin-top: 4px;
font-size: 0.72rem;
letter-spacing: 0.12em;
color: var(--accent);
font-weight: 700;
}
.bench-tier--active {
background: #fff;
color: var(--navy-900);
border-color: #fff;
box-shadow: 0 0 0 4px rgba(43, 184, 168, 0.3);
}
.bench-tier--active .bench-tier__no { color: var(--blue-600); }
.bench-tier--active .bench-tier__label { color: var(--navy-900); }
.bench-checks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 40px;
}
.bench-check {
padding: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.bench-check .eyebrow { margin: 0 0 8px; font-size: 0.72rem; }
.bench-check__num {
font-size: 1.6rem;
font-weight: 800;
color: var(--navy-900);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.bench-check__num em {
font-size: 0.5em;
font-style: normal;
color: var(--blue-600);
font-weight: 700;
margin-left: 2px;
}
.bench-check__sep {
font-size: 0.55em;
color: var(--ink-400);
font-weight: 600;
padding: 0 4px;
}
.bench-check__note {
color: var(--ink-500);
font-size: 0.9rem;
line-height: 1.65;
}
.bench-check__note strong { color: var(--navy-900); }
.bench-concerns {
list-style: none;
padding: 0;
margin: 0 0 40px;
display: grid;
gap: 10px;
}
.bench-concern {
padding: 18px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
align-items: flex-start;
gap: 16px;
transition: border-color 0.15s ease;
}
.bench-concern:hover { border-color: var(--blue-500); }
.bench-concern__no {
font-weight: 800;
color: var(--blue-600);
font-size: 0.92rem;
letter-spacing: 0.04em;
flex: none;
width: 32px;
padding-top: 2px;
}
.bench-concern__text {
color: var(--ink-700);
font-weight: 500;
line-height: 1.65;
font-size: 0.95rem;
}
.bench-next {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.bench-next__tool,
.bench-next__consult {
padding: 28px;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 10px;
}
.bench-next__tool {
background: #fff;
border: 1.5px solid var(--line);
color: inherit;
transition: all 0.2s ease;
}
.bench-next__tool:hover {
border-color: var(--blue-500);
box-shadow: var(--shadow);
transform: translateY(-2px);
color: inherit;
}
.bench-next__tool .eyebrow { margin: 0; }
.bench-next__tool h3 { color: var(--navy-900); font-size: 1.15rem; }
.bench-next__tool p { color: var(--ink-500); font-size: 0.92rem; line-height: 1.65; }
.bench-next__cta {
margin-top: auto;
color: var(--blue-600);
font-weight: 600;
font-size: 0.9rem;
padding-top: 8px;
}
.bench-next__consult {
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
}
.bench-next__consult .eyebrow { color: #9ec6ff; margin: 0; }
.bench-next__consult h3 { color: #fff; font-size: 1.15rem; line-height: 1.45; }
.bench-next__consult p { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.65; }
.bench-next__consult .btn--primary {
--btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff;
margin-top: auto;
}
.bench-next__consult .btn--primary:hover { --btn-bg: #eaf2ff; color: var(--navy-900); }
@media (max-width: 1024px) {
.bench-checks { grid-template-columns: 1fr; }
.bench-next { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.bench-position { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; }
.bench-position__label h2 { font-size: 1.8rem; }
.bench-tiers { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bench-check__num { font-size: 1.3rem; }
}
/* ============================================================
Responsive adjustments for Journey + Tools
============================================================ */
@media (max-width: 1024px) {
.stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-hub-grid, .home-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-result-grid { grid-template-columns: 1fr; }
.tool-layout { grid-template-columns: 1fr; }
.tool-aside { position: static; }
.focus-grid { grid-template-columns: 1fr; }
.savings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.journey-arc__list {
grid-template-columns: repeat(7, 140px);
overflow-x: auto;
padding: 4px 4px 8px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.journey-node { scroll-snap-align: start; }
.journey-arc__track { left: 70px; right: auto; width: calc(7 * 140px - 140px); }
.stage-grid { grid-template-columns: 1fr; }
.tool-hub-grid, .home-tools-grid { grid-template-columns: 1fr; }
.self-check__result { flex-wrap: wrap; }
.self-check__hint { margin-left: 0; margin-top: 6px; flex-basis: 100%; }
.stage-tools { grid-template-columns: 1fr; }
.service-grid--sm { grid-template-columns: 1fr; }
.empathy-block { padding: 22px 20px; }
.stage-hero { padding: 56px 0 28px; }
.stage-hero__mini-arc { gap: 6px; }
.stage-hero__dot { width: 30px; height: 30px; font-size: 0.75rem; }
.tool-result-cta { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; }
.tool-result-cta__actions { flex-direction: row; }
.tool-result-cta__actions .btn { flex: 1 1 auto; }
.tool-form { padding: 22px; }
.tool-form__row:has(.field:nth-child(2):last-child),
.tool-form__row:has(.field:nth-child(3):last-child) { grid-template-columns: 1fr; }
.stage-aside__nav { grid-template-columns: 1fr; }
}
/* -------- Service detail : concerns -------- */
.concern-grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.concern-card {
display: flex; gap: 16px; align-items: flex-start;
padding: 22px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.concern-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-500); }
.concern-card__badge {
flex: none;
width: 32px; height: 32px; border-radius: 50%;
background: var(--blue-100); color: var(--blue-600);
font-weight: 800; font-size: 1rem;
display: grid; place-items: center;
}
.concern-card p { color: var(--ink-700); font-weight: 500; line-height: 1.6; }
/* -------- Service detail : process timeline -------- */
.process-timeline {
list-style: none; padding: 0; margin: 0 0 8px;
position: relative;
counter-reset: step;
}
.process-timeline::before {
content: ''; position: absolute;
left: 19px; top: 8px; bottom: 8px; width: 2px;
background: linear-gradient(to bottom, var(--blue-500), var(--accent));
opacity: 0.25;
}
.process-timeline__item {
position: relative;
padding: 4px 0 24px 56px;
}
.process-timeline__item:last-child { padding-bottom: 0; }
.process-timeline__num {
position: absolute; left: 0; top: 2px;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--navy-900);
color: #fff; font-weight: 800; font-size: 0.9rem;
display: grid; place-items: center;
box-shadow: 0 0 0 6px #fff;
}
.process-timeline__body h3 {
font-size: 1.08rem; color: var(--navy-900); margin: 4px 0 6px;
}
.process-timeline__body p {
color: var(--ink-500); font-size: 0.95rem; line-height: 1.7;
}
/* -------- Service detail : FAQ accordion -------- */
.faq-list { display: grid; gap: 10px; margin: 0 0 8px; }
.faq-list details {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-list details[open] {
border-color: var(--blue-500);
box-shadow: var(--shadow-sm);
}
.faq-list summary {
list-style: none;
cursor: pointer;
padding: 18px 56px 18px 24px;
position: relative;
font-weight: 600;
color: var(--navy-900);
font-size: 1rem;
line-height: 1.5;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: ''; position: absolute; right: 22px; top: 50%;
width: 14px; height: 14px; margin-top: -7px;
background-image:
linear-gradient(var(--navy-900), var(--navy-900)),
linear-gradient(var(--navy-900), var(--navy-900));
background-size: 14px 2px, 2px 14px;
background-position: center center, center center;
background-repeat: no-repeat;
transition: transform .2s ease;
}
.faq-list details[open] summary::after {
background-size: 14px 2px, 0 0;
}
.faq-list summary:hover { color: var(--blue-600); }
.faq-list__answer {
padding: 0 24px 22px;
color: var(--ink-700);
line-height: 1.75;
}
.faq-list__answer p { margin: 0 0 0.8em; }
.faq-list__answer p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.concern-grid { grid-template-columns: 1fr; }
.process-timeline::before { left: 15px; }
.process-timeline__item { padding-left: 48px; }
.process-timeline__num { width: 32px; height: 32px; font-size: 0.8rem; }
.faq-list summary { padding: 16px 48px 16px 18px; font-size: 0.95rem; }
.faq-list__answer { padding: 0 18px 18px; }
}
/* -------- Service detail -------- */
.detail-grid {
display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start;
}
.detail-main { max-width: 760px; }
.detail-section__title {
margin: 40px 0 16px; font-size: 1.4rem;
}
.feature-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
}
.feature-list li {
padding: 20px 22px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.feature-list h3 { font-size: 1.02rem; color: var(--navy-900); }
.feature-list p { color: var(--ink-500); margin-top: 4px; font-size: 0.95rem; line-height: 1.7; }
.detail-notice {
margin-top: 30px; padding: 18px 22px;
background: var(--bg-soft); border-left: 3px solid var(--blue-500);
border-radius: var(--radius-sm);
color: var(--ink-500); font-size: 0.9rem; line-height: 1.7;
}
.detail-aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.detail-aside__box {
padding: 26px; border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--navy-900), var(--blue-600));
color: #fff;
}
.detail-aside__box h3 { color: #fff; margin-bottom: 6px; }
.detail-aside__box p { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-bottom: 16px; }
.detail-aside__box .btn--primary { --btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff; }
.detail-aside__box .btn--primary:hover { --btn-bg: #eaf2ff; color: var(--navy-900); }
.detail-aside__box .btn--ghost { --btn-color: #fff; --btn-border: rgba(255,255,255,0.35); }
.detail-aside__box .btn--ghost:hover { --btn-bg: rgba(255,255,255,0.1); color: #fff; }
.detail-aside__box + .btn { margin-top: 10px; }
.detail-aside__related {
padding: 22px; border-radius: var(--radius-lg);
background: #fff; border: 1px solid var(--line);
}
.detail-aside__related h3 { font-size: 1rem; margin-bottom: 12px; }
.detail-aside__related ul { list-style: none; padding: 0; margin: 0; }
.detail-aside__related li + li { margin-top: 8px; }
.detail-aside__related a { color: var(--ink-700); font-size: 0.92rem; }
.detail-aside__related a:hover { color: var(--navy-900); }
.prose p { margin: 0 0 1em; color: var(--ink-700); line-height: 1.85; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 14px; color: var(--navy-900); }
.prose h3 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--navy-900); }
.prose h4 { font-size: 1.02rem; margin: 22px 0 8px; color: var(--navy-900); }
.prose ul, .prose ol {
padding-left: 1.4em; color: var(--ink-700); line-height: 1.85;
margin: 0 0 1em;
}
.prose li { margin: 4px 0; }
.prose li > p { margin: 0 0 0.4em; }
.prose ul li::marker { color: var(--blue-500); }
.prose blockquote {
margin: 20px 0; padding: 16px 20px;
background: var(--bg-soft); border-left: 3px solid var(--blue-500);
border-radius: var(--radius-sm); color: var(--ink-700);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a {
color: var(--blue-600);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.prose a:hover { color: var(--navy-900); }
.prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: var(--bg-gray);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
color: var(--navy-900);
}
.prose pre {
background: var(--navy-950);
color: #e8f0fb;
padding: 18px 22px;
border-radius: var(--radius);
overflow-x: auto;
font-size: 0.88rem;
line-height: 1.7;
margin: 18px 0;
}
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose hr {
border: 0;
border-top: 1px solid var(--line);
margin: 32px 0;
}
.prose img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
margin: 16px 0;
}
.prose table {
border-collapse: collapse;
width: 100%;
margin: 18px 0;
font-size: 0.95rem;
}
.prose th, .prose td {
padding: 10px 14px;
border: 1px solid var(--line);
text-align: left;
}
.prose th {
background: var(--bg-soft);
color: var(--navy-900);
font-weight: 700;
}
.prose strong { color: var(--navy-900); }
.prose mark {
background: #fff4a3;
padding: 0 4px;
border-radius: 3px;
}
/* -------- Article / insight detail -------- */
.article__head { padding: 80px 0 40px; border-bottom: 1px solid var(--line-soft); }
.article__head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 14px 0 10px; }
.article__meta { color: var(--ink-400); font-size: 0.9rem; }
.article__cover { margin: 30px 0; border-radius: var(--radius-lg); overflow: hidden; }
.article__cover img { width: 100%; height: auto; }
.article .prose { padding: 40px 0; }
.article__notice {
padding: 18px 22px;
background: var(--bg-soft); border-left: 3px solid var(--blue-500);
border-radius: var(--radius-sm);
color: var(--ink-500); font-size: 0.9rem;
}
.article__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 36px 0 60px; }
/* -------- Contact -------- */
.contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.contact-form {
padding: 40px; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-lg); display: grid; gap: 18px;
}
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-weight: 600; color: var(--navy-900); font-size: 0.92rem; }
.field__label em { color: #d14343; font-style: normal; margin-left: 2px; }
.field__hint { color: var(--ink-400); font-weight: 400; font-size: 0.82rem; margin-left: 6px; }
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea,
.contact-form input, .contact-form textarea {
width: 100%;
padding: 13px 14px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
font: inherit; color: var(--ink-900);
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
outline: none; border-color: var(--blue-500);
box-shadow: 0 0 0 4px rgba(47, 127, 227, 0.12);
}
.field__error { color: #c63c3c; font-size: 0.85rem; }
.form-errors {
padding: 12px 14px; background: #fff3f3; border: 1px solid #ffd8d8;
color: #b43030; border-radius: var(--radius-sm); font-size: 0.9rem;
}
.field--checkboxes .checkbox-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.checkbox {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 999px;
background: #fff; cursor: pointer; font-size: 0.9rem; color: var(--ink-700);
transition: all .15s ease;
}
.checkbox:hover { border-color: var(--blue-500); color: var(--navy-900); }
.checkbox input[type='checkbox'] {
width: 16px; height: 16px; accent-color: var(--blue-500);
}
.checkbox--agree {
flex-direction: row; align-items: flex-start;
padding: 16px 18px; border-radius: var(--radius-sm);
background: var(--bg-soft); border-style: solid;
}
.checkbox--agree span { display: block; }
.checkbox--agree small { display: block; color: var(--ink-500); margin-top: 4px; font-size: 0.82rem; }
.form-footnote { color: var(--ink-400); font-size: 0.82rem; line-height: 1.6; }
.contact-aside { display: grid; gap: 18px; position: sticky; top: 110px; }
.contact-aside__box {
padding: 26px; border-radius: var(--radius-lg);
background: #fff; border: 1px solid var(--line);
}
.contact-aside__box h3 { font-size: 1.05rem; margin-bottom: 12px; }
.contact-aside__line {
display: flex; justify-content: space-between; padding: 10px 0;
border-bottom: 1px solid var(--line-soft); font-size: 0.95rem;
}
.contact-aside__line:last-of-type { border-bottom: 0; }
.contact-aside__line span { color: var(--ink-500); font-weight: 600; }
.contact-aside__line a { color: var(--navy-900); font-weight: 600; }
.contact-aside__box--alt { background: var(--bg-soft); }
.contact-aside__box--alt ul { list-style: none; padding: 0; margin: 0; }
.contact-aside__box--alt li { padding-left: 18px; position: relative; color: var(--ink-700); font-size: 0.92rem; margin: 8px 0; }
.contact-aside__box--alt li::before {
content: ''; position: absolute; left: 0; top: 10px;
width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500);
}
.contact-aside__box--urgent {
background: #fff7f7;
border: 1px solid #f5cfcb;
}
.contact-aside__box--urgent .eyebrow--urgent {
color: #c5342b; font-weight: 700;
}
.contact-aside__urgent-lead {
color: var(--ink-700); font-size: 0.9rem; line-height: 1.55; margin: 8px 0 14px;
}
.contact-aside__urgent-lead strong { color: #c5342b; }
/* -------- CTA band -------- */
.cta-band {
background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
color: #fff;
}
.cta-band__inner {
padding: 70px 20px;
display: flex; align-items: center; justify-content: space-between; gap: 30px;
flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.cta-band__lead { color: rgba(255,255,255,0.8); margin-top: 12px; }
.cta-band .eyebrow { color: #9ec6ff; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn--primary { --btn-bg: #fff; --btn-color: var(--navy-900); --btn-border: #fff; }
.cta-band .btn--primary:hover { --btn-bg: #eaf2ff; color: var(--navy-900); }
.cta-band .btn--ghost { --btn-color: #fff; --btn-border: rgba(255,255,255,0.4); }
.cta-band .btn--ghost:hover { --btn-bg: rgba(255,255,255,0.12); color: #fff; }
/* -------- Flash -------- */
.flash-wrap { max-width: var(--content-max); margin: 20px auto 0; padding: 0 20px; }
.flash {
padding: 14px 18px; border-radius: var(--radius);
background: var(--blue-100); color: var(--navy-900);
border: 1px solid #cfe0fb; margin-bottom: 10px;
}
.flash--success { background: #e8f8f3; color: #1a6b5d; border-color: #c7ece0; }
.flash--error { background: #fdecec; color: #a72626; border-color: #f3c7c7; }
/* -------- Footer -------- */
.site-footer {
background: var(--navy-950);
color: rgba(255,255,255,0.8);
padding: 70px 0 30px;
margin-top: 0;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
gap: 32px;
}
.brand--footer .brand__mark { background: rgba(255,255,255,0.1); }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: rgba(255,255,255,0.6); }
.site-footer__note {
margin-top: 18px; max-width: 420px;
font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.7;
}
.site-footer__col h3 { color: #fff; font-size: 0.92rem; margin-bottom: 14px; font-weight: 700; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin: 8px 0; font-size: 0.9rem; color: rgba(255,255,255,0.65); }
.site-footer__col a { color: rgba(255,255,255,0.75); }
.site-footer__col a:hover { color: #fff; }
.site-footer__meta {
margin-top: 40px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.site-footer__meta a { color: rgba(255,255,255,0.65); }
.site-footer__meta a:hover { color: #fff; }
/* -------- Responsive -------- */
@media (max-width: 1024px) {
.service-grid, .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid { grid-template-columns: 1fr; }
.detail-aside { position: static; grid-template-columns: 1fr 1fr; display: grid; }
.contact-grid { grid-template-columns: 1fr; }
.contact-aside { position: static; }
}
@media (max-width: 768px) {
/* Header & mobile nav */
.site-header__inner { height: 64px; }
.brand__mark { width: 38px; height: 38px; font-size: 0.9rem; }
.brand__name { font-size: 0.95rem; }
.brand__sub { display: none; }
.nav-toggle { display: inline-flex; }
/* 모바일에서 기존 primary-nav 완전 숨김 — mobile-drawer 로 대체 */
.primary-nav { display: none !important; }
/* body scroll lock — drawer 열렸을 때 */
body.drawer-open { overflow: hidden; }
/* Sections + density */
.section { padding: 56px 0; }
.section__head { margin-bottom: 36px; }
/* Hero */
.hero__inner { padding: 64px 20px 72px; }
.hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
.hero__lead { margin-top: 16px; font-size: 0.98rem; }
.hero__actions { margin-top: 26px; gap: 10px; width: 100%; }
.hero__actions .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }
.hero__stats {
grid-template-columns: repeat(3, 1fr);
padding: 16px 14px; gap: 10px;
margin-top: 40px;
}
.hero__stats dt { font-size: 0.7rem; letter-spacing: 0.06em; }
.hero__stats dd { font-size: 1.25rem; }
.hero__stats dd span { font-size: 0.8rem; }
/* Page hero */
.page-hero { padding: 64px 0 36px; }
.page-hero h1 { font-size: clamp(1.6rem, 5.6vw, 2.2rem); }
.page-hero__lead { font-size: 0.98rem; margin-top: 14px; }
.page-hero__actions { margin-top: 22px; gap: 10px; width: 100%; }
.page-hero__actions .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }
/* Grids → single column */
.value-grid, .service-grid, .insight-grid, .diff-grid { grid-template-columns: 1fr; gap: 14px; }
.problem-wrap { grid-template-columns: 1fr; gap: 24px; }
.process-list { grid-template-columns: 1fr; }
.vm-grid { grid-template-columns: 1fr; }
.about-approach__grid { grid-template-columns: 1fr; }
.form-row--two { grid-template-columns: 1fr; }
.field--checkboxes .checkbox-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.section__head--split { flex-direction: column; align-items: flex-start; gap: 12px; }
/* Cards tighter */
.value-card, .service-card, .insight-card { padding: 22px; }
.service-card__list { font-size: 0.85rem; }
.value-card__label { font-size: 1.1rem; }
/* Buttons: iOS HIG 44px min tap target */
.btn { padding: 12px 20px; font-size: 0.95rem; }
.btn--lg { padding: 14px 22px; font-size: 1rem; min-height: 48px; }
.btn--sm { padding: 11px 18px; font-size: 0.9rem; min-height: 44px; }
/* VM card / about approach */
.vm-card { padding: 32px 24px; }
.about-approach article { padding: 22px; }
/* Service detail: aside stacks */
.detail-aside { grid-template-columns: 1fr; gap: 14px; }
.detail-aside__box { padding: 22px; }
/* Contact */
.contact-form { padding: 22px; gap: 16px; }
.contact-aside__box { padding: 22px; }
/* CTA band */
.cta-band__inner { flex-direction: column; align-items: stretch; padding: 44px 20px; gap: 22px; }
.cta-band__actions { width: 100%; flex-direction: column; }
.cta-band__actions .btn { width: 100%; justify-content: center; min-height: 48px; }
/* Article / insight detail */
.article__head { padding: 60px 0 30px; }
.article .prose { padding: 28px 0; }
.article__cta .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }
/* Footer */
.site-footer { padding: 52px 0 24px; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer__brand { grid-column: span 2; }
.site-footer__note { max-width: 100%; }
.site-footer__meta { font-size: 0.78rem; gap: 6px; }
.site-footer__meta > div:first-child { line-height: 1.6; }
/* Flash */
.flash-wrap { padding: 0 16px; }
}
/* Small phones (<=480px) — iPhone SE / 12 mini */
@media (max-width: 480px) {
.container { padding: 0 16px; }
.site-footer__grid { grid-template-columns: 1fr; gap: 20px; }
.site-footer__brand { grid-column: auto; }
.site-footer__meta { flex-direction: column; align-items: flex-start; }
.field--checkboxes .checkbox-grid { grid-template-columns: 1fr; }
.hero__stats { padding: 14px 12px; gap: 8px; }
.hero__stats dt { font-size: 0.66rem; }
.hero__stats dd { font-size: 1.1rem; }
.hero__stats dd span { font-size: 0.72rem; }
.section { padding: 48px 0; }
.section__head { margin-bottom: 28px; }
.value-card, .service-card, .insight-card { padding: 20px; }
.vm-card { padding: 26px 20px; }
.contact-form { padding: 18px; }
.detail-main { max-width: 100%; }
.detail-section__title { font-size: 1.22rem; margin-top: 32px; }
.cta-band__inner { padding: 40px 16px; }
.site-header__inner { padding: 0; }
.hero__title { font-size: 1.9rem; line-height: 1.2; }
.hero__lead { font-size: 0.95rem; }
.page-hero h1 { font-size: 1.55rem; line-height: 1.25; }
.page-hero__lead { font-size: 0.95rem; }
.process-timeline__num { width: 34px; height: 34px; font-size: 0.82rem; }
.process-timeline__item { padding-left: 46px; }
.process-timeline::before { left: 16px; }
.concern-card { padding: 16px 18px; gap: 12px; }
.concern-card__badge { width: 28px; height: 28px; font-size: 0.88rem; }
.faq-list summary { padding: 14px 44px 14px 16px; font-size: 0.93rem; }
.faq-list__answer { padding: 0 16px 16px; font-size: 0.93rem; }
}
/* ============================================================
Phase 17 — Auth pages, Case studies, Greeting section, Nav auth
============================================================ */
/* -------- Nav auth (header) -------- */
.nav-auth {
display: flex; align-items: center; gap: 6px;
margin-right: 8px; padding-right: 10px;
border-right: 1px solid var(--line);
}
.nav-auth__link {
color: var(--ink-500); font-size: 0.78rem; font-weight: 500;
text-decoration: none; padding: 4px 6px;
white-space: nowrap;
}
.nav-auth__link:hover { color: var(--navy-900); }
.nav-auth__link--strong {
color: var(--blue-600); font-weight: 600;
border: 1px solid var(--line); border-radius: 999px;
padding: 4px 10px;
}
.nav-auth__link--strong:hover { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.nav-auth__who {
color: var(--ink-700); font-size: 0.78rem; font-weight: 600;
max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-auth__form { display: inline; margin: 0; padding: 0; }
.nav-auth__form button.nav-auth__link {
background: transparent; border: none; cursor: pointer; font: inherit; padding: 4px 6px;
}
/* -------- Auth pages -------- */
.auth-section { padding: 60px 0 100px; background: var(--bg-soft); min-height: 70vh; }
.auth-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 44px 48px;
box-shadow: 0 10px 40px rgba(11, 30, 63, 0.08);
max-width: 620px;
margin: 0 auto;
}
.auth-card--compact { padding: 36px 40px; max-width: 460px; }
.auth-card__head { text-align: center; margin-bottom: 28px; }
.auth-card__head h1 { font-size: 1.7rem; line-height: 1.35; margin: 8px 0 12px; }
.auth-card__head .auth-card__lead { color: var(--ink-500); font-size: 0.95rem; margin: 0; }
.auth-perks {
list-style: none; padding: 0; margin: 0 0 32px;
display: grid; gap: 14px;
padding: 20px 22px;
background: linear-gradient(135deg, #eaf1fb, #f7fafd);
border-radius: var(--radius);
border: 1px solid #d5e0f2;
}
.auth-perks li { display: flex; gap: 14px; align-items: flex-start; }
.auth-perks__icon {
flex: 0 0 auto;
font-size: 1.4rem;
width: 36px; height: 36px;
display: grid; place-items: center;
background: #fff; border-radius: 10px;
border: 1px solid var(--line);
}
.auth-perks li strong { display: block; color: var(--navy-900); font-size: 0.96rem; margin-bottom: 2px; }
.auth-perks li small { color: var(--ink-500); font-size: 0.83rem; line-height: 1.5; }
.auth-form { display: grid; gap: 14px; }
.auth-form .field__label { color: var(--ink-700); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; display: block; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select {
width: 100%; padding: 12px 14px;
border: 1px solid var(--line); border-radius: 10px;
font-size: 0.95rem; font-family: inherit;
line-height: 1.4;
background: #fff;
box-sizing: border-box;
height: 46px;
}
.auth-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6477' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
cursor: pointer;
}
.auth-form select::-ms-expand { display: none; }
.auth-form input:focus, .auth-form select:focus {
outline: none; border-color: var(--blue-600);
box-shadow: 0 0 0 3px rgba(30, 95, 191, 0.15);
}
.auth-form__foot { text-align: center; margin: 8px 0 0; color: var(--ink-500); font-size: 0.9rem; }
.auth-form__foot a { color: var(--blue-600); font-weight: 600; }
.auth-footnote {
max-width: 620px; margin: 24px auto 0;
color: var(--ink-400); font-size: 0.8rem; text-align: center; line-height: 1.6;
}
/* -------- Case list -------- */
.case-grid {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.case-card {
display: flex; flex-direction: column; gap: 14px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); padding: 24px 22px;
text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.case-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(11, 30, 63, 0.1);
border-color: var(--blue-600);
}
.case-card__top { display: grid; gap: 8px; }
.case-card__eyebrow {
display: inline-block; color: var(--blue-600);
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
text-transform: uppercase;
}
.case-card__title { font-size: 1.08rem; line-height: 1.45; color: var(--navy-900); margin: 0; font-weight: 700; }
.case-card__summary { color: var(--ink-500); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.case-card__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.case-card__meta .tag {
padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
background: #f0f3f7; color: var(--ink-700); border: none;
}
.case-card__meta .tag--stage { background: var(--navy-900); color: #fff; }
.case-card__meta .tag--muted { background: transparent; color: var(--ink-400); border: 1px solid var(--line); }
.case-card__questions {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
padding-top: 10px; border-top: 1px dashed var(--line-soft);
}
.case-card__questions li {
color: var(--ink-700); font-size: 0.88rem; line-height: 1.55;
padding-left: 18px; position: relative;
}
.case-card__questions li::before {
content: '?'; position: absolute; left: 0; top: 0;
width: 14px; height: 14px; border-radius: 50%;
background: #eaf1fb; color: var(--blue-600);
display: grid; place-items: center;
font-size: 0.72rem; font-weight: 800;
}
.case-card__foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft);
font-size: 0.85rem;
}
.case-card__locked { color: #c5342b; font-weight: 700; }
.case-card__unlocked { color: #2bb8a8; font-weight: 700; }
.case-card__arrow { color: var(--blue-600); font-weight: 800; }
.case-card--sm { padding: 18px 18px; gap: 8px; }
.case-grid--related { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 20px; }
/* -------- Case detail -------- */
.page-hero--case { background: linear-gradient(135deg, #eef3fb, #f7fafd); }
.case-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.case-meta .tag { padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #f0f3f7; color: var(--ink-700); }
.case-meta .tag--stage { background: var(--navy-900); color: #fff; }
.case-meta .tag--muted { background: transparent; color: var(--ink-500); border: 1px solid var(--line); }
.case-section__title { font-size: 1.5rem; color: var(--navy-900); margin: 40px 0 16px; font-weight: 700; }
.case-hook {
background: #f7fafd;
border-left: 4px solid var(--blue-600);
padding: 20px 24px;
border-radius: 0 var(--radius) var(--radius) 0;
margin: 28px 0;
}
.case-hook .eyebrow { color: var(--blue-600); }
.case-hook ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.case-hook li {
padding-left: 24px; position: relative;
color: var(--ink-900); font-weight: 500; line-height: 1.55;
}
.case-hook li::before {
content: '?'; position: absolute; left: 0; top: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--blue-600); color: #fff;
display: grid; place-items: center;
font-size: 0.82rem; font-weight: 800;
}
/* Premium gate (blur overlay) */
.case-premium { position: relative; margin: 32px 0; }
.case-premium--locked {
min-height: 480px;
border-radius: var(--radius);
overflow: hidden;
}
.case-premium__blurred {
filter: blur(6px);
user-select: none; pointer-events: none;
padding: 20px 24px;
background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
opacity: 0.55;
}
.case-premium__gate {
position: absolute; inset: 0;
display: grid; place-items: center;
background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.98) 60%);
backdrop-filter: blur(2px);
}
.case-premium__gate-inner {
max-width: 520px; text-align: center; padding: 32px 28px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: 0 20px 50px rgba(11, 30, 63, 0.15);
}
.case-premium__gate-inner .eyebrow { color: #c5342b; font-weight: 700; }
.case-premium__gate-inner h2 { font-size: 1.3rem; line-height: 1.45; margin: 10px 0 14px; }
.case-premium__gate-lead { color: var(--ink-500); font-size: 0.92rem; line-height: 1.6; margin: 0 0 20px; }
.case-premium__gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.case-premium__gate-perks {
list-style: none; padding: 14px 0 0; margin: 0;
border-top: 1px dashed var(--line-soft);
text-align: left; display: grid; gap: 6px;
color: var(--ink-700); font-size: 0.88rem;
}
/* -------- Greeting (About) -------- */
.section--greeting { background: var(--bg-soft); padding: 80px 0; }
.greeting { max-width: 1000px; margin: 0 auto; }
.greeting__intro {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px 40px;
box-shadow: 0 6px 30px rgba(11, 30, 63, 0.05);
position: relative;
margin-bottom: 48px;
}
.greeting__intro::before {
content: ''; position: absolute;
top: -1px; left: 40px; right: 40px; height: 3px;
background: linear-gradient(90deg, var(--blue-600), var(--navy-900));
border-radius: 3px 3px 0 0;
}
.greeting__label {
display: inline-flex; gap: 4px; margin-bottom: 18px;
font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
}
.greeting__label-en {
background: var(--navy-900); color: #fff;
padding: 6px 10px; border-radius: 3px 0 0 3px;
}
.greeting__label-ko {
background: #9aa4b4; color: #fff;
padding: 6px 10px; border-radius: 0 3px 3px 0;
font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
.greeting__headline {
font-size: 2rem; line-height: 1.35; margin: 6px 0 16px;
color: var(--navy-900);
}
.greeting__headline .accent { color: var(--blue-600); }
.greeting__sub { color: var(--ink-700); font-size: 1rem; line-height: 1.7; margin: 0; }
.greeting__sub strong { color: var(--navy-900); }
.greeting__body {
display: grid; gap: 40px;
grid-template-columns: 1.5fr 1fr;
align-items: start;
}
.greeting__sub-headline {
font-size: 1.25rem; line-height: 1.55; color: var(--navy-900);
margin: 0 0 18px; font-weight: 700;
}
.greeting__sub-headline .accent { color: var(--blue-600); }
.greeting__message p {
color: var(--ink-700); font-size: 0.98rem; line-height: 1.8;
margin: 0 0 14px;
}
.greeting__message p strong { color: var(--navy-900); }
.greeting__sig {
display: flex; flex-direction: column; align-items: center;
padding: 24px;
background: linear-gradient(135deg, #eaf1fb, #f7fafd);
border-radius: var(--radius);
border: 1px solid #d5e0f2;
}
.greeting__portrait {
margin: 0 0 16px;
width: 200px; height: 240px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(11, 30, 63, 0.18);
border: 3px solid #ffffff;
outline: 1px solid #d5e0f2;
background: #eaf1fb;
position: relative;
}
.greeting__portrait-svg {
display: block;
width: 100%; height: 100%;
}
.greeting__portrait img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
}
.greeting__sig-text { text-align: center; }
.greeting__sig-role { color: var(--ink-500); font-size: 0.85rem; margin: 0 0 4px; font-weight: 500; }
.greeting__sig-name {
font-family: 'Noto Serif KR', 'Pretendard Variable', serif;
font-size: 1.5rem; font-weight: 700; color: var(--navy-900);
margin: 0; display: flex; gap: 8px; justify-content: center; align-items: center;
}
.greeting__sig-mark {
display: inline-grid; place-items: center;
width: 24px; height: 24px; border-radius: 4px;
background: #c5342b; color: #fff;
font-size: 0.75rem; font-weight: 600;
font-family: 'Pretendard Variable', sans-serif;
transform: rotate(-5deg);
}
.greeting__pillars {
margin-top: 48px;
display: flex; align-items: center; justify-content: center;
gap: 8px; flex-wrap: wrap;
}
.greeting-pillar {
flex: 1 1 220px; max-width: 260px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 20px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.greeting-pillar:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(11, 30, 63, 0.1);
}
.greeting-pillar__icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.greeting-pillar h4 { color: var(--navy-900); font-size: 1.05rem; margin: 0 0 8px; font-weight: 700; }
.greeting-pillar p { color: var(--ink-500); font-size: 0.85rem; line-height: 1.55; margin: 0; }
.greeting-pillar__arrow {
color: var(--blue-600); font-size: 1.6rem; font-weight: 800;
padding: 0 4px;
}
.greeting-pillar__arrow--loop { color: var(--navy-800); }
@media (max-width: 820px) {
.greeting__intro { padding: 28px 24px; }
.greeting__headline { font-size: 1.5rem; }
.greeting__body { grid-template-columns: 1fr; gap: 28px; }
.greeting__sig { max-width: 320px; margin: 0 auto; }
.greeting__pillars { flex-direction: column; }
.greeting-pillar { max-width: 100%; }
.greeting-pillar__arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
.auth-card { padding: 28px 24px; }
.case-card { padding: 20px 18px; }
.case-premium__gate-inner { padding: 24px 20px; }
.nav-auth { display: none; }
}
.site-footer__meta-links { display: flex; gap: 16px; align-items: center; }
.site-footer__partner-link {
color: var(--ink-400); font-size: 0.78rem; opacity: 0.7;
}
.site-footer__partner-link:hover { color: var(--ink-700); opacity: 1; }
/* ============================================================
Signup stepper
============================================================ */
.auth-card--stepper { max-width: 560px; padding: 40px 44px; }
.auth-perks--compact { padding: 14px 18px; gap: 10px; margin-bottom: 24px; }
.auth-perks--compact li strong { font-size: 0.92rem; }
.auth-perks--compact li small { font-size: 0.8rem; }
/* 진행 바 */
.step-bar {
display: flex; list-style: none; padding: 0; margin: 0 0 28px;
gap: 8px; position: relative;
}
.step-bar__item {
flex: 1; display: flex; align-items: center; gap: 8px;
padding: 10px 12px; border-radius: 10px;
background: var(--bg-soft); color: var(--ink-400);
font-size: 0.85rem; font-weight: 600;
transition: all 0.25s;
}
.step-bar__num {
display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 2px solid var(--line);
color: var(--ink-400); font-size: 0.85rem; font-weight: 700;
}
.step-bar__label small { color: var(--ink-400); font-weight: 400; font-size: 0.78rem; }
.step-bar__item.is-current {
background: var(--blue-100); color: var(--navy-900);
}
.step-bar__item.is-current .step-bar__num {
background: var(--blue-600); color: #fff; border-color: var(--blue-600);
}
.step-bar__item.is-done {
background: var(--accent-soft); color: var(--navy-900);
}
.step-bar__item.is-done .step-bar__num {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.step-bar__item.is-done .step-bar__num::before {
content: '✓';
}
.step-bar__item.is-done .step-bar__num { font-size: 0; line-height: 0; }
.step-bar__item.is-done .step-bar__num::before { font-size: 0.95rem; line-height: 1; }
/* 스텝 패널 */
.auth-form--stepper { position: relative; }
.step-panel { display: none; border: none; padding: 0; margin: 0; }
.step-panel.is-active { display: block; animation: stepFadeIn 0.3s ease; }
.step-panel__title {
font-size: 1.15rem; color: var(--navy-900);
margin: 0 0 8px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.step-panel__opt {
font-size: 0.72rem; font-weight: 500; color: var(--ink-500);
background: var(--bg-soft); padding: 3px 8px; border-radius: 6px;
}
.step-panel__hint {
color: var(--ink-500); font-size: 0.88rem; margin: 0 0 18px;
}
.step-panel__actions {
display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap;
}
.step-panel__actions .btn--block {
width: 100%; flex: 1 1 100%;
}
.step-panel__actions .btn {
flex: 1 1 auto;
}
/* 비밀번호 토글 */
.field__pw-wrap {
position: relative; display: block;
}
.field__pw-wrap input {
padding-right: 56px;
}
.field__pw-toggle {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: transparent; border: 1px solid var(--line);
padding: 4px 10px; border-radius: 6px;
font-size: 0.78rem; color: var(--ink-700); cursor: pointer;
font-family: inherit;
}
.field__pw-toggle:hover { background: var(--bg-soft); color: var(--navy-900); }
/* 에러 표시 */
.field .has-error,
input.has-error,
.checkbox.has-error,
.checkbox--agree.has-error {
border-color: #c5342b !important;
box-shadow: 0 0 0 3px rgba(197, 52, 43, 0.15) !important;
}
/* 필드 힌트 */
.field__hint {
display: block;
color: var(--ink-500); font-size: 0.8rem; margin-top: 4px;
}
@keyframes stepFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.auth-card--stepper { padding: 28px 24px; }
.step-bar { font-size: 0.78rem; }
.step-bar__item { padding: 8px 10px; gap: 6px; }
.step-bar__num { width: 22px; height: 22px; font-size: 0.78rem; }
.step-bar__label small { display: none; }
.step-panel__actions { flex-direction: column; }
.step-panel__actions .btn { width: 100%; }
}
/* ============================================================
License verification
============================================================ */
.verify-badge {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px 18px;
background: var(--bg-soft);
border-radius: var(--radius);
border: 1px solid var(--line);
}
.verify-badge > span {
flex: 0 0 auto;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; font-size: 1.2rem; font-weight: 800;
border: 2px solid var(--line);
}
.verify-badge strong { display: block; color: var(--navy-900); font-size: 1rem; margin-bottom: 3px; }
.verify-badge small { color: var(--ink-500); font-size: 0.85rem; line-height: 1.55; }
.verify-badge--success {
background: linear-gradient(135deg, #ebf9f4, #e0f5ed);
border-color: var(--accent);
}
.verify-badge--success > span {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.verify-badge--lg {
padding: 20px 24px;
}
.verify-badge--lg > span { width: 56px; height: 56px; font-size: 1.8rem; }
.verify-badge--lg strong { font-size: 1.12rem; }
.verify-badge--lg small { font-size: 0.92rem; }
.verify-trust {
list-style: none; padding: 16px 20px; margin: 0 0 24px;
background: #f7fafd;
border-radius: 10px;
border: 1px dashed #d5e0f2;
display: grid; gap: 8px;
color: var(--ink-700); font-size: 0.9rem; line-height: 1.55;
}
.nav-auth__verify {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 8px; border-radius: 999px;
font-size: 0.72rem; font-weight: 700;
margin-left: 4px; white-space: nowrap;
}
.nav-auth__verify--yes {
background: var(--accent-soft); color: var(--accent);
border: 1px solid var(--accent);
}
.nav-auth__verify--no {
background: #fff0ee; color: #c5342b;
border: 1px solid #f5cfcb;
cursor: pointer; text-decoration: none;
}
.nav-auth__verify--no:hover { background: #fcd9d4; }
/* ============================================================
Tools Hub · stage 미니 카드 & related content
============================================================ */
.section__foot {
display: flex; justify-content: center; margin-top: 32px;
}
/* LifeStage 미니 카드 그리드 */
.stage-card-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.stage-mini-card {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 20px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
overflow: hidden;
}
.stage-mini-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(11, 30, 63, 0.1);
border-color: var(--blue-600);
}
.stage-mini-card__icon {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--blue-100); color: var(--blue-600);
border-radius: 10px;
font-size: 1.1rem;
}
.stage-mini-card__num {
position: absolute; top: 14px; right: 16px;
color: var(--ink-400); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.06em;
}
.stage-mini-card__name {
font-size: 1.08rem; color: var(--navy-900); margin: 0;
font-weight: 700;
}
.stage-mini-card__tagline {
color: var(--ink-500); font-size: 0.83rem; line-height: 1.5;
margin: 0;
}
.stage-mini-card__arrow {
margin-top: auto; align-self: flex-end;
color: var(--blue-600); font-weight: 800; font-size: 1.05rem;
}
/* 결과 페이지 하단 관련 콘텐츠 섹션 */
.tool-related__subtitle {
font-size: 1rem; color: var(--navy-900);
margin: 8px 0 16px; font-weight: 700;
letter-spacing: -0.01em;
}
.tool-related__subtitle--mt { margin-top: 40px; }
.tool-related__foot {
margin-top: 28px; display: flex; justify-content: center;
}
@media (max-width: 640px) {
.stage-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stage-mini-card { padding: 16px 14px; }
.stage-mini-card__name { font-size: 0.98rem; }
.stage-mini-card__tagline { font-size: 0.78rem; }
}
/* ============================================================
홈 · 매출 고민별 시작점 섹션
============================================================ */
.section--revenue .section__title { line-height: 1.35; }
.revenue-grid {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin-top: 28px;
}
.revenue-card {
position: relative;
display: flex; flex-direction: column; gap: 12px;
padding: 28px 24px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
a.revenue-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(11, 30, 63, 0.1);
border-color: var(--blue-600);
}
.revenue-card__num {
position: absolute; top: 14px; right: 18px;
color: var(--ink-400); font-size: 0.78rem; font-weight: 800;
letter-spacing: 0.08em;
}
.revenue-card__kind {
margin: 0; color: var(--blue-600);
font-size: 0.82rem; font-weight: 700;
letter-spacing: 0.02em;
}
.revenue-card__title {
font-size: 1.05rem; color: var(--navy-900);
margin: 0; font-weight: 700; line-height: 1.45;
}
.revenue-card__desc {
color: var(--ink-500); font-size: 0.88rem; line-height: 1.6;
margin: 0;
}
.revenue-card__cta {
margin-top: auto; color: var(--blue-600);
font-weight: 700; font-size: 0.9rem;
}
.revenue-card--tool { border-top: 3px solid #2bb8a8; }
.revenue-card--cases { border-top: 3px solid #f5b301; }
.revenue-card--service { border-top: 3px solid var(--blue-600); }
.revenue-card--partners {
border-top: 3px solid var(--navy-900);
background: var(--bg-soft);
cursor: default;
}
.revenue-card__partners {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 10px;
}
.revenue-card__partners a {
display: block; padding: 10px 12px;
background: #fff;
border: 1px solid var(--line); border-radius: 8px;
text-decoration: none;
transition: border-color 0.15s;
}
.revenue-card__partners a:hover { border-color: var(--blue-600); }
.revenue-card__partners strong {
display: block; color: var(--navy-900); font-size: 0.92rem;
}
.revenue-card__partners small {
display: block; color: var(--ink-500); font-size: 0.78rem;
margin-top: 2px;
}
.revenue-insights {
margin-top: 28px; padding: 18px 22px;
background: #fff;
border: 1px dashed var(--line);
border-radius: var(--radius);
}
.revenue-insights__head {
color: var(--navy-900); font-weight: 700; font-size: 0.95rem;
margin: 0 0 10px;
}
.revenue-insights ul {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
.revenue-insights li a {
color: var(--ink-700); font-size: 0.9rem;
text-decoration: none;
display: inline-block; padding: 3px 0;
border-bottom: 1px solid transparent;
}
.revenue-insights li a:hover {
color: var(--navy-900);
border-bottom-color: var(--blue-600);
}
@media (max-width: 640px) {
.revenue-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
Funnel boosts
============================================================ */
/* 사례 리스트 상단 인증 유도 배너 */
.verify-nudge {
margin-top: 20px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 16px 20px;
background: linear-gradient(135deg, #fff7ed, #ffe4cc);
border: 1px solid #fdba74; border-radius: var(--radius);
}
.verify-nudge__icon {
flex: 0 0 auto;
font-size: 1.8rem;
width: 44px; height: 44px;
display: grid; place-items: center;
background: #fff; border-radius: 50%;
border: 2px solid #fdba74;
}
.verify-nudge > div { flex: 1 1 260px; }
.verify-nudge strong { display: block; color: #7a3b0b; font-size: 0.98rem; }
.verify-nudge small { display: block; color: #9a562a; font-size: 0.83rem; margin-top: 2px; }
.verify-nudge .btn { flex: 0 0 auto; }
/* verify 완료 후 다음 단계 카드 */
.verify-next {
margin-top: 32px;
max-width: 900px;
margin-left: auto; margin-right: auto;
}
.verify-next__title {
font-size: 1.25rem; color: var(--navy-900);
text-align: center; margin: 0 0 6px;
font-weight: 700;
}
.verify-next__desc {
text-align: center; color: var(--ink-500);
font-size: 0.9rem; margin: 0 0 24px;
}
.verify-next__grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.verify-next__card {
position: relative;
display: flex; flex-direction: column; gap: 8px;
padding: 22px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.verify-next__card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(11, 30, 63, 0.1);
border-color: var(--blue-600);
}
.verify-next__num {
position: absolute; top: 12px; right: 16px;
color: var(--ink-400); font-size: 0.75rem; font-weight: 800;
letter-spacing: 0.06em;
}
.verify-next__kind {
margin: 0; color: var(--blue-600);
font-size: 0.82rem; font-weight: 700;
}
.verify-next__card h3 {
font-size: 1rem; color: var(--navy-900); margin: 0;
font-weight: 700; line-height: 1.45;
}
.verify-next__desc-sm {
color: var(--ink-500); font-size: 0.85rem; line-height: 1.55;
margin: 0;
}
.verify-next__cta {
margin-top: auto; color: var(--blue-600);
font-weight: 700; font-size: 0.88rem;
}
/* ============================================================
Phase 20 · Guide page + Floating help + Mobile bottom bar
============================================================ */
/* ---------- Guide page ---------- */
.page-hero--guide h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-hero--guide .accent { color: var(--blue-600); }
.guide-steps {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin-top: 32px;
}
.guide-step {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 28px 28px;
display: flex; flex-direction: column; gap: 12px;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.guide-step:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(11, 30, 63, 0.1);
border-color: var(--blue-600);
}
.guide-step__num {
position: absolute; top: 20px; right: 24px;
color: var(--ink-400); font-size: 0.85rem;
font-weight: 800; letter-spacing: 0.08em;
}
.guide-step__icon {
width: 48px; height: 48px;
background: var(--blue-100);
display: grid; place-items: center;
border-radius: 12px;
font-size: 1.4rem;
}
.guide-step--diagnose .guide-step__icon { background: #e0f5ed; }
.guide-step--learn .guide-step__icon { background: #fff7ed; }
.guide-step--consult .guide-step__icon { background: #eef3fb; }
.guide-step h3 {
font-size: 1.2rem; color: var(--navy-900); margin: 0;
font-weight: 700;
}
.guide-step__desc {
color: var(--ink-700); font-size: 0.95rem;
line-height: 1.7; margin: 0;
}
.guide-step__desc strong { color: var(--navy-900); }
.guide-step__list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
padding: 14px 0;
border-top: 1px dashed var(--line-soft);
border-bottom: 1px dashed var(--line-soft);
}
.guide-step__list li { font-size: 0.88rem; color: var(--ink-700); }
.guide-step__list a {
color: var(--blue-600); text-decoration: none;
font-weight: 500;
}
.guide-step__list a:hover { text-decoration: underline; }
.guide-step__cta {
margin-top: auto;
color: var(--blue-600); font-weight: 700; font-size: 0.95rem;
text-decoration: none;
}
/* Benefits */
.guide-benefits {
display: grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin: 28px 0;
}
.guide-benefit {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 22px;
text-align: center;
}
.guide-benefit__icon {
font-size: 2rem; display: block; margin-bottom: 10px;
}
.guide-benefit h3 {
font-size: 1rem; color: var(--navy-900); margin: 0 0 6px;
font-weight: 700;
}
.guide-benefit p {
color: var(--ink-500); font-size: 0.85rem; line-height: 1.55;
margin: 0;
}
/* Ecosystem table */
.guide-ecosystem { margin-top: 24px; overflow-x: auto; }
.guide-ecosystem__table {
width: 100%; border-collapse: collapse;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.guide-ecosystem__table th,
.guide-ecosystem__table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--line-soft);
font-size: 0.92rem;
}
.guide-ecosystem__table thead th {
background: var(--bg-soft);
color: var(--navy-900);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: -0.01em;
}
.guide-ecosystem__table tbody tr:last-child td { border-bottom: none; }
.guide-ecosystem__table td:first-child { color: var(--ink-700); max-width: 50%; }
.guide-ecosystem__table td strong { color: var(--navy-900); }
.guide-ecosystem__table a { color: var(--blue-600); text-decoration: none; }
.guide-ecosystem__table a:hover { text-decoration: underline; }
.link-arrow--danger { color: #c5342b !important; }
/* 최종 CTA */
.section--cta-final { padding: 80px 0; background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.guide-cta { text-align: center; }
.guide-cta__grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin: 32px 0 20px;
}
.guide-cta__card {
background: #fff;
border: 2px solid var(--line);
border-radius: var(--radius);
padding: 28px 22px;
text-decoration: none; color: inherit;
display: flex; flex-direction: column; gap: 8px;
align-items: center;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.guide-cta__card:hover {
transform: translateY(-3px);
border-color: var(--blue-600);
box-shadow: 0 16px 32px rgba(11, 30, 63, 0.1);
}
.guide-cta__card--primary {
background: var(--navy-900); color: #fff;
border-color: var(--navy-900);
}
.guide-cta__card--primary:hover { background: var(--navy-800); }
.guide-cta__num {
font-size: 0.82rem; font-weight: 800;
color: var(--blue-600); letter-spacing: 0.08em;
}
.guide-cta__card--primary .guide-cta__num { color: #a9c9f5; }
.guide-cta__card h3 {
font-size: 1.1rem; margin: 0;
font-weight: 700;
}
.guide-cta__card p { font-size: 0.88rem; margin: 0; opacity: 0.8; }
.guide-cta__note { color: var(--ink-500); font-size: 0.88rem; margin-top: 12px; }
.guide-cta__note a { color: var(--navy-900); font-weight: 600; }
@media (max-width: 640px) {
.guide-step { padding: 24px 20px; }
.guide-ecosystem__table th,
.guide-ecosystem__table td { padding: 10px 12px; font-size: 0.85rem; }
}
/* ============================================================
Mobile Layer · 320px base (rewritten · single source of truth)
- 기존 Phase 21/21A/21B/21C 블록을 대체
- 최소폭 320px 에서도 깨지지 않는 깔끔한 레이아웃
- !important 지양, cascade 순서로 해결
- 데스크탑 (1024px+) 레이아웃은 건드리지 않음
============================================================ */
/* ----- 1. 글로벌 토큰 (전 해상도 공통) ----- */
/* iOS zoom 방지: 폼 필드는 16px 이상 필수 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
font-size: 16px;
font-family: inherit;
}
/* 최소 tap 영역 보장 */
.btn, button, [role="button"],
input[type="submit"], input[type="button"] {
min-height: 44px;
}
/* 이미지·미디어 반응형 */
img { max-width: 100%; height: auto; }
/* 접근성: focus-visible */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--blue-600);
outline-offset: 2px;
border-radius: 4px;
}
/* 접근성: reduced motion */
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ----- 2. Floating Help (데스크탑 768px+ 에서만) ----- */
.floating-help {
display: none; /* 기본 숨김, 데스크탑에서만 노출 */
}
@media (min-width: 769px) {
.floating-help {
display: inline-flex; align-items: center; gap: 8px;
position: fixed; bottom: 24px; right: 24px; z-index: 50;
padding: 8px 16px 8px 8px;
background: var(--navy-900); color: #fff;
border-radius: 999px;
box-shadow: 0 12px 28px rgba(11, 30, 63, 0.25);
text-decoration: none; font-weight: 700;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.floating-help:hover {
background: var(--blue-600);
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(30, 95, 191, 0.35);
color: #fff;
}
.floating-help__icon {
width: 32px; height: 32px;
background: #fff; color: var(--navy-900);
border-radius: 50%;
display: grid; place-items: center;
font-size: 1.05rem; font-weight: 800;
}
.floating-help:hover .floating-help__icon { color: var(--blue-600); }
.floating-help__label { font-size: 0.88rem; padding-right: 4px; }
}
/* ----- 3. Mobile Bottom Bar (모바일 768px 이하) ----- */
.mobile-bottom-bar {
display: none; /* 기본 숨김, 모바일에서만 노출 */
}
@media (max-width: 768px) {
.mobile-bottom-bar {
display: flex;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
background: #fff;
border-top: 1px solid var(--line);
box-shadow: 0 -2px 12px rgba(11, 30, 63, 0.06);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-bar__item {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
padding: 8px 4px 6px;
min-height: 56px;
text-decoration: none;
color: var(--ink-500);
transition: color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.mobile-bottom-bar__item:active {
background: var(--bg-soft);
}
.mobile-bottom-bar__icon {
width: 22px; height: 22px;
display: block;
color: currentColor;
}
.mobile-bottom-bar__label {
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
margin-top: 2px;
}
.mobile-bottom-bar__item.is-active {
color: var(--navy-900);
}
.mobile-bottom-bar__item.is-active .mobile-bottom-bar__icon {
color: var(--blue-600);
}
.mobile-bottom-bar__item.is-active .mobile-bottom-bar__label {
font-weight: 700;
color: var(--navy-900);
}
/* 활성 상태 상단 표시 선 — 일관성과 세련미 */
.mobile-bottom-bar__item { position: relative; }
.mobile-bottom-bar__item.is-active::before {
content: '';
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 28px; height: 3px;
background: var(--blue-600);
border-radius: 0 0 3px 3px;
}
/* body 가 하단바에 가려지지 않도록 여백 확보 */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
.site-footer { margin-bottom: 0; }
}
/* ============================================================
4. 모바일 전용 오버라이드 (768px 이하)
mobile-first 관점에서 320~768px 공통 규칙
============================================================ */
@media (max-width: 768px) {
/* ---- 컨테이너 & 섹션 스페이싱 ---- */
.container { padding-inline: 16px; }
.container--narrow { padding-inline: 16px; }
.section { padding-block: 48px; }
.section--gray { padding-block: 48px; }
/* ---- 타이포그래피 ---- */
h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.3; word-break: keep-all; }
h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.35; word-break: keep-all; }
h3 { font-size: clamp(1rem, 4vw, 1.15rem); line-height: 1.4; word-break: keep-all; }
/* Hero (홈) */
.hero__inner { padding: 64px 16px 72px; }
.hero__title {
font-size: clamp(1.75rem, 7vw, 2.4rem);
line-height: 1.25;
word-break: keep-all;
}
.hero__lead {
font-size: 0.95rem; line-height: 1.65;
margin-top: 14px;
word-break: keep-all;
}
.hero__actions {
flex-direction: column; align-items: stretch;
gap: 10px; margin-top: 28px;
}
.hero__actions .btn { width: 100%; }
.hero__stats {
grid-template-columns: 1fr 1fr;
gap: 14px; margin-top: 28px;
}
.hero__stats dd {
font-size: clamp(1.5rem, 8vw, 2.2rem);
}
/* Page hero (서브 페이지) */
.page-hero { padding: 48px 0 32px; }
.page-hero__lead {
font-size: 0.95rem; line-height: 1.65;
word-break: keep-all;
}
.page-hero__actions {
flex-direction: column; align-items: stretch;
gap: 10px; margin-top: 20px;
}
.page-hero__actions .btn { width: 100%; }
.page-hero--center .page-hero__actions { align-items: stretch; }
/* Section head */
.section__head { margin-bottom: 24px; }
.section__head--split {
flex-direction: column; align-items: flex-start;
gap: 12px;
}
.section__title { margin-bottom: 6px; }
.section__desc { font-size: 0.93rem; line-height: 1.65; }
/* ---- 버튼 ---- */
.btn {
white-space: normal;
line-height: 1.35;
padding: 11px 18px;
font-size: 0.92rem;
}
.btn--lg {
padding: 13px 20px;
font-size: 0.98rem;
}
.btn--sm {
padding: 8px 14px;
font-size: 0.85rem;
}
/* ---- 폼 공통 ---- */
.form-row--two {
grid-template-columns: 1fr;
gap: 12px;
}
.checkbox-grid { grid-template-columns: 1fr; gap: 8px; }
.contact-grid { grid-template-columns: 1fr; gap: 24px; }
.contact-form { gap: 14px; }
/* 체크박스 tap 확대 */
.checkbox {
min-height: 44px;
align-items: flex-start;
padding: 6px 0;
}
/* ---- 그리드 → 1열 통일 ---- */
.service-grid,
.service-grid--sm,
.insight-grid,
.insight-grid--lg,
.case-grid,
.partner-grid,
.tool-hub-grid,
.stage-card-grid,
.guide-steps,
.guide-benefits,
.guide-cta__grid,
.revenue-grid,
.verify-next__grid,
.vm-grid,
.diff-grid,
.core-grid,
.credential-grid,
.tool-result-grid,
.savings-grid,
.retire-scenarios,
.bench-check,
.bench-next,
.resource-grid,
.feature-list {
grid-template-columns: 1fr;
gap: 12px;
}
/* ---- Detail grid (서비스·단계 등) 스택 ---- */
.detail-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.detail-aside {
position: static;
margin-top: 0;
}
/* ---- Table 오버플로우 ---- */
table:not(.table--stack):not(.guide-ecosystem__table) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* Category chip bar */
.category-bar {
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.chip {
padding: 7px 11px;
font-size: 0.8rem;
}
/* Pagination tap */
.pagination a {
padding: 10px 14px;
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ---- Header 모바일 고정 ---- */
.site-header {
position: sticky; top: 0; z-index: 30;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ---- Footer 모바일 ---- */
.site-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 28px 16px;
}
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__col h3 { font-size: 0.88rem; margin-bottom: 10px; }
.site-footer__col li { padding: 3px 0; }
.site-footer__col a { font-size: 0.85rem; }
.site-footer__meta {
flex-direction: column; align-items: flex-start;
gap: 8px; font-size: 0.78rem;
}
.site-footer__meta-links {
flex-wrap: wrap; gap: 12px;
}
}
/* ============================================================
5. 페이지·컴포넌트별 특수 (768px 이하)
============================================================ */
@media (max-width: 768px) {
/* ---- Guide page ---- */
.guide-step {
padding: 22px 18px;
}
.guide-step__num {
top: 16px; right: 18px;
font-size: 0.78rem;
}
.guide-step h3 { font-size: 1.1rem; }
.guide-step__desc { font-size: 0.92rem; }
.guide-benefit { padding: 20px 16px; }
.guide-benefit__icon { font-size: 1.6rem; margin-bottom: 8px; }
.guide-benefit h3 { font-size: 0.95rem; }
.guide-benefit p { font-size: 0.82rem; }
/* Ecosystem table → card layout */
.guide-ecosystem__table {
border: none; background: transparent;
}
.guide-ecosystem__table thead { display: none; }
.guide-ecosystem__table tbody,
.guide-ecosystem__table tr,
.guide-ecosystem__table td {
display: block; width: 100%;
}
.guide-ecosystem__table tr {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.guide-ecosystem__table td {
padding: 4px 0;
border-bottom: none;
font-size: 0.88rem;
}
.guide-ecosystem__table td:nth-child(1) {
color: var(--ink-700); line-height: 1.5; max-width: 100%;
}
.guide-ecosystem__table td:nth-child(2) {
color: var(--navy-900); font-weight: 700;
padding-top: 6px;
}
.guide-ecosystem__table td:nth-child(3) {
padding-top: 4px;
}
/* Guide CTA cards */
.guide-cta__card { padding: 22px 18px; }
.guide-cta__card h3 { font-size: 1rem; }
.guide-cta__card p { font-size: 0.82rem; }
/* ---- Home ---- */
.credential-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.credential-card { padding: 16px 14px; }
.credential-card__num { font-size: 1.3rem; }
.credential-card__label { font-size: 0.78rem; }
.tool-card { padding: 22px 18px; }
.value-card { padding: 22px 18px; }
.service-card { padding: 22px 18px; }
.seminar-card { padding: 20px 18px; }
.partner-card { padding: 22px 18px; }
.partner-card__head { gap: 10px; }
.partner-card__mark { width: 56px; height: 56px; }
.partner-card__foot {
flex-direction: column; align-items: stretch;
gap: 8px; margin-top: 14px;
}
.partner-card__foot .btn { width: 100%; }
.partner-card__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.partner-card__stat-value { font-size: 1.05rem; }
/* Problem list */
.problem-list li {
padding: 14px 14px 14px 44px;
font-size: 0.9rem;
}
.problem-list li::before {
left: 10px; width: 22px; height: 22px;
font-size: 0.82rem;
}
/* Revenue grid */
.revenue-card { padding: 22px 18px; }
.revenue-card__title { font-size: 1rem; }
/* ---- About (인사말) ---- */
.greeting__intro {
padding: 24px 18px;
margin-bottom: 28px;
}
.greeting__headline { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }
.greeting__sub { font-size: 0.94rem; }
.greeting__body {
grid-template-columns: 1fr;
gap: 24px;
}
.greeting__sig {
max-width: 280px;
margin: 0 auto;
padding: 20px;
}
.greeting__portrait {
width: 160px; height: 192px;
margin: 0 auto 12px;
}
.greeting__sub-headline { font-size: 1.05rem; }
.greeting__message p { font-size: 0.92rem; line-height: 1.75; }
.greeting__pillars {
flex-direction: column;
gap: 10px;
}
.greeting-pillar { max-width: 100%; padding: 18px 16px; }
.greeting-pillar h4 { font-size: 0.98rem; }
.greeting-pillar p { font-size: 0.82rem; }
.greeting-pillar__arrow { transform: rotate(90deg); padding: 2px 0; }
/* ---- Cases premium gate ---- */
.case-premium { margin: 24px 0; }
.case-premium--locked {
min-height: 0; /* absolute 해제 */
overflow: visible;
}
.case-premium__blurred {
filter: blur(4px);
max-height: 180px;
overflow: hidden;
padding: 14px 16px;
opacity: 0.5;
}
.case-premium__gate {
position: relative; inset: auto;
background: none;
backdrop-filter: none;
margin-top: -40px;
}
.case-premium__gate-inner {
max-width: 100%;
padding: 24px 20px;
border-radius: 14px;
box-shadow: 0 16px 32px rgba(11, 30, 63, 0.1);
}
.case-premium__gate-inner h2 {
font-size: clamp(1rem, 4.4vw, 1.2rem);
line-height: 1.5;
}
.case-premium__gate-inner h2 br { display: none; }
.case-premium__gate-lead { font-size: 0.88rem; }
.case-premium__gate-actions {
flex-direction: column; align-items: stretch;
gap: 8px; margin-bottom: 14px;
}
.case-premium__gate-actions .btn,
.case-premium__gate-actions form,
.case-premium__gate-actions form button { width: 100%; }
.case-premium__gate-perks { font-size: 0.84rem; }
/* Case card */
.case-card { padding: 20px 18px; }
.case-card__title { font-size: 1rem; }
.case-card__summary { font-size: 0.86rem; }
/* ---- Verify nudge (cases list 상단 배너) ---- */
.verify-nudge {
flex-direction: column;
align-items: stretch;
padding: 14px 16px;
gap: 12px;
}
.verify-nudge__icon { margin-bottom: 2px; }
.verify-nudge .btn { width: 100%; }
/* ---- Signup stepper ---- */
.auth-card--stepper { padding: 28px 20px; max-width: 100%; }
.auth-card__head h1 { font-size: 1.35rem; }
.auth-card__lead { font-size: 0.92rem; }
.auth-perks { padding: 14px 16px; gap: 10px; }
.auth-perks--compact { padding: 12px 14px; }
.auth-perks li strong { font-size: 0.88rem; }
.auth-perks li small { font-size: 0.78rem; line-height: 1.5; }
.auth-perks__icon { width: 32px; height: 32px; font-size: 1.05rem; }
.step-bar {
gap: 4px;
padding: 4px;
background: var(--bg-soft);
border-radius: 10px;
margin-bottom: 24px;
}
.step-bar__item {
flex: 1 1 0;
padding: 8px 6px;
gap: 6px;
min-height: 44px;
font-size: 0.78rem;
}
.step-bar__num {
width: 22px; height: 22px;
font-size: 0.78rem;
}
.step-bar__label small { display: none; }
.step-bar__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.step-panel__title { font-size: 1rem; }
.step-panel__hint { font-size: 0.86rem; }
.step-panel__actions {
flex-direction: column-reverse;
gap: 8px;
margin-top: 18px;
}
.step-panel__actions--single { flex-direction: column; }
.step-panel__actions .btn { width: 100%; }
/* Field pw toggle smaller */
.field__pw-toggle {
padding: 4px 8px;
font-size: 0.74rem;
}
/* ---- Login / Verify card ---- */
.auth-card { padding: 26px 20px; }
.auth-card--compact { padding: 24px 18px; }
.auth-card--center { text-align: center; }
.auth-form { gap: 12px; }
/* Verify badge */
.verify-badge {
flex-direction: column; align-items: center;
text-align: center;
padding: 18px 16px;
}
.verify-badge > span { margin-bottom: 6px; }
.verify-badge--lg > span { width: 48px; height: 48px; font-size: 1.4rem; }
.verify-badge--lg strong { font-size: 1.02rem; }
.verify-done-actions {
flex-direction: column; align-items: stretch;
gap: 8px;
}
.verify-done-actions .btn { width: 100%; }
.verify-done-title { margin-top: 18px; font-size: 1.2rem; }
/* Verify next cards */
.verify-next__title { font-size: 1.1rem; }
.verify-next__card { padding: 20px 18px; }
.verify-next__card h3 { font-size: 0.95rem; }
.verify-next__card h3 br { display: none; }
/* Verify trust list */
.verify-trust { padding: 14px 16px; gap: 6px; }
.verify-trust li { font-size: 0.86rem; }
/* ---- Contact page ---- */
.contact-trust {
flex-direction: column; align-items: stretch;
padding: 12px 14px;
gap: 10px;
}
.contact-trust__badge { align-self: flex-start; }
.contact-trust strong { font-size: 0.92rem; }
.contact-trust small { font-size: 0.8rem; }
.contact-aside {
grid-template-columns: 1fr;
gap: 14px;
}
.contact-aside__box { padding: 18px 16px; }
.contact-aside__box h3 { font-size: 0.98rem; }
.contact-aside__line {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 8px 0;
}
.contact-aside__box--alt li { font-size: 0.85rem; }
/* 모바일에서 긴급 법률을 최상단으로 */
.contact-aside__box--urgent { order: -1; }
/* Attach diagnostic banner */
.attach-diagnostic { padding: 12px 14px; }
.attach-diagnostic strong { font-size: 0.9rem; }
.attach-diagnostic small { font-size: 0.8rem; }
/* Checkbox agree */
.checkbox--agree {
padding: 4px 0;
}
.checkbox--agree strong { font-size: 0.9rem; }
.checkbox--agree small { font-size: 0.78rem; line-height: 1.55; }
/* ---- Legal urgent ---- */
.legal-hero { padding: 48px 0 32px; }
.legal-hero h1 {
font-size: clamp(1.4rem, 5.6vw, 2rem);
line-height: 1.3;
}
.legal-hero h1 br { display: none; }
.legal-perks {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 20px;
}
.legal-perks > li {
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 12px;
padding: 14px 16px;
}
.legal-perks__icon { flex: 0 0 auto; margin-bottom: 0; }
.legal-alert {
padding: 14px 16px;
border-radius: 12px;
}
.legal-alert .checkbox {
align-items: flex-start;
min-height: 44px;
}
.legal-thanks__trust { padding: 14px 16px; }
.legal-thanks__actions {
flex-direction: column; align-items: stretch;
gap: 8px;
}
.legal-thanks__actions .btn { width: 100%; }
/* ---- Tools ---- */
.tool-card { padding: 22px 18px; }
.tool-card__name { font-size: 1.05rem; }
.tool-card__lead { font-size: 0.88rem; }
/* Tool result cards */
.tool-result-grid { grid-template-columns: 1fr; gap: 12px; }
.tool-result-card { padding: 22px 18px; }
.tool-result-card--primary { order: -1; }
.tool-result-card__num { font-size: clamp(1.5rem, 6.5vw, 2rem); }
.tool-result-card__label { font-size: 0.82rem; }
.savings-grid { grid-template-columns: 1fr; gap: 10px; }
.savings-item {
padding: 12px 14px;
border-left-width: 3px;
}
.retire-gap__row {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.retire-gap__summary {
grid-template-columns: 1fr;
gap: 12px;
}
.retire-gap__coverage { justify-self: stretch; }
.retire-scenarios { grid-template-columns: 1fr; gap: 12px; }
.retire-scenario { padding: 20px 18px; }
.retire-scenario--primary .btn {
width: 100%;
min-height: 48px;
}
.bench-position {
grid-template-columns: 1fr;
gap: 16px;
}
.bench-tiers {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.bench-tier {
padding: 12px 10px;
min-height: 72px;
}
.bench-tier__label { font-size: 0.82rem; }
.bench-check { grid-template-columns: 1fr; gap: 10px; }
.bench-concern { padding: 12px 14px; }
.bench-next { grid-template-columns: 1fr; gap: 12px; }
.bench-next__consult .btn { width: 100%; }
.tool-result-cta__actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.tool-result-cta__actions .btn {
width: 100%; min-height: 48px;
}
/* Field hint */
.field__hint {
display: block;
font-size: 0.78rem;
margin-top: 4px;
}
/* ---- My diagnostics ---- */
.my-diag-card__head {
flex-wrap: wrap; gap: 8px;
}
.my-diag-card__json pre {
font-size: 0.78rem;
word-break: break-all;
overflow-wrap: anywhere;
}
/* ---- Services detail ---- */
.process-timeline__item { padding: 12px 0 12px 56px; }
.process-timeline__num {
width: 36px; height: 36px;
font-size: 0.8rem;
}
.process-timeline__body h3 { font-size: 1rem; }
.concern-grid { grid-template-columns: 1fr; gap: 10px; }
.concern-card { padding: 14px 16px; }
.feature-list li {
padding: 14px 16px;
}
.feature-list h3 { font-size: 0.98rem; }
/* ---- Journey ---- */
.stage-hero {
padding: 48px 0 32px;
}
.stage-hero__body {
flex-direction: column;
gap: 16px;
}
.stage-hero__icon { margin: 0 auto; }
.stage-hero__breadcrumb { font-size: 0.8rem; }
/* journey-arc 가로 스크롤 유지 */
.journey-arc {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}
.journey-arc__list {
grid-template-columns: repeat(7, 140px);
min-width: max-content;
}
.journey-arc__node { scroll-snap-align: start; }
/* Stage card grid */
.stage-card-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stage-mini-card { padding: 16px 14px; }
.stage-mini-card__name { font-size: 0.95rem; }
.stage-mini-card__tagline { font-size: 0.8rem; }
/* ---- Partner ---- */
.partner-hero {
padding: 40px 0 32px;
}
.partner-hero__body {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.partner-hero__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 8px;
}
.partner-hero__actions .btn { width: 100%; min-height: 48px; }
.partner-stats {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.partner-stats__card { padding: 16px 12px; }
.partner-stats__value { font-size: 1.2rem; }
.partner-stats__label { font-size: 0.78rem; }
/* ---- Seminars ---- */
.seminar-card { padding: 20px 16px; }
.seminar-card__date { font-size: 0.82rem; }
.seminar-card h3 { font-size: 1.05rem; }
/* ---- Insights ---- */
.insights-search {
flex-wrap: wrap;
gap: 8px;
}
.insights-search input[type="search"] {
flex: 1 1 100%;
min-width: 0;
}
.insights-search .btn {
flex: 1 1 auto;
}
.insight-card { padding: 20px 18px; }
.insight-card h3 { font-size: 1rem; }
.insight-card p { font-size: 0.86rem; }
/* Insight detail article */
.article-head h1 {
font-size: clamp(1.35rem, 5vw, 1.8rem);
}
.prose { font-size: 0.95rem; line-height: 1.75; }
/* ---- Tools Hub related content partial ---- */
.tool-related__subtitle { font-size: 0.95rem; }
.tool-related__foot .btn { width: 100%; }
/* ---- Resources ---- */
.resource-block { padding: 20px 18px; }
.resource-block h3 { font-size: 1rem; }
/* ---- Booking ---- */
.booking-embed iframe { min-height: 600px; }
/* ---- Portal ---- */
.portal-list { display: block; }
.portal-list__row {
display: block;
padding: 14px 0;
}
.portal-list__time {
display: block;
margin-top: 4px;
font-size: 0.8rem;
color: var(--ink-500);
}
}
/* ============================================================
6. 320px ~ 375px 극소폭 추가 보정
(iPhone SE 1st, Galaxy Fold outer, 구형 Android)
============================================================ */
@media (max-width: 375px) {
.container { padding-inline: 14px; }
/* Hero 더 타이트하게 */
.hero__inner { padding: 56px 14px 64px; }
.hero__title { font-size: clamp(1.6rem, 7.5vw, 2rem); }
.hero__lead { font-size: 0.9rem; }
.page-hero { padding: 40px 0 28px; }
h1 { font-size: clamp(1.35rem, 6vw, 1.75rem); }
/* Hero stats 1열 */
.hero__stats { grid-template-columns: 1fr; gap: 10px; }
/* credential 1열 */
.credential-grid { grid-template-columns: 1fr; }
/* Step bar 극소폭 */
.step-bar__item { padding: 6px 3px; font-size: 0.72rem; }
.step-bar__num { width: 20px; height: 20px; font-size: 0.72rem; }
/* 버튼 여백 축소 */
.btn { padding: 10px 14px; font-size: 0.9rem; }
.btn--lg { padding: 12px 16px; font-size: 0.95rem; }
/* Footer 2열 → 1열 */
.site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
/* Stage card 1열 */
.stage-card-grid { grid-template-columns: 1fr; }
/* Bench tiers 1열 */
.bench-tiers { grid-template-columns: 1fr; }
/* Partner stats 1열 */
.partner-stats { grid-template-columns: 1fr; }
/* Pricing bench tier 번호 크기 축소 */
.bench-tier { min-height: 60px; padding: 10px; }
/* Cases chip 바 축소 */
.chip { padding: 6px 10px; font-size: 0.76rem; }
/* Nav auth 숨김 (모바일 하단바로 대체) */
.nav-auth { display: none; }
}
/* ============================================================
7. 태블릿 보정 (769px ~ 1023px)
데스크탑 이전, 모바일 이후 — 2열 기반
============================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
.container { padding-inline: 24px; }
/* 2열 기반 */
.service-grid,
.insight-grid,
.case-grid,
.partner-grid,
.tool-hub-grid,
.guide-steps,
.guide-benefits,
.revenue-grid,
.verify-next__grid,
.tool-result-grid,
.retire-scenarios,
.bench-next,
.resource-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
/* Stage card 3열 */
.stage-card-grid {
grid-template-columns: repeat(3, 1fr);
}
/* Tool result primary 전체 폭 */
.tool-result-card--primary {
grid-column: 1 / -1;
}
/* Bench tiers 4열 유지 */
.bench-tiers { grid-template-columns: repeat(4, 1fr); }
/* Hero stats 3열 */
.hero__stats { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
8. 유틸리티 클래스 (전 해상도)
============================================================ */
/* 중앙 정렬 유틸 */
.page-hero__actions--center { justify-content: center; }
.page-hero__actions--mt { margin-top: 20px; }
.contact-trust--mt { margin-top: 20px; }
.form-footnote--mt { margin-top: 16px; }
.empathy-block--mt { margin-top: 28px; }
.article__cta--mt { margin-top: 32px; }
/* 이메일·URL 줄바꿈 */
a[href^="tel:"], a[href^="mailto:"] { word-break: break-all; }
/* 모바일에서 br 숨김 원할 때 */
@media (max-width: 640px) {
.hide-br-mobile br { display: none; }
}
/* Flash messages 모바일 */
@media (max-width: 768px) {
.flash-wrap { padding: 0 16px; margin-top: 12px; }
.flash { font-size: 0.9rem; padding: 10px 14px; }
}
/* ---- Track Record 전체 클릭 가능 ---- */
.section--credentials__link {
display: block; text-decoration: none; color: inherit;
transition: opacity 0.2s;
}
.section--credentials__link:hover { opacity: 0.92; color: inherit; }
.section--credentials__link:hover .credential-card {
transform: translateY(-2px);
transition: transform 0.2s;
}
.section--credentials__cta {
text-align: center;
margin-top: 28px;
color: var(--blue-600);
font-weight: 700;
font-size: 0.95rem;
}
/* Sticky header 고려 anchor offset */
#greetings { scroll-margin-top: 80px; }
@media (max-width: 768px) {
#greetings { scroll-margin-top: 64px; }
}
/* ---- 메뉴 열렸을 때 하단바 숨기기 (모바일) ---- */
@media (max-width: 768px) {
body.nav-open .mobile-bottom-bar { display: none; }
body.nav-open .floating-help { display: none; }
}
/* ============================================================
Mobile Drawer · 우측 슬라이드 네비게이션
base.html 최하단 body 직속으로 렌더되므로 containing block 문제 없음
============================================================ */
.mobile-drawer {
display: none; /* 모바일에서만 표시 */
}
@media (max-width: 768px) {
.mobile-drawer {
display: block;
position: fixed; inset: 0;
z-index: 100; /* 모든 요소 위 */
pointer-events: none; /* 닫힌 상태에서는 클릭 통과 */
}
.mobile-drawer__overlay {
position: absolute; inset: 0;
background: rgba(11, 30, 63, 0.5);
opacity: 0;
transition: opacity 0.25s ease;
border: 0; padding: 0; cursor: pointer;
}
.mobile-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: 85%; max-width: 380px;
background: #fff;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -16px 0 40px rgba(11, 30, 63, 0.18);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Open state */
.mobile-drawer.is-open { pointer-events: auto; }
.mobile-drawer.is-open .mobile-drawer__overlay { opacity: 1; }
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
/* Head */
.mobile-drawer__head {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--line-soft);
background: #fff;
position: sticky; top: 0; z-index: 2;
}
.mobile-drawer__brand {
display: inline-flex; align-items: center; gap: 10px;
color: var(--navy-900); text-decoration: none;
}
.mobile-drawer__brand-mark {
width: 34px; height: 34px;
background: var(--navy-900); color: #fff;
border-radius: 8px;
display: grid; place-items: center;
font-weight: 800; font-size: 0.85rem;
letter-spacing: 0.02em;
}
.mobile-drawer__brand-text {
font-weight: 700; font-size: 0.95rem;
line-height: 1.3;
}
.mobile-drawer__close {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--navy-900); color: #fff;
border: 1px solid var(--navy-900);
border-radius: 999px;
font-weight: 700; font-size: 0.85rem;
cursor: pointer;
font-family: inherit;
}
.mobile-drawer__close svg { width: 16px; height: 16px; }
/* User block */
.mobile-drawer__user {
flex: 0 0 auto;
display: flex; align-items: center; gap: 12px;
padding: 16px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line-soft);
}
.mobile-drawer__user--guest { background: #fff; }
.mobile-drawer__avatar {
width: 44px; height: 44px;
background: #fff;
border: 1px solid var(--line);
border-radius: 50%;
display: grid; place-items: center;
color: var(--ink-500);
flex: 0 0 auto;
}
.mobile-drawer__avatar svg { width: 22px; height: 22px; }
.mobile-drawer__user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-drawer__user-meta strong {
color: var(--navy-900); font-size: 0.95rem;
}
.mobile-drawer__verify {
font-size: 0.78rem;
text-decoration: none;
padding: 0;
}
.mobile-drawer__verify--ok { color: var(--accent); }
.mobile-drawer__verify--needed { color: var(--blue-600); font-weight: 600; }
/* Nav sections */
.mobile-drawer__nav {
flex: 1 1 auto;
padding: 8px 0 16px;
}
.mobile-drawer__section { padding: 12px 0 8px; }
.mobile-drawer__section + .mobile-drawer__section {
border-top: 1px solid var(--line-soft);
}
.mobile-drawer__section-label {
margin: 0;
padding: 0 16px 8px;
font-size: 0.72rem; font-weight: 700;
color: var(--ink-400);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mobile-drawer__section ul {
list-style: none; margin: 0; padding: 0;
}
.mobile-drawer__section li a {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
color: var(--ink-900);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
line-height: 1.3;
min-height: 48px;
transition: background 0.15s, color 0.15s;
}
.mobile-drawer__section li a:hover,
.mobile-drawer__section li a:active {
background: var(--bg-soft);
color: var(--navy-900);
}
.mobile-drawer__section li a svg {
width: 20px; height: 20px;
flex: 0 0 auto;
color: var(--ink-500);
}
.mobile-drawer__section li a:hover svg { color: var(--blue-600); }
/* Accents */
.mobile-drawer__item--urgent { color: #c5342b !important; }
.mobile-drawer__item--urgent svg { color: #c5342b !important; }
.mobile-drawer__item--accent { color: var(--blue-600) !important; font-weight: 700; }
.mobile-drawer__item--accent svg { color: var(--blue-600) !important; }
/* Foot (하단 Auth) */
.mobile-drawer__foot {
flex: 0 0 auto;
display: grid;
gap: 8px;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line-soft);
background: #fff;
position: sticky; bottom: 0;
}
.mobile-drawer__logout-form { margin: 0; }
.mobile-drawer__foot .btn {
width: 100%;
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
}
/* 하단바·floating 숨김 (drawer 열린 동안) */
body.drawer-open .mobile-bottom-bar,
body.drawer-open .floating-help {
display: none;
}
}