@charset "UTF-8";
/* /solution_study.css — 과외매칭 솔루션 소개 전용. 모든 값은 변수로 관리하며 공통 사이트 스타일에 영향 주지 않습니다. */
:root {
    --sm-ink:#15243a;
    --sm-ink-light:#4b5b70;
    --sm-muted:#74849c;
    --sm-blue:#1769e0;
    --sm-blue-dark:#0f5bc9;
    --sm-blue-soft:#edf5ff;
    --sm-bg:#f5f8fc;
    --sm-white:#fff;
    --sm-border:#dce5ef;
    --sm-purple:#7571d8;
    --sm-sky:#edf7ff;
    --sm-mint:#eaf8f3;
    --sm-green:#0e9f6e;
    --sm-gold:#d79737;
    --sm-navy:#0f2341;
    --sm-navy2:#173b67;
    --sm-pale:#f8fbff;
    --sm-shadow:0 16px 40px rgba(22,49,91,.06);
    --sm-radius:18px;
    --sm-radius-sm:11px;
    --sm-container:1120px;
    --sm-font:14px;
    --sm-caption:12px;
    --sm-label:13px;
    --sm-page-head:36px;
    --sm-section-head:27px;
    --sm-text-line:1.72;
    --sm-space:64px;
    /* STEP156: 솔루션 무료 / 설치·웹호스팅 비교 영역 전용 토큰 */
    --sm-host-soft:#edf5ff;
    --sm-host-border:#cbdcf2;
    --sm-host-surface:#ffffff;
    --sm-host-title:#183a66;
    --sm-host-label:#65758a;
    --sm-host-highlight:#eaf2ff;
    --sm-host-btn-bg:#1769e0;
    --sm-host-btn-hover:#0f5bc9;
    --sm-host-btn-text:#ffffff;
    --sm-host-grid-columns:repeat(3,minmax(0,1fr));
    --sm-host-summary-gap:12px;
    --sm-host-table-head-bg:#f0f6ff;
    --sm-host-table-alt-bg:#f9fbff;
    --sm-host-shadow:0 12px 30px rgba(22,49,91,.055);
    --sm-host-icon-size:26px;
    --sm-host-radius:16px;
    --sm-host-pad:24px;
}
.sm-page,.sm-page * {
    box-sizing:border-box
}
.sm-page {
    background:var(--sm-bg);
    font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
    font-size:var(--sm-font);
    line-height:var(--sm-text-line);
    color:var(--sm-ink);
    overflow:hidden
}
.sm-page a {
    text-decoration:none!important;
    color:inherit
}
.sm-page button,.sm-page a {
    -webkit-tap-highlight-color:transparent
}
.sm-page a:focus-visible,.sm-page summary:focus-visible {
    outline:3px solid var(--sm-blue);
    outline-offset:3px
}
.sm-page h1,.sm-page h2,.sm-page h3,.sm-page p {
    margin-top:0
}
.sm-page h2,.sm-page h3,.sm-page strong {
    word-break:keep-all
}
.sm-page p {
    color:var(--sm-ink-light)
}
.sm-page ul,.sm-page ol {
    margin:0;
    padding:0;
    list-style:none
}
.sm-shell {
    max-width:var(--sm-container);
    margin:0 auto;
    padding:0 20px 70px
}
.sm-local-nav {
    display:flex;
    align-items:center;
    gap:22px;
    justify-content:space-between;
    padding:21px 0
}
.sm-local-brand {
    display:inline-flex;
    gap:9px;
    align-items:center;
    font-weight:800;
    font-size:16px;
    letter-spacing:-.04em;
    white-space:nowrap
}
.sm-local-brand small {
    font-size:9px;
    letter-spacing:.09em;
    color:var(--sm-muted);
    margin-left:4px
}
.sm-brand-symbol {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:var(--sm-blue);
    color:white;
    box-shadow:0 8px 18px rgba(23,105,224,.15)
}
.sm-local-links {
    display:flex;
    align-items:center;
    gap:27px;
    margin-left:auto;
    color:var(--sm-muted);
    font-size:var(--sm-label);
    font-weight:650
}
.sm-local-links a:hover {
    color:var(--sm-blue)
}
.sm-nav-cta {
    border:1px solid var(--sm-border);
    background:var(--sm-white);
    border-radius:9px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    padding:0 17px;
    font-size:var(--sm-label);
    font-weight:750;
    white-space:nowrap
}
.sm-nav-cta:hover {
    border-color:var(--sm-blue);
    color:var(--sm-blue)
}
.sm-hero {
    display:grid;
    grid-template-columns:1.04fr .96fr;
    gap:28px;
    align-items:center;
    position:relative;
    padding:58px 48px 51px;
    border-radius:25px;
    background:linear-gradient(121deg,var(--sm-navy) 0%,var(--sm-navy2) 61%,#235385 100%);
    box-shadow:0 22px 44px rgba(25,64,107,.13);
    isolation:isolate;
    overflow:hidden
}
.sm-hero:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:radial-gradient(circle at 90% 4%,rgba(98,167,241,.25),transparent 40%),radial-gradient(circle at 2% 100%,rgba(84,159,229,.12),transparent 35%)
}
.sm-hero-copy {
    min-width:0
}
.sm-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#b9d5f8;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em
}
.sm-live-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#67dab1;
    box-shadow:0 0 0 4px rgba(103,218,177,.12)
}
.sm-hero h1 {
    font-size:var(--sm-page-head);
    line-height:1.36;
    letter-spacing:-.055em;
    color:var(--sm-white);
    margin:19px 0 15px;
    font-weight:800
}
.sm-hero h1 em {
    font-style:normal;
    color:#94c7ff
}
.sm-hero-desc {
    max-width:510px;
    color:#c5d5e7!important;
    font-size:14px;
    line-height:1.85;
    margin-bottom:24px;
    word-break:keep-all
}
.sm-hero-desc strong {
    color:white
}
.sm-hero-actions,.sm-contact-actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap
}
.sm-btn {
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:9px;
    border:1px solid transparent;
    font-weight:700;
    font-size:var(--sm-label);
    white-space:nowrap;
    transition:transform .2s,background .2s,border-color .2s
}
.sm-btn:hover {
    transform:translateY(-2px)
}
.sm-btn-primary {
    background:#4f9fff;
    color:#09213c!important;
    border-color:#4f9fff
}
.sm-btn-primary:hover {
    background:#82b8ff;
    border-color:#82b8ff
}
.sm-btn-outline {
    background:var(--sm-white);
    color:var(--sm-blue)!important;
    border-color:var(--sm-border)
}
.sm-btn-outline:hover {
    background:var(--sm-blue-soft)
}
.sm-hero .sm-btn-outline {
    background:transparent;
    color:#fff!important;
    border-color:#7194b9
}
.sm-hero .sm-btn-outline:hover {
    background:rgba(255,255,255,.1)
}
.sm-btn-ghost {
    color:#e4efff!important;
    border-color:transparent;
    background:rgba(255,255,255,.1)
}
.sm-btn-ghost:hover {
    background:rgba(255,255,255,.2)
}
.sm-hero-chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:29px
}
.sm-hero-chips span {
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.07);
    border-radius:999px;
    padding:5px 11px;
    font-size:11px;
    color:#d4e4f7
}
.sm-product-demo {
    border:1px solid #7591b1;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 22px 36px rgba(3,21,45,.21);
    transform:rotate(1deg)
}
.sm-product-top {
    height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 13px;
    background:#eef3f9;
    color:#667a92;
    font-weight:700;
    font-size:10px
}
.sm-product-dots {
    display:flex;
    gap:4px;
    margin-right:2px
}
.sm-product-dots i {
    display:block;
    width:7px;
    height:7px;
    background:#b5c6d8;
    border-radius:50%
}
.sm-product-dots i:first-child {
    background:#e99e9e
}
.sm-product-dots i:nth-child(2) {
    background:#f0d28c
}
.sm-product-dots i:last-child {
    background:#8ed3b8
}
.sm-product-status {
    margin-left:auto;
    color:#527395;
    font-size:10px
}
.sm-product-body {
    padding:19px
}
.sm-mini-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    margin-bottom:12px
}
.sm-mini-heading>div {
    display:flex;
    flex-direction:column;
    gap:3px
}
.sm-mini-heading strong {
    font-size:15px;
    color:#1c3755
}
.sm-mini-eyebrow {
    font-size:10px;
    color:#7590a9
}
.sm-mini-icon {
    font-size:25px;
    color:#4a9ef2
}
.sm-demo-request {
    padding:15px;
    border:1px solid #d8e7f5;
    background:#f7fbff;
    border-radius:10px
}
.sm-demo-request-head {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    color:#69829b;
    margin-bottom:8px
}
.sm-demo-badge {
    font-size:10px;
    font-weight:800;
    color:#1679c5;
    background:#e2f2ff;
    border-radius:5px;
    padding:3px 7px
}
.sm-demo-request strong {
    display:block;
    font-size:15px;
    color:#20354d
}
.sm-demo-request p {
    font-size:10px;
    margin:3px 0 10px;
    color:#8594a7!important
}
.sm-demo-tags {
    display:flex;
    gap:5px;
    flex-wrap:wrap
}
.sm-demo-tags span {
    border-radius:4px;
    border:1px solid #d9e6f3;
    background:white;
    color:#68809a;
    font-size:10px;
    padding:3px 6px
}
.sm-demo-line {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:14px 0
}
.sm-demo-line span {
    height:4px;
    width:4px;
    background:#c4d7e9;
    border-radius:50%
}
.sm-demo-line span:nth-child(2) {
    background:#4e9aeb
}
.sm-demo-steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px
}
.sm-demo-steps>div {
    background:#f4f8fd;
    border-radius:9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:12px 3px;
    text-align:center
}
.sm-step-number {
    font-size:10px;
    font-weight:900;
    color:#4082cc
}
.sm-demo-steps strong {
    font-size:11px;
    white-space:nowrap
}
.sm-demo-steps small {
    font-size:10px;
    color:#8a9aab
}
.sm-demo-trust {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#527364;
    background:#edf9f4;
    padding:8px 10px;
    border-radius:7px;
    margin-top:10px
}
.sm-demo-trust span {
    display:inline-flex;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background:#d5f2e6;
    width:17px;
    height:17px;
    color:#168556;
    font-weight:900
}
.sm-overview {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:19px
}
.sm-overview-item {
    border:1px solid var(--sm-border);
    background:var(--sm-white);
    border-radius:14px;
    padding:19px 15px 18px;
    display:flex;
    flex-direction:column;
    gap:2px
}
.sm-overview-item strong {
    font-size:21px;
    color:var(--sm-blue);
    letter-spacing:-.04em
}
.sm-overview-item span {
    font-size:var(--sm-label);
    color:var(--sm-muted)
}
.sm-section {
    margin-top:var(--sm-space);
    scroll-margin-top:30px
}
.sm-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:22px
}
.sm-section-heading>div {
    max-width:730px
}
.sm-kicker {
    display:block;
    color:var(--sm-blue);
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
    margin-bottom:7px
}
.sm-section-heading h2,.sm-admin-top h2,.sm-technology h2,.sm-contact h2 {
    font-size:var(--sm-section-head);
    line-height:1.38;
    letter-spacing:-.04em;
    margin:0;
    font-weight:800;
    color:var(--sm-ink)
}
.sm-section-heading>p {
    max-width:330px;
    font-size:var(--sm-label);
    line-height:1.6;
    margin:0;
    color:var(--sm-muted)
}
.sm-flow-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
}
.sm-flow-card {
    background:var(--sm-white);
    border:1px solid var(--sm-border);
    border-radius:var(--sm-radius);
    padding:26px 28px;
    box-shadow:var(--sm-shadow)
}
.sm-flow-head {
    display:flex;
    align-items:center;
    gap:12px
}
.sm-flow-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    width:43px;
    height:43px;
    background:#e4f0ff;
    font-weight:850;
    color:var(--sm-blue);
    font-size:14px
}
.sm-flow-direct .sm-flow-icon {
    background:#e9f6f0;
    color:var(--sm-green)
}
.sm-card-eyebrow {
    font-size:10px;
    font-weight:800;
    color:var(--sm-muted);
    letter-spacing:.1em
}
.sm-flow-card h3 {
    margin:1px 0 0;
    font-size:17px
}
.sm-flow-card>p {
    font-size:var(--sm-label);
    color:var(--sm-ink-light);
    margin:15px 0 18px;
    min-height:43px
}
.sm-flow-list {
    display:flex;
    flex-direction:column;
    gap:10px
}
.sm-flow-list li {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:var(--sm-label);
    color:#354a60
}
.sm-flow-list li span {
    display:inline-flex;
    flex:none;
    align-items:center;
    justify-content:center;
    background:#e9f1fc;
    border-radius:50%;
    width:25px;
    height:25px;
    color:#2769b2;
    font-size:11px;
    font-weight:850
}
.sm-flow-direct .sm-flow-list li span {
    background:#eaf8f3;
    color:#17845c
}
.sm-flow-note {
    border-top:1px dashed var(--sm-border);
    font-size:var(--sm-caption);
    color:var(--sm-muted);
    margin-top:23px;
    padding-top:13px
}
.sm-user-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
}
.sm-user-card {
    border-radius:var(--sm-radius);
    padding:29px;
    overflow:hidden;
    border:1px solid #d9e7f6;
    background:linear-gradient(140deg,#f1f7ff 0%,#fff 80%)
}
.sm-teacher {
    background:linear-gradient(140deg,#edf9f3 0%,#fff 80%);
    border-color:#d9ece2
}
.sm-user-brow {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:var(--sm-label);
    font-weight:800
}
.sm-user-avatar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    background:#d9eaff;
    color:var(--sm-blue);
    border-radius:10px;
    font-size:15px
}
.sm-teacher .sm-user-avatar {
    color:var(--sm-green);
    background:#d9f3e6
}
.sm-user-pill {
    background:#e2edfb;
    border-radius:999px;
    color:#3972b8;
    padding:4px 8px;
    font-size:11px;
    margin-left:auto
}
.sm-teacher .sm-user-pill {
    background:#dff5e8;
    color:#21855e
}
.sm-user-card h3 {
    font-size:22px;
    line-height:1.42;
    letter-spacing:-.04em;
    margin:19px 0 10px
}
.sm-user-card>p {
    font-size:var(--sm-label);
    color:var(--sm-ink-light);
    min-height:48px
}
.sm-tick-list {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 0 23px!important
}
.sm-tick-list li {
    position:relative;
    padding-left:22px;
    font-size:var(--sm-label);
    color:#3f546b
}
.sm-tick-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    font-weight:900;
    color:var(--sm-blue)
}
.sm-teacher .sm-tick-list li:before {
    color:var(--sm-green)
}
.sm-text-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:var(--sm-label);
    font-weight:800;
    color:var(--sm-blue)!important
}
.sm-teacher .sm-text-link {
    color:var(--sm-green)!important
}
.sm-cap-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px
}
.sm-cap-card {
    background:var(--sm-white);
    border:1px solid var(--sm-border);
    border-radius:15px;
    min-width:0;
    padding:21px 18px;
    box-shadow:var(--sm-shadow)
}
.sm-cap-symbol {
    display:inline-flex;
    border-radius:8px;
    background:#eef5ff;
    color:#2876ce;
    align-items:center;
    justify-content:center;
    font-weight:850;
    width:33px;
    height:33px;
    font-size:11px
}
.sm-cap-card h3 {
    font-size:15px;
    margin:17px 0 7px
}
.sm-cap-card p {
    font-size:var(--sm-label);
    line-height:1.65;
    margin:0;
    color:var(--sm-muted)
}
.sm-admin-section {
    background:var(--sm-white);
    border:1px solid var(--sm-border);
    border-radius:23px;
    padding:32px;
    box-shadow:var(--sm-shadow)
}
.sm-admin-top {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px
}
.sm-admin-top p {
    font-size:var(--sm-label);
    margin:9px 0 0
}
.sm-admin-layout {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:27px;
    align-items:center
}
.sm-admin-screen {
    border:1px solid #d9e4f1;
    border-radius:14px;
    box-shadow:0 14px 30px rgba(18,48,88,.08);
    overflow:hidden
}
.sm-admin-screen-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 15px;
    background:#f1f6fd;
    border-bottom:1px solid #dde6f1
}
.sm-admin-logo {
    font-size:11px;
    color:#2767a7;
    font-weight:850
}
.sm-admin-screen-state {
    font-size:10px;
    color:#7b91a9
}
.sm-admin-screen-body {
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    min-height:268px
}
.sm-admin-screen-body aside {
    display:flex;
    flex-direction:column;
    gap:0;
    background:#f7faff;
    border-right:1px solid #e1eaf4;
    padding:13px 10px
}
.sm-admin-screen-body aside span {
    display:block;
    font-size:10px;
    color:#7b8b9b;
    padding:9px;
    border-radius:6px;
    font-weight:600
}
.sm-admin-screen-body aside .sm-admin-menu-active {
    color:var(--sm-blue);
    background:#eaf2ff;
    font-weight:850
}
.sm-admin-screen-content {
    min-width:0;
    padding:20px 16px
}
.sm-admin-screen-content>strong {
    display:block;
    font-size:14px
}
.sm-admin-screen-content>small {
    display:block;
    color:#8da0b6;
    font-size:10px;
    margin:1px 0 13px
}
.sm-admin-metrics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px
}
.sm-admin-metrics>div {
    background:#f1f7fe;
    border-radius:7px;
    padding:10px 7px;
    display:flex;
    flex-direction:column;
    gap:4px
}
.sm-admin-metrics span {
    font-size:9px;
    color:#8194ac
}
.sm-admin-metrics b {
    font-size:10px;
    color:#1d548e
}
.sm-admin-sample-table {
    border:1px solid #e0e8f1;
    border-radius:8px;
    overflow:hidden;
    margin-top:14px
}
.sm-admin-sample-table>div {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:10px;
    padding:8px 10px;
    font-size:10px;
    color:#69809a;
    border-bottom:1px solid #e8eef6
}
.sm-admin-sample-table>div:first-child {
    background:#f3f7fc;
    font-weight:800
}
.sm-admin-sample-table>div:last-child {
    border-bottom:0
}
.sm-admin-benefits {
    display:flex;
    flex-direction:column;
    gap:18px
}
.sm-admin-benefits>div {
    display:flex;
    align-items:flex-start;
    gap:11px
}
.sm-admin-bullet {
    display:inline-flex;
    flex:none;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    background:#e8f3ff;
    color:var(--sm-blue);
    border-radius:8px;
    font-size:13px;
    font-weight:900
}
.sm-admin-benefits h3 {
    font-size:14px;
    margin:0 0 3px
}
.sm-admin-benefits p {
    font-size:var(--sm-label);
    margin:0;
    color:var(--sm-muted)
}
.sm-protect-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px
}
.sm-protect-grid article {
    padding:23px 17px;
    border:1px solid var(--sm-border);
    border-radius:14px;
    background:var(--sm-white)
}
.sm-protect-icon {
    font-size:11px;
    font-weight:850;
    color:var(--sm-green);
    padding:5px 8px;
    background:var(--sm-mint);
    border-radius:6px
}
.sm-protect-grid h3 {
    font-size:15px;
    margin:15px 0 7px
}
.sm-protect-grid p {
    font-size:var(--sm-label);
    color:var(--sm-muted);
    margin:0
}
.sm-technology {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    padding:33px 32px;
    border:1px solid var(--sm-border);
    border-radius:var(--sm-radius);
    background:var(--sm-white)
}
.sm-technology>div:first-child {
    max-width:470px
}
.sm-technology p {
    font-size:var(--sm-label);
    margin:10px 0 0
}
.sm-tech-chips {
    max-width:510px;
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px
}
.sm-tech-chips span {
    display:inline-flex;
    border:1px solid #dfebf5;
    border-radius:999px;
    background:#f3f8fe;
    font-size:11px;
    color:#456b95;
    padding:8px 11px;
    font-weight:750
}
.sm-contact {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:34px;
    background:linear-gradient(120deg,#e9f3ff,#f9fcff);
    border:1px solid #d6e7fb;
    border-radius:var(--sm-radius)
}
.sm-contact>div:first-child {
    max-width:690px
}
.sm-contact p {
    font-size:var(--sm-label);
    margin:11px 0 0
}
.sm-contact .sm-btn-primary {
    background:var(--sm-blue);
    color:#fff!important;
    border-color:var(--sm-blue)
}
.sm-contact .sm-btn-primary:hover {
    background:var(--sm-blue-dark)
}
.sm-faq-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    align-items:start
}
.sm-faq-list details {
    border:1px solid var(--sm-border);
    border-radius:12px;
    background:var(--sm-white);
    padding:17px 20px
}
.sm-faq-list summary {
    font-size:var(--sm-label);
    font-weight:800;
    cursor:pointer;
    list-style:none;
    position:relative;
    padding-right:25px;
    line-height:1.6
}
.sm-faq-list summary::-webkit-details-marker {
    display:none
}
.sm-faq-list summary:after {
    content:'+';
    position:absolute;
    right:0;
    top:0;
    color:var(--sm-blue);
    font-size:18px;
    font-weight:400
}
.sm-faq-list details[open] summary:after {
    content:'−'
}
.sm-faq-list details p {
    font-size:var(--sm-label);
    color:var(--sm-ink-light);
    margin:12px 0 0;
    padding-top:11px;
    border-top:1px solid #edf1f6
}
.sm-page-foot {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:15px;
    padding:38px 2px 0;
    color:var(--sm-muted);
    font-size:var(--sm-caption)
}
.sm-page-foot>span {
    font-weight:750
}
.sm-page-foot>div {
    display:flex;
    gap:19px;
    flex-wrap:wrap
}
.sm-page-foot a:hover {
    color:var(--sm-blue)
}
@media(max-width:1024px) {
    :root {
        --sm-page-head:31px;
        --sm-section-head:25px;
        --sm-space:53px
    }
    .sm-hero {
        padding:44px 31px;
        gap:19px
    }
    .sm-cap-grid,.sm-protect-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .sm-hero-chips {
        margin-top:18px
    }
    .sm-local-links {
        gap:14px
    }
}
@media(max-width:768px) {
    :root {
        --sm-page-head:30px;
        --sm-section-head:24px;
        --sm-space:45px
    }
    .sm-local-links {
        display:none
    }
    .sm-hero {
        grid-template-columns:minmax(0,1fr);
        padding:35px 26px
    }
    .sm-product-demo {
        max-width:510px;
        transform:none;
        width:100%;
        margin:auto
    }
    .sm-overview {
        grid-template-columns:repeat(2,1fr)
    }
    .sm-section-heading {
        align-items:start;
        flex-direction:column;
        gap:7px
    }
    .sm-flow-grid,.sm-user-grid,.sm-admin-layout,.sm-faq-list {
        grid-template-columns:minmax(0,1fr)
    }
    .sm-admin-top {
        align-items:start
    }
    .sm-technology,.sm-contact {
        align-items:flex-start;
        flex-direction:column
    }
    .sm-tech-chips {
        justify-content:flex-start
    }
    .sm-admin-benefits {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:520px) {
    :root {
        --sm-page-head:27px;
        --sm-section-head:21px;
        --sm-space:41px
    }
    .sm-shell {
        padding:0 14px 45px
    }
    .sm-local-nav {
        padding:14px 0
    }
    .sm-local-brand {
        font-size:14px
    }
    .sm-local-brand small {
        display:none
    }
    .sm-nav-cta {
        font-size:12px;
        min-height:37px;
        padding:0 11px
    }
    .sm-hero {
        padding:28px 20px 24px;
        border-radius:16px
    }
    .sm-hero h1 {
        margin:15px 0 11px
    }
    .sm-hero-desc {
        font-size:13px
    }
    .sm-hero-actions .sm-btn {
        flex:1 1 auto;
        padding:0 10px
    }
    .sm-hero-actions .sm-btn-ghost {
        flex:1 1 100%
    }
    .sm-hero-chips {
        gap:5px;
        margin-top:19px
    }
    .sm-hero-chips span {
        font-size:10px;
        padding:5px 8px
    }
    .sm-product-body {
        padding:12px
    }
    .sm-mini-heading strong {
        font-size:13px
    }
    .sm-overview {
        gap:8px
    }
    .sm-overview-item {
        padding:15px 12px
    }
    .sm-overview-item strong {
        font-size:18px
    }
    .sm-overview-item span {
        font-size:11px
    }
    .sm-flow-card,.sm-user-card {
        padding:21px 18px
    }
    .sm-flow-card>p,.sm-user-card>p {
        min-height:0
    }
    .sm-user-card h3 {
        font-size:20px
    }
    .sm-flow-card h3 {
        font-size:16px
    }
    .sm-flow-list li {
        align-items:flex-start
    }
    .sm-cap-grid,.sm-protect-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .sm-cap-card,.sm-protect-grid article {
        padding:19px
    }
    .sm-admin-section {
        padding:21px 14px
    }
    .sm-admin-top {
        flex-direction:column;
        gap:15px
    }
    .sm-admin-screen-body {
        grid-template-columns:99px minmax(0,1fr)
    }
    .sm-admin-screen-body aside {
        padding:7px 4px
    }
    .sm-admin-screen-body aside span {
        padding:7px 5px;
        font-size:9px
    }
    .sm-admin-screen-content {
        padding:11px 8px
    }
    .sm-admin-metrics {
        gap:3px
    }
    .sm-admin-metrics>div {
        padding:8px 3px
    }
    .sm-admin-metrics span {
        font-size:8px
    }
    .sm-admin-metrics b {
        font-size:9px
    }
    .sm-admin-benefits {
        grid-template-columns:minmax(0,1fr)
    }
    .sm-technology,.sm-contact {
        padding:24px 19px
    }
    .sm-contact-actions {
        width:100%
    }
    .sm-contact-actions>.sm-btn {
        flex:1 1 100%
    }
    .sm-faq-list details {
        padding:16px
    }
    .sm-page-foot {
        padding-top:30px
    }
    .sm-page-foot>div {
        gap:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    .sm-btn {
        transition:none
    }
}

/* STEP156 — 무료 솔루션 안내 · 신청 전 확인 · 웹호스팅 3종 비교 */
.sm-host-section { min-width:0; }
.sm-host-summary { display:grid; grid-template-columns:var(--sm-host-grid-columns); gap:var(--sm-host-summary-gap); margin-bottom:20px; }
.sm-host-summary-item { display:flex; flex-direction:column; gap:5px; padding:var(--sm-host-pad); background:var(--sm-host-surface); border:1px solid var(--sm-host-border); border-radius:var(--sm-host-radius); box-shadow:var(--sm-host-shadow); }
.sm-host-summary-item span { color:var(--sm-host-label); font-size:var(--sm-label); font-weight:700; }
.sm-host-summary-item strong { font-size:var(--sm-section-head); color:var(--sm-blue); line-height:1.5; letter-spacing:-.035em; }
.sm-host-summary-item small { font-size:var(--sm-caption); color:var(--sm-host-label); }
.sm-host-info { padding:var(--sm-host-pad); background:var(--sm-host-soft); border:1px solid var(--sm-host-border); border-radius:var(--sm-host-radius); margin-bottom:28px; }
.sm-host-info-title { display:flex; align-items:flex-start; gap:12px; }
.sm-host-info-title h3 { font-size:var(--sm-section-head); margin:0 0 5px; line-height:1.45; }
.sm-host-info-title p { font-size:var(--sm-label); margin:0; }
.sm-host-info-icon { flex:none; display:inline-flex; justify-content:center; align-items:center; width:var(--sm-host-icon-size); height:var(--sm-host-icon-size); border-radius:50%; background:var(--sm-blue); color:var(--sm-white); font-weight:800; font-size:var(--sm-label); }
.sm-host-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin-top:18px!important; }
.sm-host-guide li { position:relative; min-width:0; padding-left:18px; font-size:var(--sm-label); color:var(--sm-ink-light); word-break:keep-all; }
.sm-host-guide li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--sm-blue); font-weight:800; }
.sm-host-guide strong { color:var(--sm-host-title); }
.sm-host-table-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:13px; }
.sm-host-table-head h3 { margin:0; font-size:var(--sm-section-head); }
.sm-host-table-head p { margin:0; color:var(--sm-host-label); font-size:var(--sm-caption); }
.sm-host-table-wrap { border:1px solid var(--sm-host-border); border-radius:var(--sm-host-radius); background:var(--sm-host-surface); overflow:hidden; box-shadow:var(--sm-host-shadow); }
.sm-host-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:var(--sm-label); }
.sm-host-table caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sm-host-table thead { background:var(--sm-host-table-head-bg); }
.sm-host-table th,.sm-host-table td { padding:16px 13px; border-bottom:1px solid var(--sm-border); text-align:center; vertical-align:middle; }
.sm-host-table thead th { font-weight:800; font-size:var(--sm-label); color:var(--sm-host-title); }
.sm-host-table th:first-child { text-align:left; width:27%; }
.sm-host-table tbody th { font-weight:650; color:var(--sm-ink-light); background:var(--sm-host-table-alt-bg); }
.sm-host-table tbody tr:last-child th,.sm-host-table tbody tr:last-child td { border-bottom:0; }
.sm-host-table td { color:var(--sm-ink); font-weight:600; }
.sm-host-price-row td { font-weight:800; color:var(--sm-host-title); }
.sm-host-price-row:last-of-type td { color:var(--sm-blue); }
.sm-host-action-row td { padding-top:19px; padding-bottom:19px; }
.sm-host-apply { display:inline-flex; width:100%; max-width:172px; min-height:44px; background:var(--sm-host-btn-bg); border-color:var(--sm-host-btn-bg); color:var(--sm-host-btn-text)!important; }
.sm-host-apply:hover { background:var(--sm-host-btn-hover); border-color:var(--sm-host-btn-hover); }
.sm-host-mobile { display:none; }
.sm-host-footnote { margin:12px 0 0; color:var(--sm-host-label)!important; font-size:var(--sm-caption); line-height:1.65; }
.sm-host-plan { background:var(--sm-host-surface); border:1px solid var(--sm-host-border); border-radius:var(--sm-host-radius); box-shadow:var(--sm-host-shadow); padding:var(--sm-host-pad); }
.sm-host-plan-top { padding-bottom:13px; border-bottom:1px solid var(--sm-border); }
.sm-host-plan-top>span { color:var(--sm-blue); font-size:var(--sm-caption); letter-spacing:.07em; font-weight:800; }
.sm-host-plan-top h3 { margin:3px 0 4px; font-size:var(--sm-section-head); }
.sm-host-plan-top p { font-size:var(--sm-caption); margin:0; }
.sm-host-plan-top strong { display:block; font-size:var(--sm-section-head); color:var(--sm-blue); line-height:1.6; }
.sm-host-plan-top strong small { color:var(--sm-host-label); font-size:var(--sm-caption); font-weight:500; }
.sm-host-plan dl { margin:10px 0 16px; }
.sm-host-plan dl>div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--sm-border); }
.sm-host-plan dt { color:var(--sm-host-label); font-size:var(--sm-label); }
.sm-host-plan dd { font-weight:700; margin:0; font-size:var(--sm-label); }
.sm-host-plan>.sm-host-apply { max-width:none; }
@media(max-width:768px) {
    .sm-host-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sm-host-summary-item:first-child { grid-column:1/-1; }
    .sm-host-guide { grid-template-columns:minmax(0,1fr); }
    .sm-host-table-head { align-items:flex-start; flex-direction:column; gap:2px; }
    .sm-host-table-wrap { display:none; }
    .sm-host-mobile { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
}
@media(max-width:520px) {
    .sm-host-summary { gap:9px; }
    .sm-host-summary-item { padding:16px; }
    .sm-host-summary-item strong { font-size:18px; }
    .sm-host-info { padding:19px 16px; }
    .sm-host-info-title h3 { font-size:18px; }
    .sm-host-plan { padding:19px; }
}