/* ============================================================
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: 0; padding: 8px;
width: 40px; height: 40px; cursor: pointer;
}
.nav-toggle span {
display: block; height: 2px; background: var(--navy-900);
margin: 5px 0; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* -------- 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: block; }
.primary-nav {
position: fixed; top: 64px; right: 0; left: 0;
background: #fff; padding: 16px 20px 24px;
flex-direction: column; gap: 12px;
border-top: 1px solid var(--line);
transform: translateY(-8px); opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.primary-nav[data-open='true'] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.primary-nav > ul { flex-direction: column; gap: 2px; width: 100%; }
.primary-nav > ul > li { border-bottom: 1px solid var(--line-soft); }
.primary-nav > ul > li:last-child { border-bottom: 0; }
.primary-nav > ul a { display: block; padding: 14px 2px; font-size: 1rem; }
.primary-nav > ul a[aria-current='page']::after { display: none; }
.submenu {
position: static; box-shadow: none; border: 0;
padding: 0 0 8px 12px; margin: 0;
opacity: 1; visibility: visible; transform: none;
}
.submenu li a { font-size: 0.9rem; padding: 8px 2px; color: var(--ink-500); }
.nav-cta { width: 100%; margin-top: 8px; }
/* 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; }
}
/* ---------- Floating help (Desktop 우측 하단) ---------- */
.floating-help {
position: fixed; bottom: 24px; right: 24px;
z-index: 50;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px 10px 10px;
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.1rem; font-weight: 800;
}
.floating-help:hover .floating-help__icon { color: var(--blue-600); }
.floating-help__label { font-size: 0.88rem; padding-right: 4px; }
@media (max-width: 768px) {
.floating-help { display: none; }
}
/* ---------- Mobile bottom bar ---------- */
.mobile-bottom-bar {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 40;
background: #fff;
border-top: 1px solid var(--line);
box-shadow: 0 -4px 20px rgba(11, 30, 63, 0.08);
padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
}
.mobile-bottom-bar__item {
flex: 1;
display: flex; flex-direction: column; align-items: center;
gap: 2px; padding: 8px 4px;
text-decoration: none;
color: var(--ink-500);
font-size: 0.7rem; font-weight: 600;
}
.mobile-bottom-bar__icon { font-size: 1.3rem; }
.mobile-bottom-bar__label { line-height: 1; }
.mobile-bottom-bar__item.is-active {
color: var(--blue-600);
}
@media (max-width: 768px) {
.mobile-bottom-bar { display: flex; }
body { padding-bottom: 64px; }
}
/* ============================================================
Phase 21 · Mobile Optimization Pass (Global)
모든 페이지에 적용되는 기반 모바일 규칙.
본 블록은 파일 **가장 뒤**에 위치해 기존 규칙보다 우선순위를 가진다.
============================================================ */
/* ---------- 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 타겟 최소 보장 ---------- */
button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"] {
min-height: 44px;
}
/* ---------- 모바일 전용 오버라이드 (640px 이하) ---------- */
@media (max-width: 640px) {
/* Container padding 압축 */
.container { padding-inline: 16px; }
/* Hero 상하 패딩 축소 */
.hero__inner { padding: 72px 16px 72px; }
.hero__title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
.hero__lead { font-size: 0.98rem; margin-top: 16px; }
.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 !important; gap: 14px !important; margin-top: 32px !important; }
/* Page hero */
.page-hero { padding: 56px 0 32px; }
.page-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.3; }
.page-hero__lead { font-size: 0.95rem; line-height: 1.65; }
.page-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.page-hero__actions .btn { width: 100%; }
/* Section vertical */
.section { padding-block: 48px; }
.section--gray { padding-block: 48px; }
/* Section head */
.section__head { margin-bottom: 24px; }
.section__title { font-size: clamp(1.25rem, 5vw, 1.75rem); }
.section__desc { font-size: 0.94rem; line-height: 1.65; }
.section__head--split { flex-direction: column; align-items: flex-start; gap: 12px; }
/* Buttons — 길면 줄바꿈 허용 */
.btn { white-space: normal; text-align: center; line-height: 1.3; padding: 10px 16px; }
.btn--lg { padding: 13px 20px; font-size: 0.98rem; }
/* Form rows stack */
.form-row--two { grid-template-columns: 1fr !important; gap: 12px !important; }
/* Checkbox grid */
.checkbox-grid { grid-template-columns: 1fr !important; }
/* Contact / legal form grid stack */
.contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
/* Typography margins tighten */
h2 { line-height: 1.3; }
h3 { line-height: 1.35; }
/* List spacing */
ul, ol { padding-left: 20px; }
/* Table fallback — 기본 overflow X scroll */
table:not(.table--stack):not(.guide-ecosystem__table) {
display: block;
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Images cap */
img { max-width: 100%; height: auto; }
/* 긴 링크·이메일 강제 줄바꿈 */
a[href^="tel:"], a[href^="mailto:"] { word-break: break-all; }
/* Detail-grid (서비스·단계 상세 등) stack */
.detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
/* Revenue grid / stage grid — 1열 강제 */
.revenue-grid, .verify-next__grid { grid-template-columns: 1fr !important; }
/* Tool hub grid */
.tool-hub-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
/* Case / insight / partner grid 1열 */
.case-grid, .partner-grid, .insight-grid, .service-grid,
.guide-steps, .guide-benefits, .guide-cta__grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* VM grid 1열 */
.vm-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
/* Category bar chips — wrap and smaller */
.category-bar { gap: 6px; margin-bottom: 16px; }
.chip { padding: 7px 12px; font-size: 0.82rem; }
/* Pagination touch */
.pagination a { padding: 10px 14px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Hero stats numbers smaller on mobile */
.hero__stats dd { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
/* Header refinement */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); }
/* Floating help hidden on mobile already (handled in Phase 20) */
/* Hide long phone string breaks */
.site-footer__meta { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.82rem; }
.site-footer__meta-links { flex-wrap: wrap; }
/* Partner hero portrait / icon stack */
.partner-hero__body { flex-direction: column; align-items: flex-start; gap: 16px; }
.partner-hero__actions { width: 100%; }
.partner-hero__actions .btn { flex: 1 1 100%; }
/* Stage hero stack */
.stage-hero__body { flex-direction: column; }
.stage-hero__icon { margin-bottom: 16px; }
/* Greeting portrait */
.greeting__portrait { width: 160px !important; height: 192px !important; }
/* Service detail aside stack */
.detail-aside { position: static !important; margin-top: 24px; }
/* Case premium gate padding */
.case-premium__gate-inner { padding: 24px 18px !important; margin: 0 6px; }
.case-premium__gate-inner h2 { font-size: 1.1rem !important; line-height: 1.5 !important; }
/* Flash messages */
.flash-wrap { padding: 0 16px; margin-top: 12px; }
/* Mobile bar + content padding 최종 보정 */
body { padding-bottom: 72px; }
/* Contact aside stack */
.contact-aside { grid-template-columns: 1fr !important; gap: 16px !important; }
/* Stepper bar smaller */
.step-bar { gap: 4px; }
.step-bar__item { padding: 8px 6px; font-size: 0.75rem; }
.step-bar__num { width: 20px; height: 20px; font-size: 0.72rem; }
.step-bar__label small { display: none; }
/* Auth perks padding down */
.auth-perks { padding: 14px 16px; }
.auth-perks li strong { font-size: 0.92rem; }
/* Revenue card min-height removed */
.revenue-card { padding: 22px 18px; }
/* Mobile bottom bar height compensation */
.mobile-bottom-bar__icon { font-size: 1.15rem; }
.mobile-bottom-bar__label { font-size: 0.66rem; }
}
/* ---------- 중간 브레이크 (641~1023px) ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
.container { padding-inline: 24px; }
.case-grid, .partner-grid, .insight-grid, .service-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
.tool-hub-grid { grid-template-columns: repeat(2, 1fr); }
.guide-steps { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- 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;
}
}
/* ---------- Safe area 확장 (iOS 노치) ---------- */
.mobile-bottom-bar { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* ============================================================
Phase 21A · Pages group
pages/home, guide, about, resources, booking
+ partials/header, footer, cta_section, positioning_section
각 페이지 고유 문제만 집중. 글로벌 Phase 21 중복 지양.
============================================================ */
/* 한국어 줄바꿈 기본 — 주요 텍스트 영역에 keep-all 적용 */
.hero__title,
.hero__lead,
.page-hero h1,
.page-hero__lead,
.section__title,
.section__desc,
.positioning__title,
.positioning__lead,
.greeting__headline,
.greeting__sub,
.greeting__sub-headline,
.cta-band h2,
.cta-band__lead {
word-break: keep-all;
overflow-wrap: break-word;
}
@media (max-width: 640px) {
/* ---------- Home ---------- */
/* 6칸 credential grid를 모바일 2열로 고정 (기존 560px break 보다 공격적) */
.home .credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.home .credential-card { padding: 18px 12px; }
.home .credential-card__num { font-size: clamp(1.3rem, 6vw, 1.6rem); }
.home .credential-card__label { font-size: 0.78rem; line-height: 1.4; }
/* problem-list 아이콘+텍스트 간격 축소 */
.home .problem-list li { padding: 14px 16px 14px 48px; font-size: 0.95rem; line-height: 1.55; }
.home .problem-list li::before { left: 14px; width: 22px; height: 22px; background-size: 12px; }
/* tool-card padding 축소 */
.home .tool-card { padding: 22px 20px; }
.home .tool-card__name { font-size: 1.05rem; }
.home .tool-card__badge { top: 16px; right: 16px; }
/* value-card 내부 padding 축소 */
.home .value-card { padding: 24px 20px; }
.home .value-card__label { font-size: 1.05rem; }
/* service-card padding 축소 */
.home .service-card { padding: 22px 20px; }
/* seminar-card padding 축소 */
.home .seminar-card { padding: 22px 20px 20px; }
.home .seminar-card__meta > div { grid-template-columns: 44px 1fr; font-size: 0.82rem; }
/* partner-card — 모바일 1열 + head stack */
.home .partner-card__head { gap: 12px; }
.home .partner-card__foot { flex-wrap: wrap; }
.home .partner-card__foot .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; }
/* revenue-insights padding 축소 */
.revenue-insights { padding: 14px 16px; margin-top: 20px; }
.revenue-insights li a { font-size: 0.88rem; line-height: 1.5; }
/* ---------- Guide ---------- */
/* Ecosystem table → 카드화 (thead 숨김, data-label 대체 불가하므로 tr block) */
.guide .guide-ecosystem { overflow: visible; margin-top: 16px; }
.guide .guide-ecosystem__table {
display: block; border: 0; background: transparent;
box-shadow: none; border-radius: 0;
}
.guide .guide-ecosystem__table thead { display: none; }
.guide .guide-ecosystem__table tbody { display: block; }
.guide .guide-ecosystem__table tr {
display: block; margin-bottom: 12px;
background: #fff;
border: 1px solid var(--line); border-radius: var(--radius);
padding: 14px 16px;
}
.guide .guide-ecosystem__table td {
display: block; padding: 6px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 0.9rem;
}
.guide .guide-ecosystem__table td:last-child { border-bottom: 0; }
.guide .guide-ecosystem__table td:first-child {
font-weight: 600; color: var(--navy-900); max-width: 100%;
}
.guide .guide-ecosystem__table td:nth-child(2)::before {
content: '담당 · '; color: var(--ink-400); font-size: 0.82rem;
}
.guide .guide-ecosystem__table td:nth-child(3)::before {
content: '연결 · '; color: var(--ink-400); font-size: 0.82rem;
}
/* guide-step 번호+아이콘 정렬 */
.guide .guide-step { padding: 20px 18px; }
.guide .guide-step__num { font-size: 0.9rem; }
.guide .guide-step__icon { width: 40px; height: 40px; }
.guide .guide-step h3 { font-size: 1.08rem; line-height: 1.4; }
.guide .guide-step__desc { font-size: 0.92rem; line-height: 1.65; }
/* guide-benefit stacking */
.guide .guide-benefit { padding: 20px 18px; }
.guide .guide-benefit__icon { font-size: 1.6rem; }
/* guide-cta 카드 padding 축소 */
.guide .guide-cta__card { padding: 22px 18px; }
.guide .guide-cta__card h3 { font-size: 1rem; }
.guide .guide-cta__card p { font-size: 0.85rem; line-height: 1.5; }
/* FAQ summary tap target */
.guide .faq-list summary { min-height: 48px; display: flex; align-items: center; padding: 12px 44px 12px 16px; }
/* ---------- About ---------- */
/* Greeting 3-pillars — 화살표 회전 + 카드 패딩 */
.about .greeting { padding: 0 2px; }
.about .greeting__intro { padding: 24px 20px; }
.about .greeting__headline { font-size: clamp(1.3rem, 5.5vw, 1.6rem); line-height: 1.35; }
.about .greeting__sub-headline { font-size: clamp(1.05rem, 4.5vw, 1.25rem); line-height: 1.45; }
.about .greeting__message p { font-size: 0.95rem; line-height: 1.75; }
.about .greeting__sig { max-width: 260px; margin: 0 auto; }
.about .greeting__portrait { width: 160px !important; height: 192px !important; }
.about .greeting__pillars { gap: 10px; }
.about .greeting-pillar { padding: 18px 16px; }
.about .greeting-pillar h4 { font-size: 1rem; }
.about .greeting-pillar p { font-size: 0.85rem; }
.about .greeting-pillar__arrow { font-size: 1.4rem; padding: 2px 0; }
/* VM card — 제목 clamp */
.about .vm-card { padding: 26px 22px; }
.about .vm-card h2 { font-size: clamp(1.05rem, 4.4vw, 1.3rem); line-height: 1.45; }
/* diff-card padding */
.about .diff-card { padding: 22px 20px; }
.about .diff-card h3 { font-size: 1.05rem; }
/* about-approach article */
.about .about-approach article { padding: 20px 18px; }
.about .about-approach h3 { font-size: 1rem; }
/* ---------- Resources ---------- */
.resources-trust,
.booking-trust { max-width: none; }
.resources-trust { margin-bottom: 28px; }
.resources-intro { margin-bottom: 10px; font-size: 0.92rem; }
.resource-block { padding: 20px 0; }
.resource-block .detail-section__title {
font-size: clamp(1.05rem, 4.4vw, 1.25rem); line-height: 1.4;
margin-top: 16px; margin-bottom: 12px;
}
.resource-list { padding-left: 2px; }
.resource-list li {
padding: 10px 0 10px 28px;
font-size: 0.9rem; line-height: 1.6;
}
.resource-list li::before { top: 12px; }
.resource-tip { padding: 18px 16px; }
.resource-tip h3 { font-size: 1rem; line-height: 1.4; }
.resource-tip p { font-size: 0.9rem; line-height: 1.7; }
.resources-next { margin-top: 28px; }
/* ---------- Booking ---------- */
.booking-embed iframe { min-height: 640px; }
.booking-fallback { padding: 28px 20px; }
.booking-fallback h2 { font-size: clamp(1.1rem, 4.8vw, 1.4rem); line-height: 1.4; }
.booking-fallback p { font-size: 0.92rem; line-height: 1.7; }
.booking-fallback__actions { justify-content: center; }
.booking-footnote { text-align: center; margin-top: 20px; font-size: 0.85rem; line-height: 1.7; }
.booking-trust { margin-top: 22px; }
/* ---------- Partials: CTA band ---------- */
.cta-band__inner { padding: 40px 16px; gap: 18px; }
.cta-band h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.4; }
.cta-band__lead { font-size: 0.92rem; line-height: 1.65; margin-top: 8px; }
.cta-band__actions .btn--lg { padding: 13px 18px; font-size: 0.95rem; }
/* ---------- Partials: Positioning ---------- */
.positioning__title { font-size: clamp(1.35rem, 5.4vw, 1.8rem); line-height: 1.35; }
.positioning__lead { font-size: 0.95rem; line-height: 1.7; }
.positioning__choice { gap: 12px; }
.positioning__choice-card { padding: 22px 20px; }
.positioning__choice-card h3 { font-size: 1.05rem; line-height: 1.45; }
.positioning__choice-card p { font-size: 0.92rem; line-height: 1.65; }
.positioning__choice-card .btn { width: 100%; }
.positioning__footnote { font-size: 0.8rem; line-height: 1.6; padding: 0 4px; }
/* ---------- Partials: Header ---------- */
.site-header__inner { padding: 0 16px; }
/* 햄버거 열렸을 때 nav-auth 그리드 */
.primary-nav[data-open='true'] .nav-auth {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 8px 0 0; padding: 12px 0 0;
border-right: 0; border-top: 1px solid var(--line-soft);
}
.primary-nav[data-open='true'] .nav-auth__link { font-size: 0.9rem; padding: 8px 10px; }
.primary-nav[data-open='true'] .nav-auth__link--strong { padding: 8px 14px; }
.primary-nav[data-open='true'] .nav-auth__who { width: 100%; flex-wrap: wrap; gap: 6px; }
.primary-nav[data-open='true'] .nav-cta { min-height: 48px; display: flex; align-items: center; justify-content: center; }
/* 햄버거 버튼 tap target 확대 */
.nav-toggle { min-width: 44px; min-height: 44px; }
/* ---------- Partials: Footer ---------- */
.site-footer { padding: 44px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
.site-footer__col h3 { font-size: 0.9rem; margin-bottom: 10px; }
.site-footer__col li { font-size: 0.86rem; margin: 6px 0; }
.site-footer__col li a { line-height: 1.5; display: inline-block; padding: 3px 0; }
.site-footer__note { font-size: 0.82rem; line-height: 1.65; }
}
/* ---------- Tablet / small desktop (641~1023px) 미세 조정 ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
.home .credential-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about .greeting__body { grid-template-columns: 1fr; gap: 24px; }
.about .greeting__sig { max-width: 340px; margin: 0 auto; }
.guide .guide-cta__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
Phase 21B · Services/Journey/Tools group
services/(list|detail), journey/(overview|detail),
tools/(hub|tax|retirement|benchmark|save_by_email|my_diagnostics) 및
seminars/(list|detail|thanks).
Phase 21 글로벌 규칙 중복 지양 — 각 페이지 고유 모바일 이슈만.
============================================================ */
/* ---------- 한국어 줄바꿈 (이 그룹 주요 텍스트) ---------- */
.stage-hero h1,
.stage-hero__tagline,
.seminar-hero h1,
.seminar-hero__subtitle,
.seminar-hero__summary,
.seminar-card__title,
.seminar-card__subtitle,
.seminar-card__summary,
.stage-card__headline,
.empathy-block .prose p,
.focus-card h3,
.focus-card p,
.self-check__desc,
.self-check__q span,
.concern-card p,
.process-timeline__body h3,
.process-timeline__body p,
.feature-list h3,
.feature-list p,
.tool-card__name,
.tool-card__lead,
.stage-mini-card__name,
.stage-mini-card__tagline,
.tool-result-card__note,
.tool-result-cta h2,
.tool-result-cta p,
.retire-gap__note,
.retire-scenario h3,
.retire-scenario p,
.bench-position__label h2,
.bench-concern__text,
.bench-next__tool h3,
.bench-next__tool p,
.bench-next__consult h3,
.bench-next__consult p,
.savings-card h3,
.savings-card p,
.savings-grid__note,
.my-diag-card__summary,
.tool-related__subtitle,
.detail-aside__box h3,
.detail-aside__box p,
.detail-section__title {
word-break: keep-all;
overflow-wrap: break-word;
}
/* 긴 영문 이메일·숫자 덩어리는 예외 */
.my-diag-card__json pre { word-break: break-all; overflow-wrap: anywhere; }
/* ---------- 유틸리티: 인라인 style 대체 modifier ---------- */
.section__head--past { margin-top: 64px; }
.section__desc--tight { margin-bottom: 16px; }
.tool-result-cta--mt { margin-top: 40px; }
.contact-trust--mt { margin-top: 32px; }
.form-errors--center { text-align: center; }
@media (max-width: 640px) {
.section__head--past { margin-top: 40px; }
.tool-result-cta--mt { margin-top: 28px; }
.contact-trust--mt { margin-top: 24px; }
}
/* ---------- 모바일 (< 640px) 공통 ---------- */
@media (max-width: 640px) {
/* =============== Services · list =============== */
/* service-grid · optional 카드 패딩 축소 + tag 여유 */
.services .service-card { padding: 22px 20px; gap: 8px; }
.services .service-card__title { font-size: clamp(1.05rem, 4.4vw, 1.2rem); line-height: 1.4; }
.services .service-card__desc { font-size: 0.92rem; line-height: 1.65; }
.services .service-card__list { font-size: 0.86rem; }
.services .service-card__list li { padding-left: 16px; }
.services .service-card__list li::before { left: 3px; top: 8px; }
/* =============== Services · detail =============== */
/* page-hero 서비스 상세 — 버튼 2개 세로 쌓임 */
.service-detail .page-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.service-detail .page-hero__actions .btn { width: 100%; }
/* concern-grid — 모바일 1열 & 카드 패딩 축소 */
.service-detail .concern-grid { grid-template-columns: 1fr; gap: 10px; }
.service-detail .concern-card { padding: 18px 16px; gap: 12px; }
.service-detail .concern-card__badge { width: 28px; height: 28px; font-size: 0.9rem; }
.service-detail .concern-card p { font-size: 0.93rem; line-height: 1.6; }
/* process-timeline — 번호+설명 간격 재정렬, 번호 가독성 보강 */
.service-detail .process-timeline::before { left: 13px; top: 10px; bottom: 10px; }
.service-detail .process-timeline__item { padding: 2px 0 20px 44px; }
.service-detail .process-timeline__num {
width: 30px; height: 30px;
font-size: 0.78rem;
box-shadow: 0 0 0 4px #fff;
top: 0;
}
.service-detail .process-timeline__body h3 { font-size: 1rem; margin: 2px 0 4px; }
.service-detail .process-timeline__body p { font-size: 0.9rem; line-height: 1.65; }
/* feature-list — 패딩 축소 */
.service-detail .feature-list li { padding: 16px 18px; }
.service-detail .feature-list h3 { font-size: 0.98rem; }
.service-detail .feature-list p { font-size: 0.9rem; line-height: 1.7; }
/* detail-section__title — 앞뒤 여백 축소, clamp */
.service-detail .detail-section__title,
.journey-detail .detail-section__title,
.tool-tax-result .detail-section__title,
.tool-retirement-result .detail-section__title,
.tool-benchmark-result .detail-section__title,
.tool-my .detail-section__title {
margin: 28px 0 12px;
font-size: clamp(1.1rem, 4.6vw, 1.3rem);
line-height: 1.4;
}
/* detail-aside (상담 박스) — 모바일 패딩 축소 */
.service-detail .detail-aside__box,
.journey-detail .detail-aside__box { padding: 22px 20px; }
.service-detail .detail-aside__related,
.journey-detail .detail-aside__related { padding: 18px 16px; }
/* detail-notice 인덴트 축소 */
.service-detail .detail-notice { padding: 14px 16px; font-size: 0.86rem; }
/* =============== Journey · overview =============== */
/* journey-arc 가로 스크롤 — 기존 max-width: 768 규칙이 이미 있으나
모바일에서 dot padding·track 위치 미세 조정 */
.journey-overview .journey-arc { padding: 20px 0 6px; }
.journey-overview .journey-arc__list { grid-template-columns: repeat(7, 128px); }
.journey-overview .journey-arc__track { top: 48px; width: calc(7 * 128px - 128px); }
.journey-overview .journey-node__link { padding: 4px 6px 12px; max-width: 128px; }
.journey-overview .journey-node__dot { width: 48px; height: 48px; box-shadow: 0 0 0 4px var(--bg-soft), var(--shadow-sm); }
.journey-overview .journey-node__dot em { font-size: 0.95rem; }
.journey-overview .journey-node__name { font-size: 0.88rem; }
.journey-overview .journey-node__tagline { font-size: 0.74rem; line-height: 1.4; }
.journey-overview .journey-arc::after {
content: '';
position: absolute; right: 0; top: 20px; bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--bg-soft));
pointer-events: none;
}
/* stage-card 패딩 축소 */
.journey-overview .stage-card { padding: 20px 18px; gap: 8px; }
.journey-overview .stage-card__name { font-size: 1.08rem; }
.journey-overview .stage-card__headline { font-size: 0.9rem; line-height: 1.6; }
.journey-overview .stage-card__focus { gap: 5px; }
.journey-overview .stage-card__focus li { font-size: 0.72rem; padding: 3px 8px; }
/* =============== Journey · detail =============== */
/* stage-hero — 패딩 축소 + 미니 arc 가로 스크롤 + 도트 44 */
.journey-detail .stage-hero { padding: 52px 0 28px; }
.journey-detail .stage-hero h1 { font-size: clamp(1.35rem, 5.6vw, 1.9rem); margin: 8px 0 8px; }
.journey-detail .stage-hero__tagline { font-size: 0.95rem; line-height: 1.65; }
.journey-detail .stage-hero__mini-arc {
margin-top: 20px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 4px 2px 8px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.journey-detail .stage-hero__mini-arc::-webkit-scrollbar { display: none; }
.journey-detail .stage-hero__mini-arc { scrollbar-width: none; }
.journey-detail .stage-hero__dot {
flex: none;
width: 40px; height: 40px;
font-size: 0.82rem;
scroll-snap-align: start;
}
/* empathy-block — 패딩 축소 */
.journey-detail .empathy-block { padding: 18px 16px; margin-bottom: 24px; }
.journey-detail .empathy-block .prose p { font-size: 0.96rem; line-height: 1.75; }
/* focus-grid 이미 1열 처리되어 있음 (1024px) — 모바일 카드 패딩 축소 */
.journey-detail .focus-card { padding: 18px 16px; }
.journey-detail .focus-card h3 { font-size: 0.98rem; }
.journey-detail .focus-card p { font-size: 0.9rem; line-height: 1.65; }
/* self-check — 패딩·결과바 세로 정렬·힌트 재배치 */
.journey-detail .self-check { padding: 20px 16px; }
.journey-detail .self-check__desc { font-size: 0.9rem; margin-bottom: 14px; }
.journey-detail .self-check__q { padding: 12px 14px; font-size: 0.92rem; }
.journey-detail .self-check__q input[type="checkbox"] { width: 22px; height: 22px; }
.journey-detail .self-check__result {
flex-direction: column; align-items: flex-start;
padding: 14px 18px;
}
.journey-detail .self-check__result strong { font-size: 1.7rem; }
.journey-detail .self-check__hint {
margin-left: 0; margin-top: 8px;
flex-basis: 100%;
font-size: 0.88rem; line-height: 1.5;
}
.journey-detail .self-check .btn { width: 100%; }
/* service-grid--sm (이 단계 서비스 카드) — 이미 1열 */
.journey-detail .service-grid--sm .service-card { padding: 20px 18px; }
/* stage-aside__nav — 이미 1fr */
.journey-detail .stage-aside__nav-item { padding: 14px 16px; min-height: 60px; }
.journey-detail .stage-aside__nav-item--next { text-align: left; }
/* =============== Tools · hub =============== */
.tools-hub .tool-card { padding: 24px 20px; gap: 10px; }
.tools-hub .tool-card__name { font-size: 1.05rem; }
.tools-hub .tool-card__lead { font-size: 0.9rem; line-height: 1.65; }
.tools-hub .tool-card__badge { top: 18px; right: 18px; }
/* 단계 미니 카드 — 글로벌 stage-card-grid 규칙은 이미 있으나,
모바일은 tools/hub 에서 1열 세로로 깔끔하게 */
.tools-hub .stage-card-grid { grid-template-columns: 1fr; gap: 10px; }
.tools-hub .stage-mini-card { padding: 16px 18px; gap: 4px; }
.tools-hub .stage-mini-card__name { font-size: 1rem; }
.tools-hub .stage-mini-card__tagline { font-size: 0.82rem; }
/* disclaimer 여백 */
.tools-hub .disclaimer { padding: 14px 16px; font-size: 0.82rem; }
/* =============== Tools · forms (tax / retire / benchmark) =============== */
.tool-tax-form .tool-form,
.tool-retirement-form .tool-form,
.tool-benchmark-form .tool-form { padding: 20px 18px; gap: 16px; }
.tool-tax-form .tool-form__row,
.tool-retirement-form .tool-form__row,
.tool-benchmark-form .tool-form__row { gap: 14px; }
.tool-tax-form .field__hint,
.tool-retirement-form .field__hint,
.tool-benchmark-form .field__hint {
display: block;
margin: 4px 0 0;
font-size: 0.78rem;
line-height: 1.4;
}
.tool-tax-form .tool-form .btn,
.tool-retirement-form .tool-form .btn,
.tool-benchmark-form .tool-form .btn { min-height: 48px; }
.tool-tax-form .tool-form .disclaimer,
.tool-retirement-form .tool-form .disclaimer,
.tool-benchmark-form .tool-form .disclaimer { padding: 12px 14px; font-size: 0.78rem; line-height: 1.65; }
/* tool-aside 하단 배치, 패딩 축소 */
.tool-tax-form .tool-aside,
.tool-retirement-form .tool-aside,
.tool-benchmark-form .tool-aside { margin-top: 24px; gap: 12px; }
.tool-tax-form .tool-aside__box,
.tool-retirement-form .tool-aside__box,
.tool-benchmark-form .tool-aside__box { padding: 18px 16px; }
.tool-tax-form .tool-aside__box h3,
.tool-retirement-form .tool-aside__box h3,
.tool-benchmark-form .tool-aside__box h3 { font-size: 0.96rem; margin-bottom: 10px; }
.tool-tax-form .tool-aside__box li,
.tool-retirement-form .tool-aside__box li,
.tool-benchmark-form .tool-aside__box li { font-size: 0.88rem; line-height: 1.6; margin: 6px 0; }
/* =============== Tools · result pages (공통) =============== */
/* tool-result-card — 모바일 1열 이미 있음 / 내부 값 축소 */
.tool-tax-result .tool-result-grid,
.tool-retirement-result .tool-result-grid,
.tool-benchmark-result .tool-result-grid {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 28px;
}
.tool-tax-result .tool-result-card,
.tool-retirement-result .tool-result-card,
.tool-benchmark-result .tool-result-card { padding: 22px 20px; gap: 10px; }
.tool-tax-result .tool-result-card__num,
.tool-retirement-result .tool-result-card__num,
.tool-benchmark-result .tool-result-card__num {
font-size: clamp(1.6rem, 6.5vw, 2rem);
}
.tool-tax-result .tool-result-card__note,
.tool-retirement-result .tool-result-card__note,
.tool-benchmark-result .tool-result-card__note {
font-size: 0.88rem; line-height: 1.65;
}
/* 핵심: primary 카드(가장 중요한 예상세액)를 모바일에서 최상단 고정 */
.tool-tax-result .tool-result-card--primary { order: -1; }
/* Tool result CTA — 모바일에서 actions를 세로로 되돌리고, primary btn 풀폭 */
.tool-tax-result .tool-result-cta,
.tool-retirement-result .tool-result-cta,
.tool-my .tool-result-cta {
padding: 24px 20px; gap: 18px;
text-align: left;
}
.tool-tax-result .tool-result-cta h2,
.tool-retirement-result .tool-result-cta h2,
.tool-my .tool-result-cta h2 { font-size: clamp(1.15rem, 4.8vw, 1.4rem); line-height: 1.45; }
.tool-tax-result .tool-result-cta p,
.tool-retirement-result .tool-result-cta p,
.tool-my .tool-result-cta p { font-size: 0.9rem; line-height: 1.7; }
.tool-tax-result .tool-result-cta__actions,
.tool-retirement-result .tool-result-cta__actions,
.tool-my .tool-result-cta__actions {
flex-direction: column; /* Phase 21A 의 row override 취소 */
gap: 10px;
width: 100%;
}
.tool-tax-result .tool-result-cta__actions .btn,
.tool-retirement-result .tool-result-cta__actions .btn,
.tool-my .tool-result-cta__actions .btn {
width: 100%; flex: none;
min-height: 48px;
}
/* savings-grid (tax 결과) — 1열, 내부 패딩 축소 */
.tool-tax-result .savings-grid {
grid-template-columns: 1fr;
gap: 10px; margin-bottom: 14px;
}
.tool-tax-result .savings-card { padding: 18px 16px; border-left-width: 3px; }
.tool-tax-result .savings-card__delta { font-size: 1.15rem; }
.tool-tax-result .savings-card h3 { font-size: 0.96rem; }
.tool-tax-result .savings-card p { font-size: 0.88rem; line-height: 1.65; }
.tool-tax-result .savings-grid__note { font-size: 0.8rem; margin-bottom: 22px; }
/* =============== Tools · retirement_result =============== */
.tool-retirement-result .retire-gap { padding: 20px 16px; gap: 16px; }
.tool-retirement-result .retire-gap__row { grid-template-columns: 1fr; gap: 10px; }
.tool-retirement-result .retire-gap__label strong { font-size: 1.25rem; }
.tool-retirement-result .retire-gap__label small { font-size: 0.78rem; line-height: 1.5; }
.tool-retirement-result .retire-gap__bar { height: 18px; }
.tool-retirement-result .retire-gap__summary {
grid-template-columns: 1fr;
padding: 18px 16px;
text-align: left;
gap: 14px;
}
.tool-retirement-result .retire-gap__number { font-size: 1.4rem; }
.tool-retirement-result .retire-gap__number em { font-size: 0.55em; }
.tool-retirement-result .retire-gap__note { font-size: 0.88rem; }
.tool-retirement-result .retire-gap__coverage {
justify-self: stretch;
padding: 12px 18px;
}
.tool-retirement-result .retire-gap__coverage strong { font-size: 1.35rem; }
.tool-retirement-result .retire-scenarios { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
.tool-retirement-result .retire-scenario { padding: 20px 18px; }
.tool-retirement-result .retire-scenario h3 { font-size: 1.02rem; line-height: 1.5; }
.tool-retirement-result .retire-scenario p { font-size: 0.9rem; line-height: 1.7; }
.tool-retirement-result .retire-scenario__note { font-size: 0.78rem; }
/* primary 시나리오 버튼 풀폭 */
.tool-retirement-result .retire-scenario--primary .btn { width: 100%; min-height: 48px; }
/* =============== Tools · benchmark_result =============== */
/* tier 위치 패널 — 모바일 1열, 여백 줄임 */
.tool-benchmark-result .bench-position {
grid-template-columns: 1fr;
padding: 22px 20px;
gap: 18px;
}
.tool-benchmark-result .bench-position__label h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
.tool-benchmark-result .bench-position__share { font-size: 0.88rem; }
/* bench-tiers — 4단 배지가 1열씩 좁아지면 읽기 어려움 → 2x2 */
.tool-benchmark-result .bench-tiers { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tool-benchmark-result .bench-tier { padding: 12px 10px; min-height: 72px; }
.tool-benchmark-result .bench-tier__no { font-size: 1rem; }
.tool-benchmark-result .bench-tier__label { font-size: 0.78rem; line-height: 1.35; }
.tool-benchmark-result .bench-tier__mark { font-size: 0.7rem; margin-top: 4px; }
/* bench-checks — 이미 1열(1024px). 모바일 패딩 축소 */
.tool-benchmark-result .bench-checks { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
.tool-benchmark-result .bench-check { padding: 18px 16px; }
.tool-benchmark-result .bench-check__num { font-size: 1.2rem; }
.tool-benchmark-result .bench-check__note { font-size: 0.86rem; line-height: 1.65; }
/* bench-concerns — 번호 + 설명 들쭉날쭉 방지, 패딩 축소 */
.tool-benchmark-result .bench-concerns { margin-bottom: 28px; }
.tool-benchmark-result .bench-concern { padding: 14px 16px; gap: 12px; }
.tool-benchmark-result .bench-concern__no { width: 28px; font-size: 0.85rem; }
.tool-benchmark-result .bench-concern__text { font-size: 0.92rem; line-height: 1.6; }
/* bench-next — 이미 1열, 카드 내부 패딩 축소 + 버튼 풀폭 */
.tool-benchmark-result .bench-next { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
.tool-benchmark-result .bench-next__tool,
.tool-benchmark-result .bench-next__consult { padding: 22px 20px; }
.tool-benchmark-result .bench-next__tool h3,
.tool-benchmark-result .bench-next__consult h3 { font-size: 1.05rem; line-height: 1.45; }
.tool-benchmark-result .bench-next__tool p,
.tool-benchmark-result .bench-next__consult p { font-size: 0.9rem; line-height: 1.65; }
.tool-benchmark-result .bench-next__consult .btn { width: 100%; min-height: 48px; }
/* =============== Tools · save_by_email =============== */
.tool-save .page-hero { padding: 48px 0 24px; }
.tool-save .page-hero h1 { font-size: clamp(1.4rem, 5.4vw, 1.8rem); line-height: 1.35; }
.tool-save .contact-form { gap: 14px; display: grid; }
.tool-save .checkbox--agree { padding: 14px 16px; gap: 10px; }
.tool-save .checkbox--agree small { font-size: 0.78rem; line-height: 1.6; }
.tool-save .booking-fallback { padding: 24px 18px; margin: 0 auto; }
/* =============== Tools · my_diagnostics =============== */
.tool-my .my-diag-list { gap: 10px; margin-bottom: 24px; }
.tool-my .my-diag-card { padding: 18px 16px; }
.tool-my .my-diag-card__head {
flex-wrap: wrap; gap: 8px;
margin-bottom: 8px;
}
.tool-my .my-diag-card__head time { font-size: 0.84rem; }
.tool-my .my-diag-card__summary { font-size: 0.94rem; line-height: 1.6; margin-bottom: 10px; }
.tool-my .my-diag-card__json { padding: 12px 14px; font-size: 0.78rem; }
.tool-my .my-diag-card__json h4 { font-size: 0.72rem; }
.tool-my .my-diag-card__json pre { font-size: 0.78rem; line-height: 1.55; }
/* =============== Tools · partials/related_content =============== */
.tool-related__subtitle {
font-size: 1rem; margin-top: 28px; margin-bottom: 12px;
line-height: 1.45;
}
.tool-related__subtitle--mt { margin-top: 32px; }
.tool-related__foot { margin-top: 20px; }
.tool-related__foot .btn { width: 100%; }
/* =============== Seminars · list =============== */
.seminars-list .seminar-grid { grid-template-columns: 1fr; gap: 14px; }
.seminars-list .seminar-card { padding: 22px 20px 20px; }
.seminars-list .seminar-card__title { font-size: clamp(1rem, 4.4vw, 1.15rem); line-height: 1.4; }
.seminars-list .seminar-card__subtitle { font-size: 0.88rem; line-height: 1.5; }
.seminars-list .seminar-card__summary { font-size: 0.9rem; line-height: 1.65; }
.seminars-list .seminar-card__badge { gap: 6px; flex-wrap: wrap; }
.seminars-list .seminar-card__meta { gap: 6px; }
.seminars-list .seminar-card__meta > div {
grid-template-columns: 52px 1fr;
gap: 8px;
font-size: 0.86rem;
}
.seminars-list .seminar-card__meta dt { font-size: 0.78rem; }
.seminars-list .seminar-card__meta dd { font-size: 0.88rem; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.seminars-list .seminar-card__meta-inline { font-size: 0.84rem; line-height: 1.55; }
.seminars-list .seminar-grid--past { gap: 10px; }
.seminars-list .seminar-card--past { padding: 16px 18px; }
/* 두 번째 section__head (지난 세미나) 상단 여백 압축 */
.seminars-list .section__head--split + .seminar-grid { margin-top: 8px; }
/* =============== Seminars · detail =============== */
.seminar-detail .seminar-hero { padding: 48px 0 32px; }
.seminar-detail .seminar-hero h1 { font-size: clamp(1.4rem, 5.6vw, 2rem); line-height: 1.35; }
.seminar-detail .seminar-hero__subtitle { font-size: 0.98rem; line-height: 1.55; }
.seminar-detail .seminar-hero__summary { font-size: 0.95rem; line-height: 1.7; }
.seminar-detail .seminar-hero__meta > div {
grid-template-columns: 58px 1fr;
gap: 8px;
font-size: 0.9rem;
align-items: baseline;
}
.seminar-detail .seminar-hero__meta dt { font-size: 0.78rem; }
.seminar-detail .seminar-hero__meta dd { font-size: 0.92rem; line-height: 1.6; }
.seminar-detail .seminar-hero__meta dd small { font-size: 0.8rem; }
.seminar-detail .seminar-perks {
padding: 14px 16px;
gap: 4px;
margin-top: 14px;
}
.seminar-detail .seminar-perks li { font-size: 0.88rem; line-height: 1.55; padding: 3px 0; }
.seminar-detail .seminar-hero__actions { width: 100%; margin-top: 18px; }
.seminar-detail .seminar-hero__actions .btn { flex: 1 1 100%; width: 100%; min-height: 48px; }
/* Tracks */
.seminar-detail .seminar-tracks { gap: 14px; }
.seminar-detail .seminar-track { padding: 20px 18px 22px; }
.seminar-detail .seminar-track__head { gap: 6px; }
.seminar-detail .seminar-track__idx { font-size: 0.72rem; }
.seminar-detail .seminar-track__head h3 { font-size: 1.05rem; line-height: 1.4; }
.seminar-detail .seminar-track__head p { font-size: 0.9rem; line-height: 1.65; }
/* Sessions — time 라벨이 위에, body 가 아래 */
.seminar-detail .seminar-session {
grid-template-columns: 1fr;
gap: 4px; padding: 14px 0;
}
.seminar-detail .seminar-session__time {
font-size: 0.82rem;
color: var(--blue-600);
font-weight: 700;
}
.seminar-detail .seminar-session__body h4 { font-size: 0.98rem; line-height: 1.45; }
.seminar-detail .seminar-session__speaker { font-size: 0.82rem; }
.seminar-detail .seminar-session__bullets li { font-size: 0.86rem; line-height: 1.65; }
/* Registration form (already uses form-row--two/ checkbox-grid handled globally) */
.seminar-detail #register .section__head { margin-bottom: 20px; }
.seminar-detail .contact-form { gap: 14px; }
.seminar-detail .form-errors { padding: 12px 14px; font-size: 0.9rem; }
/* =============== Seminars · thanks =============== */
.seminar-thanks .page-hero { padding: 56px 0 40px; }
.seminar-thanks .page-hero h1 { font-size: clamp(1.3rem, 5.2vw, 1.8rem); line-height: 1.4; }
.seminar-thanks .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.seminar-thanks .page-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.seminar-thanks .page-hero__actions .btn { width: 100%; }
.seminar-thanks .contact-trust { padding: 14px 16px; gap: 12px; }
/* Empty state (세미나 등 빈 상태) */
.seminars-list .empty-state { padding: 28px 20px; }
}
/* ---------- 태블릿 (641~1023px) 중간 보정 ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
/* Journey arc — 중간 브레이크에서도 가로 스크롤 + 더 여유로운 너비 */
.journey-overview .journey-arc__list { grid-template-columns: repeat(7, 150px); }
.journey-overview .journey-arc__track { width: calc(7 * 150px - 150px); }
/* Tools hub — 2열 */
.tools-hub .stage-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tool result 카드 — 2열 (primary는 두 칸) */
.tool-tax-result .tool-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-tax-result .tool-result-card--primary { grid-column: 1 / -1; }
/* Retirement scenarios — 2열 (primary는 두 칸) */
.tool-retirement-result .retire-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-retirement-result .retire-scenario--primary { grid-column: 1 / -1; }
/* Benchmark tier 박스 한 줄 유지 */
.tool-benchmark-result .bench-tiers { grid-template-columns: repeat(4, 1fr); }
/* Seminars list — 2열 */
.seminars-list .seminar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- 모든 해상도: 모바일 하단바 안전영역 보정 (tools 결과 CTA 고정폭) ---------- */
.tool-tax-result .tool-result-cta,
.tool-retirement-result .tool-result-cta,
.tool-my .tool-result-cta {
scroll-margin-top: 72px;
}
/* ============================================================
Phase 21C · Cases/Insights/Accounts/Contact/Legal/Partners/Portal
cases/(list|detail), insights/(list|detail),
accounts/(signup|login|verify|verify_done|logout_done),
contact/(form|thanks), legal/(urgent|thanks),
partners/(list|detail|inquiry|inquiry_thanks), portal/*
각 페이지 고유 모바일 이슈만. Phase 21/21A/21B 글로벌 규칙 중복 지양.
============================================================ */
/* ---------- 한국어 줄바꿈 (이 그룹 주요 텍스트) ---------- */
.cases .page-hero h1,
.cases .page-hero__lead,
.case-card__title,
.case-card__summary,
.case-card__questions li,
.case-card__eyebrow,
.case-section__title,
.case-premium__gate-inner h2,
.case-premium__gate-lead,
.case-premium__gate-perks li,
.case-hook li,
.case-hook .eyebrow,
.detail-notice,
.insights .page-hero h1,
.insights .page-hero__lead,
.insight-card h3,
.insight-card p,
.article__head h1,
.article__notice,
.auth-card__head h1,
.auth-card__lead,
.auth-perks li strong,
.auth-perks li small,
.step-panel__title,
.step-panel__hint,
.verify-badge strong,
.verify-badge small,
.verify-trust li,
.verify-nudge strong,
.verify-nudge small,
.verify-next__title,
.verify-next__desc,
.verify-next__card h3,
.verify-next__desc-sm,
.contact-aside__box h3,
.contact-aside__box--alt li,
.contact-aside__urgent-lead,
.contact-trust strong,
.contact-trust small,
.attach-diagnostic__label strong,
.attach-diagnostic__label small,
.legal-hero h1,
.legal-hero__lead,
.legal-perks strong,
.legal-perks small,
.legal-alert > strong,
.legal-alert .checkbox span,
.partner-hero h1,
.partner-hero__role,
.partner-hero__summary,
.partner-card__name,
.partner-card__role,
.partner-card__summary,
.partner-card__features li,
.partner-stats__label,
.portal-hero h1,
.portal-hero__lead,
.portal-card > header h2,
.portal-list strong,
.portal-list span,
.portal-full-list strong,
.portal-full-list small,
.portal-empty,
.empty-state {
word-break: keep-all;
overflow-wrap: break-word;
}
/* 긴 영문 도메인·이메일·전화 예외 */
.partner-hero__actions .btn,
.contact-aside__line a,
.portal-list time,
.portal-full-list time { word-break: normal; }
a[href^="mailto:"], a[href^="tel:"] { word-break: break-all; }
/* ---------- 인라인 style 대체 utility ---------- */
.page-hero__actions--mt { margin-top: 20px; }
.page-hero__actions--center { justify-content: center; }
.auth-card--center { text-align: center; }
.verify-done-title { margin-top: 24px; }
.verify-done-actions { margin-top: 24px; }
.article__cta--mt { margin-top: 32px; }
.form-footnote--mt { margin-top: 20px; }
.empathy-block--mt { margin-top: 40px; }
.legal-thanks__trust { margin-top: 28px; max-width: none; }
.legal-thanks__actions { margin-top: 28px; }
@media (max-width: 640px) {
.page-hero__actions--mt { margin-top: 14px; }
.verify-done-title { margin-top: 18px; }
.verify-done-actions { margin-top: 18px; }
.article__cta--mt { margin-top: 22px; }
.form-footnote--mt { margin-top: 14px; }
.empathy-block--mt { margin-top: 28px; }
.legal-thanks__trust { margin-top: 20px; }
.legal-thanks__actions { margin-top: 20px; }
}
/* ---------- 모바일 (< 640px) ---------- */
@media (max-width: 640px) {
/* =============== Cases · list =============== */
.cases .page-hero { padding: 56px 0 36px; }
.cases .page-hero h1 { font-size: clamp(1.4rem, 5.4vw, 1.95rem); line-height: 1.35; }
.cases .page-hero h1 br { display: none; }
.cases .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.cases--list .page-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.cases--list .page-hero__actions .btn { width: 100%; min-height: 48px; }
/* verify-nudge (면허 인증 유도) — 세로 스택 + CTA 풀폭 */
.cases--list .verify-nudge {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
}
.cases--list .verify-nudge > div { flex: 1 1 100%; }
.cases--list .verify-nudge .btn { width: 100%; justify-content: center; }
/* Category bar 가로 스크롤로 chip 잘림 방지 */
.cases .category-bar {
flex-wrap: wrap;
}
/* Case card 내부 패딩 축소 + 질문 폰트 */
.cases .case-card { padding: 20px 18px; gap: 12px; }
.cases .case-card__title { font-size: 1rem; line-height: 1.45; }
.cases .case-card__summary { font-size: 0.88rem; line-height: 1.6; }
.cases .case-card__questions li { font-size: 0.84rem; padding-left: 16px; }
.cases .case-card__foot { font-size: 0.8rem; padding-top: 10px; }
/* =============== Cases · detail =============== */
.cases--detail .page-hero--case { padding: 52px 0 32px; }
.cases--detail .page-hero--case h1 { font-size: clamp(1.35rem, 5.2vw, 1.85rem); line-height: 1.4; }
.cases--detail .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.cases--detail .stage-hero__breadcrumb { font-size: 0.82rem; flex-wrap: wrap; gap: 4px; }
.cases--detail .case-meta { gap: 5px; margin-top: 10px; }
.cases--detail .case-meta .tag { font-size: 0.72rem; padding: 3px 10px; }
.cases--detail .case-section__title {
font-size: clamp(1.1rem, 4.4vw, 1.3rem);
margin: 28px 0 12px;
}
.cases--detail .case-hook { padding: 16px 16px 16px 18px; margin: 20px 0; }
.cases--detail .case-hook ul { gap: 6px; }
.cases--detail .case-hook li { font-size: 0.9rem; line-height: 1.65; }
/* Premium gate — 모바일 핵심: absolute 대신 정상 흐름으로 가라앉혀 패딩 덜먹게 */
.cases--detail .case-premium--locked { min-height: 0; }
.cases--detail .case-premium__blurred {
max-height: 200px;
padding: 14px 16px;
overflow: hidden;
}
.cases--detail .case-premium__gate {
position: relative;
inset: auto;
background: transparent;
backdrop-filter: none;
margin-top: -40px; /* blurred 뒤로 살짝 겹침 */
padding: 0 4px;
}
.cases--detail .case-premium__gate-inner {
max-width: 100%;
padding: 22px 18px !important;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(11, 30, 63, 0.12);
margin: 0;
}
.cases--detail .case-premium__gate-inner h2 {
font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
line-height: 1.5 !important;
margin: 8px 0 12px;
}
.cases--detail .case-premium__gate-inner h2 br { display: none; }
.cases--detail .case-premium__gate-inner .eyebrow { font-size: 0.72rem; }
.cases--detail .case-premium__gate-lead { font-size: 0.88rem; line-height: 1.7; margin-bottom: 16px; }
.cases--detail .case-premium__gate-actions {
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.cases--detail .case-premium__gate-actions .btn,
.cases--detail .case-premium__gate-actions form,
.cases--detail .case-premium__gate-actions form button {
width: 100%;
min-height: 48px;
}
.cases--detail .case-premium__gate-perks {
padding-top: 12px;
gap: 5px;
font-size: 0.84rem;
line-height: 1.6;
}
.cases--detail .detail-notice { padding: 14px 16px; font-size: 0.84rem; margin: 28px 0; }
.cases--detail .detail-section__title { font-size: 1.1rem; margin-top: 32px; }
.cases--detail .case-grid--related { margin-top: 14px; }
.cases--detail .case-card--sm { padding: 16px 16px; gap: 6px; }
/* =============== Insights · list =============== */
.insights .page-hero { padding: 56px 0 36px; }
.insights .page-hero h1 { font-size: clamp(1.4rem, 5.4vw, 1.95rem); line-height: 1.35; }
.insights .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.insights .insights-search { flex-wrap: wrap; gap: 8px; }
.insights .insights-search input[type="search"] {
flex: 1 1 100%;
min-height: 48px;
font-size: 16px;
}
.insights .insights-search .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; }
.insights .search-summary { font-size: 0.88rem; line-height: 1.6; }
.insights .category-bar--stages { margin-top: 8px; }
.insights .insight-card { padding: 22px 20px; gap: 10px; }
.insights .insight-card h3 { font-size: 1.02rem; line-height: 1.45; }
.insights .insight-card p { font-size: 0.88rem; line-height: 1.6; }
.insights .insight-card time { font-size: 0.78rem; }
.insights .insight-card__cover { aspect-ratio: 16 / 9; height: auto; }
.insights .empty-state { padding: 30px 20px; }
.insights .empty-state .btn { margin-top: 12px; }
/* =============== Insight · detail =============== */
.insight-detail .article__head { padding-top: 48px; padding-bottom: 20px; }
.insight-detail .article__head h1 {
font-size: clamp(1.4rem, 5.2vw, 1.95rem);
line-height: 1.4;
}
.insight-detail .article__meta { font-size: 0.82rem; }
.insight-detail .article__cover { margin: 16px 0 24px; }
.insight-detail .article__cta { flex-direction: column; gap: 10px; margin: 24px 0 40px; }
.insight-detail .article__cta .btn { width: 100%; justify-content: center; }
.insight-detail .article__notice { padding: 14px 16px; font-size: 0.86rem; line-height: 1.65; }
.insight-detail .section--gray .section__title { font-size: clamp(1.1rem, 4.4vw, 1.35rem); }
/* =============== Accounts (signup / login / verify / done) =============== */
.auth-section { padding: 40px 0 64px; min-height: auto; }
.auth .container--narrow { padding-inline: 16px; }
.auth-card { padding: 26px 20px; border-radius: 14px; }
.auth-card--compact { padding: 26px 20px; max-width: 100%; }
.auth-card--stepper { padding: 26px 20px !important; max-width: 100%; }
.auth-card__head { margin-bottom: 20px; }
.auth-card__head h1 {
font-size: clamp(1.25rem, 5vw, 1.6rem);
line-height: 1.4;
}
.auth-card__head h1 br { display: none; }
.auth-card__head .auth-card__lead { font-size: 0.9rem; line-height: 1.65; }
.auth-perks { padding: 14px 14px; gap: 10px; margin-bottom: 22px; }
.auth-perks li { gap: 10px; align-items: flex-start; }
.auth-perks__icon { width: 32px; height: 32px; font-size: 1.15rem; border-radius: 8px; }
.auth-perks li strong { font-size: 0.9rem; line-height: 1.4; }
.auth-perks li small { font-size: 0.78rem; line-height: 1.5; }
/* Signup 3-step stepper — 라벨 겹침 방지 + tap 영역 유지 */
.auth--signup .step-bar {
gap: 4px;
margin: 16px 0 22px;
padding: 4px;
background: var(--bg-soft);
border-radius: 10px;
}
.auth--signup .step-bar__item {
padding: 8px 4px;
font-size: 0.72rem;
gap: 5px;
min-height: 44px;
justify-content: center;
flex: 1 1 0;
}
.auth--signup .step-bar__num {
width: 20px; height: 20px; font-size: 0.72rem; flex: 0 0 auto;
}
.auth--signup .step-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth--signup .step-bar__label small { display: none; }
/* Step panel + actions */
.auth--signup .step-panel { padding: 0; }
.auth--signup .step-panel__title { font-size: 1.02rem; margin-bottom: 6px; }
.auth--signup .step-panel__hint { font-size: 0.86rem; line-height: 1.65; margin-bottom: 14px; }
.auth--signup .step-panel__actions { flex-direction: column-reverse; gap: 8px; margin-top: 16px; }
.auth--signup .step-panel__actions--single { flex-direction: column; }
.auth--signup .step-panel__actions .btn { width: 100%; min-height: 48px; }
/* form-row--two 는 global Phase 21 에서 1열 이미 처리 */
.auth-form { gap: 12px; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select {
font-size: 16px; /* iOS zoom 방지 */
height: 48px;
padding: 12px 14px;
}
.auth-form .field__label { font-size: 0.85rem; }
.auth-form .field__hint { font-size: 0.78rem; }
/* checkbox--agree — 텍스트 wrap + tap 영역 확보 */
.auth-form .checkbox,
.auth-form .checkbox--agree {
padding: 12px 14px;
min-height: 48px;
align-items: flex-start;
}
.auth-form .checkbox--agree small { font-size: 0.78rem; line-height: 1.6; }
/* 비밀번호 토글 버튼 */
.auth-form .field__pw-wrap { position: relative; }
.auth-form .field__pw-toggle {
padding: 6px 10px; font-size: 0.78rem; min-height: 36px;
}
/* =============== Accounts · login =============== */
.auth--login .auth-form__foot { font-size: 0.88rem; margin-top: 6px; }
/* =============== Accounts · verify =============== */
.auth--verify .verify-trust {
padding: 14px 16px;
gap: 6px;
font-size: 0.85rem;
line-height: 1.6;
}
.auth--verify .verify-badge {
padding: 14px 16px;
gap: 12px;
align-items: flex-start;
}
.auth--verify .verify-badge > span {
width: 36px; height: 36px;
font-size: 1.2rem;
flex: 0 0 auto;
}
.auth--verify .verify-badge strong { font-size: 0.95rem; }
.auth--verify .verify-badge small {
font-size: 0.82rem; line-height: 1.55;
word-break: break-all; /* 면허번호 + 날짜 묶음 대응 */
}
/* 인증 폼 면허번호 input — tap 영역 + 숫자 키패드 친화 font */
.auth--verify .auth-form input[type="text"] {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* verify_done 페이지 */
.auth--verify-done .verify-badge--lg {
padding: 16px 18px;
gap: 14px;
align-items: center;
}
.auth--verify-done .verify-badge--lg > span {
width: 44px; height: 44px;
font-size: 1.4rem;
}
.auth--verify-done .verify-badge--lg strong { font-size: 1rem; }
.auth--verify-done .verify-badge--lg small { font-size: 0.85rem; }
.auth--verify-done h1 {
font-size: clamp(1.2rem, 4.8vw, 1.55rem);
line-height: 1.4;
}
/* verify-next 카드 — 1열 (global 에서 처리됨), 패딩 축소 */
.verify-next { padding: 32px 0; }
.verify-next__title { font-size: clamp(1.1rem, 4.4vw, 1.35rem); }
.verify-next__desc { font-size: 0.92rem; margin-bottom: 14px; }
.verify-next__card { padding: 20px 18px; gap: 6px; }
.verify-next__num { font-size: 0.72rem; }
.verify-next__kind { font-size: 0.8rem; }
.verify-next__card h3 { font-size: 1.02rem; line-height: 1.45; }
.verify-next__card h3 br { display: none; }
.verify-next__desc-sm { font-size: 0.86rem; line-height: 1.6; }
.verify-next__cta { font-size: 0.88rem; margin-top: 6px; }
/* auth-footnote */
.auth-footnote { font-size: 0.74rem; line-height: 1.6; margin-top: 16px; }
/* =============== Contact · form =============== */
.contact .page-hero { padding: 52px 0 32px; }
.contact .page-hero h1 {
font-size: clamp(1.35rem, 5.2vw, 1.9rem);
line-height: 1.4;
}
.contact .page-hero h1 br { display: none; }
.contact .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.contact .page-hero__lead br { display: none; }
.contact .contact-trust {
padding: 14px 16px;
gap: 12px;
margin-top: 16px;
}
.contact .contact-trust__badge {
width: 36px; height: 36px; font-size: 1.2rem; border-radius: 10px;
}
.contact .contact-trust strong { font-size: 0.92rem; }
.contact .contact-trust small { font-size: 0.8rem; line-height: 1.55; }
.contact-grid { gap: 20px !important; }
.contact-form { gap: 14px; }
.contact-form .form-errors { padding: 12px 14px; font-size: 0.88rem; }
.attach-diagnostic { padding: 12px 14px; }
.attach-diagnostic__label { gap: 8px; }
.attach-diagnostic__label strong { font-size: 0.9rem; }
.attach-diagnostic__label small { font-size: 0.8rem; line-height: 1.6; }
.form-footnote { font-size: 0.78rem; line-height: 1.65; }
/* Contact aside — 순서 (긴급 법률을 두 번째로 끌어올림 → 문의 의도 매칭) */
.contact-aside {
display: flex !important;
flex-direction: column;
gap: 14px !important;
position: static !important;
}
.contact-aside__box {
padding: 20px 18px;
}
.contact-aside__box h3 { font-size: 1rem; margin-bottom: 10px; }
.contact-aside__line {
font-size: 0.92rem;
padding: 8px 0;
flex-wrap: wrap;
gap: 4px 10px;
}
.contact-aside__line a { word-break: break-all; }
.contact-aside__box--alt li { font-size: 0.88rem; line-height: 1.6; margin: 6px 0; }
.contact-aside__box--urgent { order: -1; } /* 긴급 법률을 최상단 */
.contact-aside__urgent-lead { font-size: 0.9rem; line-height: 1.65; }
.contact-aside__box .btn--block { min-height: 44px; }
/* =============== Contact · thanks =============== */
.contact-thanks .page-hero { padding: 56px 0 40px; }
.contact-thanks .page-hero h1 { font-size: clamp(1.3rem, 5.2vw, 1.8rem); line-height: 1.4; }
.contact-thanks .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.contact-thanks .page-hero__lead br { display: none; }
.contact-thanks .page-hero__actions { flex-direction: column; gap: 10px; }
.contact-thanks .page-hero__actions .btn { width: 100%; }
/* =============== Legal · urgent =============== */
.legal-urgent .legal-hero { padding: 56px 0 36px; }
.legal-urgent .legal-hero h1 {
font-size: clamp(1.4rem, 5.6vw, 2rem);
line-height: 1.35;
}
.legal-urgent .legal-hero h1 br { display: none; }
.legal-urgent .legal-hero__lead { font-size: 0.94rem; line-height: 1.75; }
.legal-urgent .legal-hero__lead br { display: none; }
/* Perks 3열 → 1열 (global 보강 — 640px 경계 아래 명시) */
.legal-urgent .legal-perks {
grid-template-columns: 1fr;
gap: 10px;
max-width: 100%;
}
.legal-urgent .legal-perks > div {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 14px 16px;
text-align: left;
}
.legal-urgent .legal-perks > div span { font-size: 1.3rem; flex: 0 0 auto; }
.legal-urgent .legal-perks strong { font-size: 0.9rem; display: block; }
.legal-urgent .legal-perks small { font-size: 0.78rem; }
/* 관계기관 통지 alert 박스 */
.legal-urgent .legal-alert {
padding: 14px 16px;
border-radius: 12px;
}
.legal-urgent .legal-alert > strong {
font-size: 0.9rem;
line-height: 1.5;
}
.legal-urgent .legal-alert .checkbox {
padding: 12px 14px;
min-height: 48px;
align-items: flex-start;
}
.legal-urgent .legal-alert .checkbox span {
font-size: 0.88rem;
line-height: 1.6;
}
/* Focus grid (Why 송명) — global 이 1fr 처리, 카드 패딩만 */
.legal-urgent .focus-card { padding: 20px 18px; }
.legal-urgent .focus-card h3 { font-size: 1rem; }
.legal-urgent .focus-card p { font-size: 0.88rem; line-height: 1.65; }
.legal-urgent .form-footnote { font-size: 0.78rem; line-height: 1.7; }
/* =============== Legal · thanks =============== */
.legal-thanks .page-hero { padding: 56px 0 40px; }
.legal-thanks .page-hero h1 { font-size: clamp(1.3rem, 5.2vw, 1.8rem); line-height: 1.4; }
.legal-thanks .page-hero__lead { font-size: 0.92rem; line-height: 1.7; }
.legal-thanks .page-hero__lead br { display: none; }
.legal-thanks .contact-trust { padding: 14px 16px; gap: 12px; }
.legal-thanks .page-hero__actions { flex-direction: column; gap: 10px; }
.legal-thanks .page-hero__actions .btn { width: 100%; min-height: 48px; }
/* =============== Partners · list =============== */
.partners-list .page-hero { padding: 56px 0 36px; }
.partners-list .page-hero h1 {
font-size: clamp(1.4rem, 5.4vw, 1.95rem);
line-height: 1.35;
}
.partners-list .page-hero h1 br { display: none; }
.partners-list .page-hero__lead { font-size: 0.94rem; line-height: 1.7; }
.partners-list .page-hero__lead br { display: none; }
.partners-list .section { padding-block: 36px; }
.partners-list .section__head { margin-bottom: 16px; }
.partners-list .section__title { font-size: clamp(1.1rem, 4.4vw, 1.4rem); }
/* Partner card — 로고·2열 내용 → 1열 (global 1열 보강) + head 가로 유지 */
.partners-list .partner-card { padding: 20px 18px; gap: 12px; }
.partners-list .partner-card__head { gap: 12px; }
.partners-list .partner-card__mark {
width: 48px; height: 48px;
font-size: 1.1rem;
border-radius: 12px;
flex: 0 0 auto;
}
.partners-list .partner-card__name { font-size: 1.02rem; line-height: 1.4; }
.partners-list .partner-card__role { font-size: 0.84rem; line-height: 1.55; }
.partners-list .partner-card__summary { font-size: 0.9rem; line-height: 1.65; }
/* stats dl — 2열 (2-3 아이템 기준 가로 유지) */
.partners-list .partner-card__stats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px;
}
.partners-list .partner-card__stats dt { font-size: 0.74rem; }
.partners-list .partner-card__stats dd { font-size: 0.92rem; }
.partners-list .partner-card__features {
font-size: 0.86rem; line-height: 1.6;
}
/* card footer — 버튼 풀폭 2열 세로 */
.partners-list .partner-card__foot {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.partners-list .partner-card__foot .btn {
width: 100%;
justify-content: center;
min-height: 44px;
}
/* =============== Partners · detail =============== */
.partner-detail .partner-hero { padding: 48px 0 28px; }
.partner-detail .partner-hero__inner { padding-inline: 0; }
.partner-detail .partner-hero h1 {
font-size: clamp(1.4rem, 5.4vw, 1.9rem);
line-height: 1.35;
}
.partner-detail .partner-hero__mark {
width: 56px !important; height: 56px !important;
font-size: 1.3rem;
border-radius: 14px;
}
.partner-detail .partner-hero__role { font-size: 0.94rem; margin-bottom: 8px; }
.partner-detail .partner-hero__summary {
font-size: 0.94rem;
line-height: 1.75;
margin-bottom: 16px;
}
/* hero actions 3~4개 버튼 — 세로 풀폭 */
.partner-detail .partner-hero__actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
}
.partner-detail .partner-hero__actions .btn {
flex: 1 1 100%;
width: 100%;
justify-content: center;
min-height: 48px;
font-size: 0.95rem;
}
/* stats 카드 — 2열 */
.partner-detail .partner-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.partner-detail .partner-stats__card { padding: 18px 14px; }
.partner-detail .partner-stats__value { font-size: clamp(1.3rem, 5.4vw, 1.7rem); }
.partner-detail .partner-stats__label { font-size: 0.8rem; }
.partner-detail .section { padding-block: 40px; }
.partner-detail .detail-section__title { font-size: clamp(1.1rem, 4.4vw, 1.3rem); margin: 28px 0 12px; }
.partner-detail .feature-list li { padding: 16px 18px; }
.partner-detail .feature-list h3 { font-size: 0.98rem; }
.partner-detail .empathy-block { padding: 20px 18px; }
/* 관련 KS 서비스 카드 grid (service-grid) 는 global 1열 처리됨 */
.partner-detail .service-grid--sm .service-card { padding: 18px 16px; }
/* =============== Partners · inquiry =============== */
.partnership-inquiry .page-hero { padding: 56px 0 36px; }
.partnership-inquiry .page-hero h1 { font-size: clamp(1.35rem, 5.2vw, 1.85rem); line-height: 1.4; }
.partnership-inquiry .page-hero h1 br { display: none; }
.partnership-inquiry .page-hero__lead { font-size: 0.92rem; line-height: 1.7; }
.partnership-inquiry .contact-form { gap: 14px; }
.partnership-inquiry .form-footnote { font-size: 0.8rem; line-height: 1.7; }
/* inquiry_thanks 는 page-hero--center + global 스타일로 커버됨 */
/* =============== Portal (home / list / detail / login) =============== */
.portal-hero { padding: 44px 0 24px; }
.portal-hero__inner {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.portal-hero h1 { font-size: clamp(1.3rem, 5.2vw, 1.75rem); line-height: 1.4; }
.portal-hero__lead { font-size: 0.9rem; line-height: 1.65; }
.portal-hero__lead small { font-size: 0.82rem; }
.portal-hero__actions { align-self: flex-start; }
.portal-hero__actions .btn { min-height: 40px; }
.portal-hero .stage-hero__breadcrumb { font-size: 0.82rem; flex-wrap: wrap; gap: 4px; }
/* portal-home dashboard grid 1열 */
.portal-home .portal-grid { grid-template-columns: 1fr; gap: 14px; }
.portal-home .portal-card { padding: 22px 20px; min-height: 0; gap: 14px; }
.portal-home .portal-card > header h2 { font-size: 1.05rem; }
.portal-home .portal-card .btn { align-self: stretch; text-align: center; justify-content: center; min-height: 44px; }
/* portal-list (최근 리포트 · 자료) */
.portal-home .portal-list li a {
grid-template-columns: 1fr;
gap: 4px 0;
padding: 14px 16px;
}
.portal-home .portal-list strong { font-size: 0.95rem; grid-column: 1 / -1; }
.portal-home .portal-list span { font-size: 0.82rem; grid-column: 1 / -1; }
.portal-home .portal-list time {
grid-column: 1 / -1; grid-row: auto;
font-size: 0.78rem;
color: var(--ink-400);
align-self: flex-start;
}
/* portal-full-list (reports / documents) — 날짜 아래로 */
.portal-reports .portal-full-list li a,
.portal-docs .portal-full-list li a {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 16px 18px;
}
.portal-reports .portal-full-list strong,
.portal-docs .portal-full-list strong { font-size: 0.96rem; line-height: 1.4; }
.portal-reports .portal-full-list small,
.portal-docs .portal-full-list small { font-size: 0.82rem; line-height: 1.55; }
.portal-reports .portal-full-list time,
.portal-docs .portal-full-list time { font-size: 0.82rem; }
.portal-empty { padding: 24px 18px; font-size: 0.9rem; }
/* portal-report detail prose + cta */
.portal-report .prose { font-size: 0.95rem; }
.portal-report .article__cta .btn { width: 100%; justify-content: center; }
/* portal-login */
.portal-login .page-hero { padding: 52px 0 32px; }
.portal-login .page-hero h1 { font-size: clamp(1.3rem, 5.2vw, 1.75rem); line-height: 1.4; }
.portal-login .page-hero__lead br { display: none; }
.portal-login .contact-form { gap: 14px; }
.portal-login .contact-form input[type="text"],
.portal-login .contact-form input[type="password"] {
font-size: 16px;
min-height: 48px;
padding: 12px 14px;
}
}
/* ---------- 태블릿 (641~1023px) 중간 보정 ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
/* Contact aside 는 1 col 이 자연스러움 (form 이 넓어짐) */
.contact-grid { grid-template-columns: 1fr 300px; }
/* Partner detail — hero actions 여전히 가로, 버튼 줄바꿈 */
.partner-detail .partner-hero__actions { flex-wrap: wrap; }
/* Portal grid 2열 유지 가능 */
.portal-home .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Partner card stats 3열까지 */
.partners-list .partner-card__stats {
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
/* Legal perks 이 중간 해상도에서 2-3 열로 자연 유지 */
.legal-urgent .legal-perks { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- 모든 해상도: 스크롤 보정 & 인쇄 예외 ---------- */
.cases--detail .case-premium__gate-inner,
.auth--verify .verify-badge,
.legal-urgent .legal-alert,
.portal-full-list li {
scroll-margin-top: 72px;
}