@charset "utf-8";
/* ==========================================================================
   선올아이티 테마 - 공통 스타일
   theme/seonol/css/style.css

   1부 : 하위 페이지 · 게시판 스킨이 쓰는 dc-* 기본 스타일 (devcorp 테마에서 가져옴)
   2부 : 공통 디자인 (al-*, ALLIT 테마에서 가져옴) / 3부 : 선올아이티 (so-*) — 파일 맨 아래. 1부의 색 · 모서리를 덮어쓴다.

   색상/여백/폰트는 :root 변수만 바꾸면 사이트 전체 톤이 바뀝니다.
   ========================================================================== */

:root {
    /* 브랜드 컬러 */
    --dc-primary:      #1787A8;
    --dc-primary-dark: #126C87;
    --dc-primary-soft: #EAF3F6;
    --dc-accent:       #24A9CE;

    /* 뉴트럴 */
    --dc-navy:   #102B3B;
    --dc-navy-2: #1B3E52;
    --dc-text:   #16242D;
    --dc-body:   #45555F;
    --dc-muted:  #5B6B75;
    --dc-line:   #DCE7EC;
    --dc-bg:     #ffffff;
    --dc-bg-alt: #F5F9FB;

    /* 상태 */
    --dc-danger: #d64545;
    --dc-warn:   #e6a23c;
    --dc-ok:     #16a34a;

    /* 형태 */
    --dc-radius:    14px;
    --dc-radius-lg: 18px;
    --dc-shadow:    0 2px 8px rgba(15, 27, 51, .06);
    --dc-shadow-lg: 0 18px 40px rgba(15, 27, 51, .12);

    /* 레이아웃 */
    --dc-max:     1200px;
    --dc-gutter:  24px;
    --dc-header-h: 92px;

    --dc-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--dc-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--dc-body);
    background: var(--dc-bg);
    word-break: keep-all;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5 { margin: 0; color: var(--dc-text); line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--dc-primary); text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

.dc-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--dc-primary); color: #fff; padding: 10px 18px;
}
.dc-skip:focus { left: 0; }

.dc-inner { max-width: var(--dc-max); margin: 0 auto; padding: 0 var(--dc-gutter); }

/* ==========================================================================
   버튼
   ========================================================================== */
.dc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 46px; padding: 0 24px;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    background: #fff; color: var(--dc-text);
    transition: all .18s ease;
    white-space: nowrap;
}
.dc-btn:hover { transform: translateY(-1px); }
.dc-btn-primary { background: var(--dc-primary); color: #fff; box-shadow: 0 6px 16px rgba(23,135,168,.25); }
.dc-btn-primary:hover { background: var(--dc-primary-dark); }
.dc-btn-line    { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.dc-btn-line:hover { background: rgba(255,255,255,.12); }
.dc-btn-outline { background: #fff; border-color: var(--dc-line); color: var(--dc-text); }
.dc-btn-outline:hover { border-color: var(--dc-primary); color: var(--dc-primary); }
.dc-btn-ghost   { background: transparent; border-color: var(--dc-line); color: var(--dc-body); }
.dc-btn-ghost:hover { border-color: var(--dc-primary); color: var(--dc-primary); }
.dc-btn-sm  { height: 34px; padding: 0 14px; font-size: 13px; }
.dc-btn-lg  { height: 56px; padding: 0 34px; font-size: 17px; }
.dc-btn-block { width: 100%; }

/* ==========================================================================
   헤더 / GNB
   ========================================================================== */
.dc-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--dc-line);
}
.dc-header.scrolled { box-shadow: 0 4px 20px rgba(15,27,51,.08); }
.dc-header-inner {
    display: flex; align-items: center; gap: 28px;
    height: var(--dc-header-h);
}

.dc-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dc-logo-mark {
    width: 46px; height: 46px; border-radius: 12px;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-accent));
    color: #fff; font-weight: 800; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
}
/* 로고 이미지
   높이는 관리자에서 조절(--dc-logo-h, 기본 76px). 가로는 비율대로 늘어난다.
   가로 상한이 좁으면 object-fit 때문에 높이가 도로 줄어들므로 넉넉히 잡는다. */
.dc-logo-img {
    display: flex; align-items: center; flex-shrink: 0;
    height: var(--dc-logo-h, 76px); max-width: 460px;
}
.dc-logo-img img {
    height: var(--dc-logo-h, 76px);
    max-width: 460px; width: auto; object-fit: contain;
}
/* 값을 크게 잡아도 헤더가 밀리지 않도록 상한을 둔다 */
.dc-header .dc-logo-img,
.dc-header .dc-logo-img img { max-height: calc(var(--dc-header-h) - 8px); }

/* 어두운 푸터에서의 로고 처리 (관리자에서 선택) */

/* 원본 그대로 (기본값) - 배경이 투명한 로고용.
   배경판도 필터도 걸지 않고 푸터 배경색(--dc-navy) 위에 그대로 얹는다. */
.dc-logo-img.foot-plain,
.dc-logo-img.foot-plain img { background: transparent; filter: none; }
.dc-logo-img.foot-plate {                       /* 흰색 배경판 - 배경이 흰색인 로고용 */
    background: #fff; border-radius: 10px;
    padding: 9px 16px; height: auto;
    max-width: 300px;
}
.dc-logo-img.foot-invert img {                  /* 흰색 반전 - 배경이 투명한 어두운 로고용 */
    filter: brightness(0) invert(1); opacity: .92;
}
.dc-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.dc-logo-text strong { font-size: 19px; color: var(--dc-text); letter-spacing: -.03em; }
.dc-logo-text small  { font-size: 11px; color: var(--dc-muted); letter-spacing: -.01em; }

.dc-gnb { flex: 1; }
.dc-gnb-list { display: flex; align-items: center; gap: 4px; }
.dc-gnb-item { position: relative; }
.dc-gnb-link {
    display: block; padding: 0 16px; height: var(--dc-header-h);
    line-height: var(--dc-header-h);
    font-size: 16px; font-weight: 600; color: var(--dc-text);
    position: relative;
}
.dc-gnb-link:hover { color: var(--dc-primary); }
.dc-gnb-item.active > .dc-gnb-link { color: var(--dc-primary); }
.dc-gnb-item.active > .dc-gnb-link::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 18px;
    height: 2px; background: var(--dc-primary); border-radius: 2px;
}
.dc-gnb-link.is-cta {
    color: var(--dc-primary);
}
.dc-gnb-sub {
    position: absolute; top: calc(var(--dc-header-h) - 12px); left: 0;
    min-width: 180px; padding: 8px;
    background: #fff; border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: all .18s ease;
}
.dc-gnb-item:hover .dc-gnb-sub,
.dc-gnb-item:focus-within .dc-gnb-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.dc-gnb-sub a {
    display: block; padding: 9px 14px; border-radius: 8px;
    font-size: 14px; color: var(--dc-body); font-weight: 500;
}
.dc-gnb-sub a:hover { background: var(--dc-primary-soft); color: var(--dc-primary); }

.dc-header-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dc-header-tel { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.dc-header-tel-label { font-size: 11px; color: var(--dc-muted); }
.dc-header-tel strong { font-size: 18px; color: var(--dc-text); letter-spacing: -.02em; }

.dc-burger {
    display: none; width: 42px; height: 42px; padding: 0;
    background: none; border: 1px solid var(--dc-line); border-radius: 8px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.dc-burger span { display: block; width: 18px; height: 2px; background: var(--dc-text); border-radius: 2px; transition: .2s; }
.dc-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dc-burger.open span:nth-child(2) { opacity: 0; }
.dc-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 */
.dc-mobile {
    position: fixed; inset: var(--dc-header-h) 0 0 0; z-index: 99;
    background: #fff; overflow-y: auto; padding: 20px var(--dc-gutter) 40px;
}
.dc-mobile[hidden] { display: none; }
.dc-mobile-group { border-bottom: 1px solid var(--dc-line); padding: 6px 0; }
.dc-mobile-link { display: block; padding: 12px 4px; font-size: 17px; font-weight: 700; color: var(--dc-text); }
.dc-mobile-sub { padding: 0 4px 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.dc-mobile-sub a {
    padding: 6px 12px; background: var(--dc-bg-alt); border-radius: 20px;
    font-size: 14px; color: var(--dc-body);
}
.dc-mobile-foot { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dc-mobile-mini { font-size: 13px; color: var(--dc-muted); }

/* ==========================================================================
   서브페이지 히어로 / 브레드크럼
   ========================================================================== */
.dc-pagehero {
    background: linear-gradient(120deg, var(--dc-navy) 0%, var(--dc-navy-2) 55%, #1e3a7a 100%);
    color: #fff; padding: 62px 0 54px; text-align: center;
}
.dc-pagehero-title { font-size: 38px; color: #fff; letter-spacing: -.035em; }
.dc-pagehero-sub { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 16px; }
.dc-breadcrumb {
    margin-top: 20px; display: flex; justify-content: center; gap: 8px;
    font-size: 13px; color: rgba(255,255,255,.55);
}
.dc-breadcrumb a { color: rgba(255,255,255,.7); }
.dc-breadcrumb strong { color: #fff; font-weight: 600; }

.dc-main { min-height: 400px; }
.dc-page { padding: 64px 0 90px; }

/* ==========================================================================
   섹션 공통
   ========================================================================== */
.dc-section { padding: 96px 0; }
.dc-section.alt { background: var(--dc-bg-alt); }
.dc-section.dark { background: var(--dc-navy); color: rgba(255,255,255,.72); }
.dc-section.dark h2, .dc-section.dark h3 { color: #fff; }

.dc-sec-head { text-align: center; margin-bottom: 52px; }
.dc-sec-head.left { text-align: left; }
.dc-eyebrow {
    display: inline-block; margin-bottom: 14px; padding: 5px 14px;
    background: var(--dc-primary-soft); color: var(--dc-primary);
    border-radius: 20px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.dc-section.dark .dc-eyebrow { background: rgba(255,255,255,.1); color: #7fb0ff; }
.dc-sec-title { font-size: 34px; letter-spacing: -.035em; }
.dc-sec-desc { margin-top: 14px; font-size: 17px; color: var(--dc-body); }
.dc-section.dark .dc-sec-desc { color: rgba(255,255,255,.66); }

.dc-grid { display: grid; gap: 24px; }
.dc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dc-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   메인 히어로
   ========================================================================== */
.dc-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(125deg, #0f1b33 0%, #16264a 45%, #1c3f8f 100%);
    color: #fff; padding: 110px 0 96px;
}
.dc-hero::after {
    content: ''; position: absolute; right: -140px; top: -120px;
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,184,169,.30), transparent 62%);
    pointer-events: none;
}
.dc-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.dc-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; margin-bottom: 26px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px; font-size: 14px; color: rgba(255,255,255,.9);
}
.dc-hero-title {
    font-size: 54px; line-height: 1.25; color: #fff; letter-spacing: -.045em;
}
.dc-hero-desc {
    margin-top: 24px; font-size: 19px; line-height: 1.75;
    color: rgba(255,255,255,.76); max-width: 660px;
}
.dc-hero-desc strong { color: #fff; font-weight: 700; }
.dc-hero-actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.dc-hero-keys {
    margin-top: 56px; display: flex; flex-wrap: wrap; gap: 10px;
}
.dc-hero-keys span {
    padding: 8px 16px; border-radius: 30px; font-size: 14px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
}

/* 실적 카운터 */
.dc-stats { background: var(--dc-navy-2); color: #fff; padding: 0; }
.dc-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.1);
}
.dc-stat { padding: 40px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.dc-stat:last-child { border-right: 0; }
.dc-stat-value { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1.1; }
.dc-stat-value span { font-size: 22px; margin-left: 2px; color: var(--dc-accent); }
.dc-stat-label { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.6); }

/* ==========================================================================
   서비스 카드
   ========================================================================== */
.dc-card {
    background: #fff; border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-lg); padding: 34px 30px;
    transition: all .22s ease;
}
.dc-card:hover { border-color: var(--dc-primary); box-shadow: var(--dc-shadow-lg); transform: translateY(-4px); }
.dc-card-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--dc-primary-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; margin-bottom: 20px;
}
.dc-card-num {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    color: var(--dc-muted); margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid var(--dc-line);
    font-variant-numeric: tabular-nums;
}
.dc-card:hover .dc-card-num { color: var(--dc-primary); border-color: var(--dc-primary); }
.dc-card-title { font-size: 21px; margin-bottom: 8px; }
.dc-card-lead { font-size: 15px; color: var(--dc-primary); font-weight: 600; margin-bottom: 12px; }
.dc-card-desc { font-size: 15px; line-height: 1.75; color: var(--dc-body); }
.dc-card-list { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--dc-line); }
.dc-card-list li {
    position: relative; padding-left: 18px; font-size: 14.5px;
    color: var(--dc-body); line-height: 1.9;
}
.dc-card-list li::before {
    content: ''; position: absolute; left: 2px; top: 13px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--dc-accent);
}
.dc-card-more { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; }

/* ==========================================================================
   자체 솔루션 (메인 카드) — 아이콘 없이 번호와 여백으로 정돈
   ========================================================================== */
.dc-sol {
    position: relative; background: #fff;
    border: 1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
    padding: 30px 28px 28px; display: flex; flex-direction: column;
    transition: all .22s ease;
}
.dc-sol:hover { border-color: var(--dc-text); box-shadow: var(--dc-shadow-lg); transform: translateY(-4px); }
.dc-sol.featured { border-color: var(--dc-text); }

.dc-sol-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--dc-line);
}
.dc-sol-no {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    color: var(--dc-muted); font-variant-numeric: tabular-nums;
}
.dc-sol:hover .dc-sol-no { color: var(--dc-primary); }

/* 대표 제품 표시 — 채운 배지가 아니라 가는 선 라벨 */
.dc-sol-flag {
    display: inline-block; margin-left: auto;
    padding: 2px 10px; border: 1px solid var(--dc-text); border-radius: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--dc-text);
    white-space: nowrap;
}

.dc-sol-name { font-size: 21px; letter-spacing: -.03em; }
.dc-sol-tagline { font-size: 14px; color: var(--dc-primary); font-weight: 600; margin-top: 4px; }
.dc-sol-desc { margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: var(--dc-body); }
.dc-sol .dc-card-list { flex: 1; }
.dc-sol-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dc-line); }
.dc-sol-for { display: block; font-size: 13px; color: var(--dc-muted); margin-bottom: 8px; }

/* 솔루션 소개 페이지 — 제목 옆 라벨 / '이런 곳에 맞습니다' 줄 */
.dc-svc-title .dc-sol-flag { margin-left: 10px; vertical-align: 7px; }
.dc-sol-fit {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--dc-line);
    max-width: 62ch;
}
.dc-sol-fit span {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    color: var(--dc-muted); text-transform: uppercase; margin-bottom: 5px;
}
.dc-sol-fit strong { font-size: 16px; color: var(--dc-text); font-weight: 600; }

/* ==========================================================================
   구축사례 분류 탭
   ========================================================================== */
.dc-cattabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dc-cattab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border: 1px solid var(--dc-line); border-radius: 30px;
    background: #fff; font-size: 15px; font-weight: 600; color: var(--dc-body);
    transition: all .16s ease;
}
.dc-cattab:hover { border-color: var(--dc-primary); color: var(--dc-primary); }
.dc-cattab span {
    font-size: 12px; font-weight: 700; color: var(--dc-muted);
    background: var(--dc-bg-alt); border-radius: 20px; padding: 1px 8px;
}
.dc-cattab.active { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }
.dc-cattab.active span { background: rgba(255,255,255,.22); color: #fff; }
.dc-cattab-desc { margin-bottom: 32px; font-size: 15px; color: var(--dc-muted); }

/* ==========================================================================
   서비스 페이지 — 아이콘 없이 번호와 여백으로 정돈한 편집형 레이아웃
   ========================================================================== */
.dc-svc {
    display: grid; grid-template-columns: 132px 1fr; gap: 0 40px;
    padding: 56px 0;
    border-top: 1px solid var(--dc-line);
}
.dc-svc:first-of-type { border-top: 1px solid var(--dc-text); }

.dc-svc-index { display: flex; flex-direction: column; align-items: flex-start; }
.dc-svc-num {
    font-size: 46px; font-weight: 200; line-height: 1;
    color: var(--dc-text); letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
}
.dc-svc-rule {
    display: block; width: 34px; height: 1px;
    background: var(--dc-accent); margin-top: 18px;
}

.dc-svc-title {
    font-size: 30px; letter-spacing: -.04em; line-height: 1.3;
}
.dc-svc-lead {
    margin-top: 12px; font-size: 17px; font-weight: 500;
    color: var(--dc-primary); letter-spacing: -.02em;
}
.dc-svc-desc {
    margin-top: 16px; font-size: 16px; line-height: 1.9; color: var(--dc-body);
    max-width: 62ch;
}

.dc-svc-items { margin-top: 30px; }
.dc-svc-items-label {
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    color: var(--dc-muted); text-transform: uppercase; margin-bottom: 14px;
}
.dc-svc-items ul {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px;
}
.dc-svc-items li {
    position: relative; padding: 9px 0 9px 15px;
    font-size: 15px; color: var(--dc-body); line-height: 1.6;
    border-bottom: 1px solid var(--dc-line);
}
.dc-svc-items li::before {
    content: ''; position: absolute; left: 0; top: 18px;
    width: 5px; height: 1px; background: var(--dc-muted);
}

.dc-svc-actions { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 어두운 아웃라인 버튼 (서비스 페이지의 절제된 톤용) */
.dc-btn-line-dark {
    background: transparent; border-color: var(--dc-text); color: var(--dc-text);
}
.dc-btn-line-dark:hover { background: var(--dc-text); color: #fff; }

/* 서비스 페이지의 AI 활용 안내 한 줄 (아이콘 없이 텍스트만) */
.dc-ainote {
    margin-top: 26px; padding: 4px 0 4px 18px;
    border-left: 2px solid var(--dc-accent);
    font-size: 14.5px; line-height: 1.85; color: var(--dc-muted);
    max-width: 62ch;
}
.dc-ainote strong { color: var(--dc-body); font-weight: 600; }
.dc-ainote.lead {
    margin: 0 0 8px; padding: 6px 0 6px 20px;
    border-left-color: var(--dc-primary);
    font-size: 16px; color: var(--dc-body); max-width: 76ch;
}
.dc-ainote.lead strong { color: var(--dc-text); }

/* 문제-해결 (pains) */
.dc-pain {
    background: #fff; border: 1px solid var(--dc-line); border-radius: var(--dc-radius);
    padding: 26px 24px;
}
.dc-pain-q {
    font-size: 17px; font-weight: 700; color: var(--dc-text);
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;
}
.dc-pain-q b { color: var(--dc-danger); font-weight: 800; flex-shrink: 0; }
.dc-pain-a {
    font-size: 15px; color: var(--dc-body); display: flex; gap: 10px; align-items: flex-start;
    padding-top: 12px; border-top: 1px dashed var(--dc-line);
}
.dc-pain-a b { color: var(--dc-primary); font-weight: 800; flex-shrink: 0; }

/* ==========================================================================
   프로세스
   ========================================================================== */
.dc-process { counter-reset: step; }
.dc-process-item {
    display: grid; grid-template-columns: 92px 1fr 110px; gap: 24px; align-items: start;
    padding: 28px 0; border-bottom: 1px solid var(--dc-line);
}
.dc-process-item:last-child { border-bottom: 0; }
.dc-process-step {
    font-size: 34px; font-weight: 800; color: var(--dc-primary);
    opacity: .35; letter-spacing: -.04em; line-height: 1;
}
.dc-process-title { font-size: 20px; margin-bottom: 6px; }
.dc-process-desc { font-size: 15px; color: var(--dc-body); }
.dc-process-term {
    justify-self: end; padding: 5px 14px; border-radius: 20px;
    background: var(--dc-bg-alt); border: 1px solid var(--dc-line);
    font-size: 13px; color: var(--dc-muted); white-space: nowrap;
}

/* ==========================================================================
   요금제
   ========================================================================== */
.dc-plan {
    position: relative; background: #fff;
    border: 1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
    padding: 36px 30px; display: flex; flex-direction: column;
}
.dc-plan.featured {
    border-color: var(--dc-primary); border-width: 2px;
    box-shadow: var(--dc-shadow-lg); transform: translateY(-8px);
}
.dc-plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--dc-primary); color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 16px; border-radius: 20px; white-space: nowrap;
}
.dc-plan-name { font-size: 22px; }
.dc-plan-target { font-size: 14px; color: var(--dc-muted); margin-top: 4px; }
.dc-plan-price {
    margin: 22px 0; padding-bottom: 22px; border-bottom: 1px solid var(--dc-line);
    font-size: 40px; font-weight: 800; color: var(--dc-text); letter-spacing: -.04em; line-height: 1.1;
}
.dc-plan-price small { font-size: 15px; font-weight: 600; color: var(--dc-muted); margin-left: 4px; letter-spacing: 0; }
.dc-plan-price.negotiable { font-size: 28px; }
.dc-plan-features { flex: 1; }
.dc-plan-features li {
    position: relative; padding-left: 24px; font-size: 14.5px; line-height: 2;
    color: var(--dc-body);
}
.dc-plan-features li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--dc-primary); font-weight: 800;
}
.dc-plan .dc-btn { margin-top: 26px; }
.dc-plan-note {
    margin-top: 28px; padding: 20px 24px; background: var(--dc-bg-alt);
    border-radius: var(--dc-radius); font-size: 14px; color: var(--dc-body); line-height: 1.9;
}

/* ==========================================================================
   기술 스택 / 표
   ========================================================================== */
.dc-stack-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--dc-line); align-items: center; }
.dc-stack-row:last-child { border-bottom: 0; }
.dc-stack-label { font-weight: 700; color: var(--dc-text); }
.dc-stack-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-stack-tags span {
    padding: 6px 14px; background: #fff; border: 1px solid var(--dc-line);
    border-radius: 8px; font-size: 14px; color: var(--dc-body); font-weight: 500;
}

.dc-table th, .dc-table td { padding: 14px 16px; border-bottom: 1px solid var(--dc-line); font-size: 15px; text-align: left; }
.dc-table th { background: var(--dc-bg-alt); color: var(--dc-text); font-weight: 700; white-space: nowrap; }
.dc-table tbody tr:hover { background: #fbfcfe; }

/* ==========================================================================
   최신 소식 / 사례 카드
   ========================================================================== */
.dc-news-item {
    display: block; padding: 22px 0; border-bottom: 1px solid var(--dc-line);
}
.dc-news-item:last-child { border-bottom: 0; }
.dc-news-cat { font-size: 12px; font-weight: 700; color: var(--dc-primary); }
.dc-news-title {
    display: block; margin: 4px 0 6px; font-size: 17px; font-weight: 600; color: var(--dc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-news-item:hover .dc-news-title { color: var(--dc-primary); }
.dc-news-date { font-size: 13px; color: var(--dc-muted); }
.dc-empty {
    padding: 44px 20px; text-align: center; color: var(--dc-muted); font-size: 15px;
    background: var(--dc-bg-alt); border-radius: var(--dc-radius);
}

.dc-case {
    display: block; background: #fff; border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius); overflow: hidden; transition: all .22s ease;
}
.dc-case:hover { box-shadow: var(--dc-shadow-lg); transform: translateY(-4px); }
.dc-case-thumb {
    aspect-ratio: 16 / 10; background: var(--dc-bg-alt);
    display: flex; align-items: center; justify-content: center;
    color: var(--dc-muted); font-size: 34px; overflow: hidden;
}
.dc-case-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 첨부 이미지가 없는 사례용 자동 플레이스홀더 (제목 기준 고정 배색) */
.dc-case-ph {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.dc-case-ph::after {
    content: ''; position: absolute; right: -30%; top: -55%;
    width: 100%; padding-bottom: 100%; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.dc-case-ph-mark {
    position: relative; z-index: 1;
    font-size: 62px; font-weight: 800; color: #fff;
    opacity: .32; letter-spacing: -.04em; line-height: 1;
}
.dc-case-ph.ph-0 { background: linear-gradient(135deg, #0f1b33 0%, #1c3f8f 100%); }
.dc-case-ph.ph-1 { background: linear-gradient(135deg, #16264a 0%, #1b4dd8 100%); }
.dc-case-ph.ph-2 { background: linear-gradient(135deg, #113a52 0%, #00b8a9 130%); }
.dc-case-ph.ph-3 { background: linear-gradient(135deg, #1b3a8f 0%, #5b3fc4 100%); }
.dc-case-body { padding: 20px 22px; }
.dc-case-cat { font-size: 12px; font-weight: 700; color: var(--dc-accent); }
.dc-case-title { margin-top: 6px; font-size: 17px; color: var(--dc-text); }
/* 목록에서 클릭 시 외부 사이트로 이동하는 항목 표시 */
.dc-ext { color: var(--dc-primary); font-size: 14px; margin-left: 3px; vertical-align: 2px; }

/* ==========================================================================
   폼 (문의하기)
   ========================================================================== */
.dc-form { display: grid; gap: 20px; }
.dc-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dc-field { display: flex; flex-direction: column; gap: 8px; }
.dc-label { font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-label .req { color: var(--dc-danger); margin-left: 3px; }
.dc-input, .dc-select, .dc-textarea {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--dc-line); border-radius: 8px;
    font-family: inherit; font-size: 15px; color: var(--dc-text); background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.dc-input:focus, .dc-select:focus, .dc-textarea:focus {
    outline: none; border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px rgba(23,135,168,.12);
}
.dc-textarea { min-height: 190px; resize: vertical; line-height: 1.7; }
.dc-hint { font-size: 13px; color: var(--dc-muted); }
.dc-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--dc-body); }
.dc-check input { margin-top: 4px; }
.dc-agree-box {
    max-height: 160px; overflow-y: auto; padding: 16px 18px;
    background: var(--dc-bg-alt); border: 1px solid var(--dc-line); border-radius: 8px;
    font-size: 13px; line-height: 1.8; color: var(--dc-body);
}
.dc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dc-alert { padding: 16px 20px; border-radius: var(--dc-radius); font-size: 15px; margin-bottom: 24px; }
.dc-alert-error { background: #fdf0f0; border: 1px solid #f5c6c6; color: #a53434; }
.dc-alert-ok    { background: #eefaf3; border: 1px solid #bfe8d1; color: #1b7a45; }

.dc-contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.dc-contact-box {
    background: var(--dc-bg-alt); border-radius: var(--dc-radius-lg); padding: 30px 28px;
}
.dc-contact-box + .dc-contact-box { margin-top: 20px; }
.dc-contact-box h3 { font-size: 18px; margin-bottom: 16px; }
.dc-contact-list li { padding: 10px 0; border-bottom: 1px dashed var(--dc-line); font-size: 15px; }
.dc-contact-list li:last-child { border-bottom: 0; }
.dc-contact-list b { display: block; font-size: 13px; color: var(--dc-muted); font-weight: 600; margin-bottom: 2px; }

/* ==========================================================================
   로그인 / 회원가입 (코어 bbs/login.php · register.php 가 쓰는 bp-* 클래스)

   이 화면들은 테마와 무관하게 코어가 출력하므로, 테마 쪽에서 스타일을 맞춰준다.
   ========================================================================== */
.bp-auth-box {
    max-width: 460px; margin: 0 auto;
    background: #fff; border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-lg); padding: 40px 36px;
    box-shadow: var(--dc-shadow);
}
.bp-auth-box h2 {
    font-size: 24px; text-align: center; margin-bottom: 28px;
    letter-spacing: -.03em;
}
.bp-auth-form { display: flex; flex-direction: column; gap: 18px; }
.bp-form-group { display: flex; flex-direction: column; gap: 7px; }
.bp-form-label { font-size: 14px; font-weight: 700; color: var(--dc-text); }
.bp-required { color: var(--dc-danger); margin-left: 3px; }
.bp-form-input {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--dc-line); border-radius: 8px;
    font-family: inherit; font-size: 15px; color: var(--dc-text); background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.bp-form-input:focus {
    outline: none; border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px rgba(23, 135, 168, .12);
}

/* 코어 버튼 클래스 → 테마 버튼과 동일하게 */
.bp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 48px; padding: 0 24px;
    border: 1px solid transparent; border-radius: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    background: #fff; color: var(--dc-text); cursor: pointer;
    transition: all .18s ease;
}
.bp-btn-primary { background: var(--dc-primary); color: #fff; box-shadow: 0 6px 16px rgba(23,135,168,.25); }
.bp-btn-primary:hover { background: var(--dc-primary-dark); }
.bp-btn-block { width: 100%; }

.auth-link {
    margin-top: 6px; text-align: center;
    font-size: 14px; color: var(--dc-muted);
}

/* 회원가입 약관 동의 영역 */
.bp-agree-box { max-width: 620px; }
.bp-agree-intro { font-size: 14px; color: var(--dc-body); margin-bottom: 18px; line-height: 1.7; }
.bp-agree-item { border: 1px solid var(--dc-line); border-radius: var(--dc-radius); margin-bottom: 14px; overflow: hidden; }
.bp-agree-item-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 13px 16px; background: var(--dc-bg-alt);
    font-size: 14.5px; font-weight: 600; color: var(--dc-text);
}
.bp-agree-required { color: var(--dc-danger); font-size: 13px; font-weight: 700; }
.bp-agree-toggle {
    margin-left: auto; background: none; border: 0; padding: 0;
    font-size: 13px; color: var(--dc-muted); font-family: inherit; cursor: pointer;
}
.bp-agree-toggle:hover { color: var(--dc-primary); }
.bp-agree-scroll {
    max-height: 180px; overflow-y: auto; padding: 16px;
    font-size: 13px; line-height: 1.8; color: var(--dc-body);
    border-top: 1px solid var(--dc-line); background: #fff;
}
.bp-agree-content { white-space: pre-wrap; }
.bp-agree-all {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px; margin: 18px 0;
    background: var(--dc-primary-soft); border-radius: var(--dc-radius);
    font-size: 15px; font-weight: 600; color: var(--dc-text);
}
.bp-check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bp-check-text { font-size: 14.5px; color: var(--dc-body); }
.agree-check { flex-shrink: 0; }

@media (max-width: 768px) {
    .bp-auth-box { padding: 28px 20px; }
}

/* ==========================================================================
   푸터
   ========================================================================== */
.dc-footcta {
    background: linear-gradient(120deg, var(--dc-primary) 0%, #2c62e8 60%, var(--dc-accent) 160%);
    color: #fff; padding: 58px 0;
}
.dc-footcta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.dc-footcta h2 { font-size: 28px; color: #fff; letter-spacing: -.035em; }
.dc-footcta p { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 16px; }
.dc-footcta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-footcta .dc-btn-primary { background: #fff; color: var(--dc-primary); box-shadow: none; }
.dc-footcta .dc-btn-primary:hover { background: #f0f4ff; }

.dc-footer { background: var(--dc-navy); color: rgba(255,255,255,.6); padding: 62px 0 34px; font-size: 14px; }
.dc-footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* 푸터는 가로 여유가 있어 헤더보다 넓게 허용한다 (높이는 PHP 에서 1.3배) */
.dc-logo-foot .dc-logo-img,
.dc-logo-foot .dc-logo-img img { max-width: 400px; }
.dc-logo-foot .dc-logo-text strong { color: #fff; }
.dc-logo-foot .dc-logo-text small  { color: rgba(255,255,255,.45); }
.dc-footer-desc { margin-top: 14px; color: rgba(255,255,255,.5); }
.dc-footer-nav { display: flex; gap: 48px; flex-wrap: wrap; }
.dc-footer-col h3 { font-size: 15px; margin-bottom: 12px; }
.dc-footer-col h3 a { color: #fff; }
.dc-footer-col li { line-height: 2; }
.dc-footer-col a { color: rgba(255,255,255,.55); font-size: 14px; }
.dc-footer-col a:hover { color: #fff; }

.dc-footer-info { padding-top: 28px; }
.dc-footer-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; color: rgba(255,255,255,.5); font-size: 13.5px; }
.dc-footer-meta li span { color: rgba(255,255,255,.32); margin-right: 8px; }
.dc-footer-meta a { color: rgba(255,255,255,.62); }
.dc-footer-meta .dc-break { flex-basis: 100%; }
.dc-footer-bottom {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.dc-copy { color: rgba(255,255,255,.38); font-size: 13px; }
.dc-footer-links { display: flex; gap: 18px; }
.dc-footer-links a { color: rgba(255,255,255,.5); font-size: 13px; }
.dc-footer-links a:hover { color: #fff; }

.dc-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--dc-navy); color: #fff; border: 0; font-size: 18px;
    box-shadow: var(--dc-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s ease;
}
.dc-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   본문 콘텐츠(정적 페이지 공통 타이포)
   ========================================================================== */
.dc-prose h2 { font-size: 26px; margin: 48px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--dc-text); }
.dc-prose h2:first-child { margin-top: 0; }
.dc-prose h3 { font-size: 19px; margin: 30px 0 10px; }
.dc-prose p  { margin: 12px 0; font-size: 16px; line-height: 1.9; }
.dc-prose ul { margin: 12px 0; }
.dc-prose ul li { position: relative; padding-left: 18px; line-height: 1.95; }
.dc-prose ul li::before { content: ''; position: absolute; left: 3px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--dc-primary); }
.dc-prose ol { margin: 12px 0; padding-left: 22px; list-style: decimal; }
.dc-prose ol li { line-height: 1.95; }
.dc-prose strong { color: var(--dc-text); }

.dc-narrow { max-width: 860px; margin: 0 auto; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1024px) {
    .dc-gnb, .dc-header-tel { display: none; }
    /* GNB 가 사라지면 오른쪽으로 밀어줄 요소가 없어진다 → 햄버거를 우측 끝에 고정 */
    .dc-header-side { margin-left: auto; }
    /* 관리자·로그아웃 버튼은 모바일 메뉴 하단에 이미 있으므로 헤더에서는 숨긴다 */
    .dc-header-side .dc-btn { display: none; }
    .dc-burger { display: flex; }
    .dc-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .dc-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .dc-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .dc-hero-title { font-size: 42px; }
    .dc-plan.featured { transform: none; }
}

@media (max-width: 768px) {
    :root { --dc-header-h: 70px; --dc-gutter: 18px; }
    body { font-size: 15px; }

    /* 좁은 화면(360~390px)에서 로고가 햄버거 버튼을 화면 밖으로 밀어내지 않도록.
       로고는 줄어들 수 있게 하고, 슬로건은 생략한다. */
    .dc-header-inner { gap: 12px; }
    .dc-logo { min-width: 0; flex-shrink: 1; }
    .dc-logo-text { min-width: 0; }
    .dc-logo-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dc-logo-text small { display: none; }
    .dc-logo-img { max-width: min(230px, 52vw); }
    .dc-logo-img img { max-width: min(230px, 52vw); }
    /* 푸터는 햄버거 버튼과 겹칠 일이 없으니 좁은 화면에서도 넉넉히 */
    .dc-logo-foot .dc-logo-img,
    .dc-logo-foot .dc-logo-img img { max-width: min(300px, 72vw); }

    .dc-section { padding: 62px 0; }
    .dc-page { padding: 44px 0 64px; }
    .dc-grid-2, .dc-grid-3, .dc-grid-4 { grid-template-columns: 1fr; }
    .dc-hero { padding: 68px 0 60px; }
    .dc-hero-title { font-size: 32px; }
    .dc-hero-desc { font-size: 16px; }
    .dc-hero-actions .dc-btn { flex: 1; }
    .dc-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dc-stat { padding: 26px 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .dc-stat:nth-child(2n) { border-right: 0; }
    .dc-stat-value { font-size: 32px; }
    .dc-sec-title { font-size: 25px; }
    .dc-sec-desc { font-size: 15px; }
    .dc-pagehero { padding: 40px 0 34px; }
    .dc-pagehero-title { font-size: 26px; }
    .dc-process-item { grid-template-columns: 56px 1fr; }
    .dc-process-term { grid-column: 2; justify-self: start; margin-top: 8px; }
    .dc-process-step { font-size: 26px; }
    .dc-form-row { grid-template-columns: 1fr; gap: 20px; }
    .dc-svc { grid-template-columns: 1fr; gap: 0; padding: 38px 0; }
    .dc-svc-index { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 14px; }
    .dc-svc-num { font-size: 30px; }
    .dc-svc-rule { margin-top: 0; }
    .dc-svc-title { font-size: 23px; }
    .dc-svc-lead { font-size: 15.5px; }
    .dc-svc-desc { font-size: 15px; }
    .dc-svc-items ul { grid-template-columns: 1fr; }
    .dc-svc-actions .dc-btn { flex: 1; }
    .dc-cattab { padding: 8px 14px; font-size: 14px; }
    .dc-footcta-inner { flex-direction: column; align-items: flex-start; }
    .dc-footcta-actions { width: 100%; }
    .dc-footcta-actions .dc-btn { flex: 1; }
    .dc-footer-nav { gap: 28px; }
    .dc-stack-row { grid-template-columns: 1fr; gap: 10px; }
    .dc-top { right: 14px; bottom: 14px; }
}



/* ==========================================================================
   2부 · 공통 디자인 (ALLIT 테마에서 가져옴)
   컨셉 : "뭐 없나?" → "찾던 IT, 여기 다 있지!"
   색   : 딥 네이비 #102B3B / 테크 블루 #24A9CE / 아이스 블루 #EAF3F6 / 화이트
   글꼴 : Pretendard (본문) · Nanum Brush Script (큰 손글씨) · Nanum Pen Script (작은 손글씨)
   ========================================================================== */

:root {
    --al-navy:   #102B3B;
    --al-navy-2: #1B3E52;
    --al-blue:   #24A9CE;
    --al-blue-d: #1787A8;
    --al-ice:    #EAF3F6;
    --al-sky:    #F3FAFE;   /* 히어로 이미지 가장자리 색과 같다 */
    --al-ink:    #16242D;
    --al-muted:  #5B6B75;
    --al-line:   #DCE7EC;
    --al-bg:     #F7FAFB;
    --c-web: #E3F1FB; --k-web: #1E88D9;
    --c-shop: #E3F5E8; --k-shop: #1E8A4C;
    --c-ai: #FDE7EC; --k-ai: #D9476B;
    --c-ad: #FDF1DC; --k-ad: #C98512;
    --c-care: #EAF3F6; --k-care: #1787A8;
    --c-edu: #EEECFA; --k-edu: #6E62C9;
    --al-ok: #1F9D6B; --al-pilot: #C77A12; --al-dev: #6E62C9;
    --al-hand:  'Nanum Pen Script', cursive;
    --al-brush: 'Nanum Brush Script', cursive;
    --al-r: 18px;
    --al-max: 1180px;
    --dc-max: 1180px;
    --dc-font: Pretendard, 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

[hidden] { display: none !important; }
.al-body { font-family: var(--dc-font); color: var(--dc-body); }
.al-body :focus-visible { outline: 3px solid var(--al-blue); outline-offset: 2px; border-radius: 8px; }
.dcm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-wrap { max-width: var(--al-max); margin: 0 auto; padding: 0 20px; }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.al-btn, .dc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; height: auto; padding: 0 26px; border-radius: 999px;
    border: 1.5px solid transparent; font-size: 15.5px; font-weight: 700; line-height: 1.2;
    text-decoration: none; white-space: nowrap; transition: background .16s, color .16s, border-color .16s;
}
.dc-btn:hover { transform: none; }
.al-btn-main, .dc-btn-primary { background: var(--al-blue-d); color: #fff; box-shadow: none; }
.al-btn-main:hover, .dc-btn-primary:hover { background: var(--al-navy); color: #fff; }
.al-btn-line, .dc-btn-outline, .dc-btn-line-dark { background: #fff; border-color: var(--al-line); color: var(--al-navy); }
.al-btn-line:hover, .dc-btn-outline:hover, .dc-btn-line-dark:hover { border-color: var(--al-blue-d); color: var(--al-blue-d); background: #fff; }
.al-btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.al-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.al-btn-block, .dc-btn-block { display: flex; width: 100%; }
.dc-btn-lg { min-height: 54px; padding: 0 30px; font-size: 16.5px; }
.dc-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.bp-btn { border-radius: 999px; }
.bp-btn-primary { background: var(--al-blue-d); box-shadow: none; }
.bp-btn-primary:hover { background: var(--al-navy); }

.al-more { font-weight: 700; color: var(--al-blue-d); font-size: 15px; }
.al-more::after { content: " →"; }
.al-more:hover { color: var(--al-navy); }

/* ── 헤더 ─────────────────────────────────────────────────────────────── */
.al-hd { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.al-hd.is-compact { border-bottom-color: var(--al-line); box-shadow: 0 6px 20px rgba(16,43,59,.06); }
.al-hd-in { display: flex; align-items: center; gap: 24px; height: 74px; }
.al-logo { display: flex; align-items: center; gap: 10px; color: var(--al-navy); flex-shrink: 0; min-width: 0; }
.al-logo .dc-logo-img { display: block; }
.al-logo .dc-logo-img img { display: block; height: min(var(--dc-logo-h, 44px), 56px); width: auto; max-width: none; }
.al-logo-foot .dc-logo-img img { height: 40px; }
.al-logo-txt { line-height: 1; color: var(--al-navy); }
.al-logo-txt b { font-size: 25px; font-weight: 900; letter-spacing: -.01em; }
.al-logo-txt b i { font-style: normal; color: var(--al-blue); }
.al-logo-txt > span { font-size: 13px; font-weight: 800; color: var(--al-blue); margin-left: 4px; letter-spacing: .02em; }
.al-logo-txt small { display: block; margin-top: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--al-muted); }

.al-gnb { margin-left: auto; }
.al-gnb > ul { display: flex; gap: 2px; }
.al-gnb li { position: relative; }
.al-gnb > ul > li > a { display: block; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 15.5px; color: #2A3A44; }
.al-gnb > ul > li > a:hover, .al-gnb li.active > a { background: var(--al-ice); color: var(--al-navy); }
.al-gnb li.active > a { box-shadow: inset 0 -2px 0 var(--al-blue); }
.al-gnb-sub {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 180px; padding: 8px;
    background: #fff; border: 1px solid var(--al-line); border-radius: 14px; box-shadow: 0 16px 36px rgba(16,43,59,.12);
    opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s;
}
.al-gnb li.has-sub:hover .al-gnb-sub, .al-gnb li.has-sub:focus-within .al-gnb-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.al-gnb-sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--al-ink); white-space: nowrap; }
.al-gnb-sub a:hover { background: var(--al-ice); color: var(--al-blue-d); }

.al-hd-cta { display: inline-flex; align-items: center; gap: 10px; margin-left: 18px; padding: 12px 26px; border-radius: 999px; background: #0E72D5; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 8px 18px rgba(14,114,213,.22); }
.al-hd-cta:hover { background: var(--al-navy); color: #fff; }

.al-burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--al-line); border-radius: 12px; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.al-burger span { display: block; width: 20px; height: 2px; background: var(--al-navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
.al-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.al-burger.open span:nth-child(2) { opacity: 0; }
.al-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.al-mobile { position: fixed; left: 0; right: 0; bottom: 0; top: 74px; z-index: 99; background: #fff; overflow-y: auto; padding: 8px 20px 28px; border-top: 1px solid var(--al-line); }
.al-mobile-group { border-bottom: 1px solid #EEF3F5; }
.al-mobile-link { display: block; padding: 15px 4px; font-size: 17px; font-weight: 700; color: var(--al-navy); }
.al-mobile-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 0 4px 14px; }
.al-mobile-sub a { padding: 6px 0; font-size: 15px; color: var(--al-muted); }
.al-mobile-foot { display: grid; gap: 10px; margin-top: 22px; }

/* ── 하위 페이지 상단 ─────────────────────────────────────────────────── */
.al-subhero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--al-sky), #fff); padding: 54px 0 46px; text-align: center; }
.al-subhero-hand { font-family: var(--al-hand); font-size: 30px; line-height: 1.1; color: var(--al-blue-d); margin: 0 0 4px; transform: rotate(-2deg); }
.al-subhero-title { font-size: clamp(30px, 4vw, 42px); color: var(--al-navy); letter-spacing: -.03em; }
.al-subhero-title::after { content: ""; display: block; width: 72px; height: 6px; margin: 12px auto 0; border-radius: 6px; background: var(--al-blue); transform: rotate(-2deg); }
.al-subhero-sub { margin-top: 14px; font-size: 16.5px; color: var(--al-muted); }
.al-crumb { margin-top: 16px; display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--al-muted); }
.al-crumb a { color: var(--al-muted); }
.al-crumb strong { color: var(--al-navy); font-weight: 600; }
.al-subhero-q { position: absolute; font-family: var(--al-hand); font-size: 44px; color: #B7CEDA; line-height: 1; }
.al-subhero-q.q1 { left: 12%; top: 26%; transform: rotate(-12deg); }
.al-subhero-q.q2 { right: 14%; top: 46%; font-size: 34px; transform: rotate(10deg); }
.dc-page { padding: 56px 0 80px; }

/* ── 구간 공통 ────────────────────────────────────────────────────────── */
.al-sec { padding: 92px 0; }
.al-bg { background: var(--al-bg); }
.al-head { max-width: 720px; margin-bottom: 38px; }
.al-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.al-hand-label { font-family: var(--al-hand); font-size: 28px; line-height: 1.1; color: var(--al-blue-d); margin: 0 0 4px; }
.al-title { font-size: clamp(25px, 3.1vw, 34px); line-height: 1.32; letter-spacing: -.025em; color: var(--al-navy); }
.al-desc { margin-top: 10px; font-size: 17px; color: var(--al-muted); }
.al-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.al-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.al-card { display: block; background: #fff; border: 1px solid var(--al-line); border-radius: var(--al-r); padding: 26px; color: inherit; }
.al-card h3 { font-size: 19px; color: var(--al-navy); margin: 6px 0 6px; }
.al-card p { font-size: 15px; color: var(--al-muted); }
.al-n { font-family: var(--al-hand); font-size: 30px; color: var(--al-blue); line-height: 1; }
.al-sec-more { margin-top: 26px; }
.al-sec-more.is-center, .al-actions.is-center { text-align: center; justify-content: center; }
.al-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ── ① 히어로 ─────────────────────────────────────────────────────────── */
.al-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #EDF4FB 0%, #fff 100%); }

/* 배경 사진: 오른쪽에 노트북 · 머그컵, 왼쪽은 비어 있다 → 사진은 오른쪽 기준으로 맞추고 문구는 왼쪽에 둔다.
   사진 바닥색(#E9F2FA 근처)과 아래 검색 구간 색을 맞춰 경계가 보이지 않게 한다. */
.al-hero-top { position: relative; background: var(--al-hero-bg, none) right center / cover no-repeat, #F0F9FE; }
.al-hero-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(237,244,251,0) 0%, #EDF4FB 100%); pointer-events: none; }
.al-hero-in { position: relative; z-index: 1; display: flex; align-items: center; min-height: clamp(520px, 40vw, 640px); padding-top: 28px; padding-bottom: 56px; }
.al-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 500px; }
.al-big { position: relative; display: inline-block; margin: 0; font-family: var(--al-brush); font-weight: 400; font-size: clamp(84px, 11vw, 138px); line-height: .95; color: var(--al-navy); letter-spacing: -.01em; }
.al-big::before { content: ""; position: absolute; left: -46px; top: 6px; width: 40px; height: 40px;
    background: linear-gradient(var(--al-blue), var(--al-blue)) 50% 0 / 4px 16px no-repeat, linear-gradient(var(--al-blue), var(--al-blue)) 0 60% / 16px 4px no-repeat;
    transform: rotate(-30deg); }
.al-swoosh { display: block; width: min(300px, 80%); height: 22px; margin: 4px 0 26px; color: var(--al-blue); }
.al-hero-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--al-navy); margin: 0 0 14px; }
.al-hero-title em { font-style: normal; color: var(--al-blue-d); }
.al-hero-desc { font-size: 17px; color: var(--al-muted); }
.al-hero-desc b { color: var(--al-ink); }

/* 검색 */
.al-search { max-width: 470px; margin: 30px 0 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 24px; background: #fff; border: 1px solid #E5EDF1; border-radius: 999px; box-shadow: 0 14px 40px rgba(16,43,59,.12); color: var(--al-navy); }
.al-search svg { flex: none; }
.al-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16.5px; color: var(--al-ink); }
.al-search input::placeholder { color: #8D9DA6; }
.al-search button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--al-navy); color: #fff; font-size: 18px; }
.al-search button:hover { background: var(--al-blue-d); }
.al-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; padding-left: 18px; }
.al-tags button { border: 0; background: none; padding: 4px 4px; font: inherit; font-size: 14.5px; color: #4A5C66; }
.al-tags button:hover { color: var(--al-blue-d); }
.al-search-msg { min-height: 22px; margin-top: 4px; padding-left: 22px; font-size: 14px; color: var(--al-blue-d); }

/* 사진 위 고민 말풍선 (장식) — 오른쪽 사진 영역에 흩어 놓는다 */
.al-bubbles { position: absolute; top: 0; bottom: 0; left: 46%; right: 0; pointer-events: none; }
.al-bubble { position: absolute; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 20px 14px 14px;
    background: rgba(255,255,255,.96); border-radius: 26px; box-shadow: 0 14px 34px rgba(16,43,59,.12);
    font-family: var(--al-hand); font-size: 22px; line-height: 1.12; color: var(--al-navy); white-space: nowrap;
    opacity: 0; animation: al-pop .5s ease-out forwards; }
.al-bubble-ic { flex: none; width: 42px; height: 42px; }
.al-bubble-ic svg { display: block; width: 100%; height: 100%; }
/* 생각 말풍선 꼬리 (작은 동그라미 두 개) */
.al-bubble::before, .al-bubble::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 4px 10px rgba(16,43,59,.08); }
.al-bubble::before { width: 16px; height: 16px; bottom: -12px; left: 40%; }
.al-bubble::after  { width: 9px; height: 9px; bottom: -24px; left: calc(40% + 12px); }
.al-bubble.b1 { left: 12%; top: 12%; animation-delay: .2s; }
.al-bubble.b2 { left: 58%; top: 6%;  animation-delay: .5s; }
.al-bubble.b3 { left: 2%;  top: 44%; animation-delay: .8s; }
.al-bubble.b4 { left: 70%; top: 38%; animation-delay: 1.1s; }
.al-bubble.b2::before, .al-bubble.b4::before { left: 30%; }
.al-bubble.b2::after, .al-bubble.b4::after { left: calc(30% - 8px); }
@keyframes al-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* 아이콘 카드 4종 */
.al-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 6px 0 26px; }
.al-cat { display: block; text-align: center; padding: 8px 8px 0; color: inherit; transition: transform .15s; }
.al-cat:hover { transform: translateY(-4px); }
.al-blob { width: 132px; height: 112px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%; }
.al-blob svg { width: 52px; height: 52px; }
.al-cat h2 { font-size: 18px; margin: 0 0 6px; color: var(--al-navy); }
.al-cat p { min-height: 44px; margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--al-muted); }
.al-arr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; }
.c-web  .al-blob { background: var(--c-web); }  .c-web  .al-blob svg { color: var(--k-web); }  .c-web  .al-arr { background: var(--k-web); }
.c-shop .al-blob { background: var(--c-shop); } .c-shop .al-blob svg { color: var(--k-shop); } .c-shop .al-arr { background: var(--k-shop); }
.c-ai   .al-blob { background: var(--c-ai); }   .c-ai   .al-blob svg { color: var(--k-ai); }   .c-ai   .al-arr { background: var(--k-ai); }
.c-ad   .al-blob { background: var(--c-ad); }   .c-ad   .al-blob svg { color: var(--k-ad); }   .c-ad   .al-arr { background: var(--k-ad); }
.c-care .al-blob { background: var(--c-care); } .c-care .al-blob svg { color: var(--k-care); }
.c-edu  .al-blob { background: var(--c-edu); }  .c-edu  .al-blob svg { color: var(--k-edu); }

.al-scroll { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: #8D9DA6; padding-bottom: 24px; }
.al-scroll i { display: block; position: relative; width: 18px; height: 28px; margin: 0 auto 6px; border: 1.5px solid #A9B8C0; border-radius: 10px; }
.al-scroll i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: #A9B8C0; animation: al-wheel 1.6s infinite; }
@keyframes al-wheel { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }

/* ── ② 마을 선화 ──────────────────────────────────────────────────────── */
.al-town { position: relative; overflow: hidden; background: linear-gradient(180deg, #EEF5F8, #F8FBFC); }
.al-town::before { content: ""; position: absolute; left: -10%; right: -10%; top: -60px; height: 120px; background: #fff; border-radius: 0 0 50% 50%; }
.al-town-in { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; align-items: end; gap: 24px; padding-top: 90px; }
.al-town h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.32; letter-spacing: -.02em; color: var(--al-navy); margin: 0 0 12px; }
.al-town h2 em { font-style: normal; font-family: var(--al-brush); font-weight: 400; font-size: 1.45em; line-height: 1; color: var(--al-blue); }
.al-town p { margin: 0 0 56px; color: var(--al-muted); }
.al-town-art { position: relative; }
.al-town-art svg { display: block; width: 100%; height: auto; }
.al-town-note { position: absolute; right: 6%; top: 0; font-family: var(--al-hand); font-size: 30px; line-height: 1.05; color: var(--al-navy); transform: rotate(-6deg); }
.al-town-note::after { content: ""; display: block; width: 90%; height: 3px; margin-top: 2px; border-radius: 2px; background: var(--al-blue); }

/* ── ③ 왜 선올아이티 (남색) ───────────────────────────────────────────────── */
.al-navy { background: radial-gradient(900px 420px at 90% 0%, #1C4A63 0%, transparent 60%), var(--al-navy); color: #fff; }
.al-navy .al-title { color: #fff; }
.al-navy .al-desc { color: #C9DAE2; }
.al-navy .al-hand-label { color: var(--al-blue); }
.al-why-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.al-phil li { padding: 16px 0; font-size: 26px; font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.al-phil li:last-child { border: 0; }
.al-phil li small { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: #A9C3CF; }
.al-why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.al-navy .al-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.al-navy .al-card h3 { color: #fff; }
.al-navy .al-card p { color: #B9CCD5; }
.al-navy .al-card b { color: #fff; }

/* ── ④ 자체 솔루션 · 상태 배지 ───────────────────────────────────────── */
.al-sol { display: flex; flex-direction: column; }
.al-sol-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.al-sol h3 { margin: 0; font-size: 20px; }
.al-sol h3 small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--al-muted); }
.al-sol p { flex: 1; margin-bottom: 14px; }
.al-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.al-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.al-st-ok { color: var(--al-ok); background: #E4F5EE; }
.al-st-pilot { color: var(--al-pilot); background: #FCF1E1; }
.al-st-dev { color: var(--al-dev); background: #EEECFA; }
.al-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; color: var(--al-muted); }

/* ── ⑤ 포트폴리오 ─────────────────────────────────────────────────────── */
.al-case { padding: 0; overflow: hidden; transition: transform .18s, box-shadow .18s; }
a.al-case:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,43,59,.1); }
.al-case-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--al-ice); }
.al-case-thumb img { width: 100%; height: 100%; object-fit: cover; }
.al-kind { position: absolute; left: 14px; top: 14px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; background: var(--al-navy); color: #fff; }
.al-kind.is-proto { background: #fff; color: var(--al-navy); border: 1.5px solid var(--al-navy); }
.al-case-body { padding: 20px 22px 24px; }
.al-case-body h2, .al-case-body h3 { margin: 0 0 12px; font-size: 18px; color: var(--al-navy); }
.al-case-body dl { display: grid; grid-template-columns: 52px 1fr; row-gap: 6px; margin: 0; font-size: 14.5px; }
.al-case-body dt { color: var(--al-blue-d); font-weight: 700; }
.al-case-body dd { margin: 0; color: var(--al-ink); }
.dc-case-ph.ph-0 { background: linear-gradient(135deg, #102B3B 0%, #1787A8 100%); }
.dc-case-ph.ph-1 { background: linear-gradient(135deg, #1B3E52 0%, #24A9CE 100%); }
.dc-case-ph.ph-2 { background: linear-gradient(135deg, #CFE6EE 0%, #FDF1DC 100%); }
.dc-case-ph.ph-2 .dc-case-ph-mark { color: var(--al-navy); opacity: .25; }
.dc-case-ph.ph-3 { background: linear-gradient(135deg, #1787A8 0%, #6E62C9 100%); }

/* ── ⑥ 관리 요금 ──────────────────────────────────────────────────────── */
.al-event { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 26px; padding: 18px 24px; border-radius: var(--al-r); background: var(--al-navy); color: #fff; }
.al-event > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.al-event-lb { font-family: var(--al-hand); font-size: 25px; line-height: 1; color: var(--al-blue); }
.al-event strong { font-size: 19px; color: #fff; }
.al-event strong em { font-style: normal; color: var(--al-blue); }
.al-event-cond { font-size: 14.5px; color: #A9C3CF; }
.al-event-page { display: block; }
.al-event-page ul { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.al-event-page li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.8; color: #C9DAE2; }
.al-event-page li::before { content: "·"; position: absolute; left: 2px; }
.al-event-page li b { color: #fff; }

.al-plan { position: relative; display: flex; flex-direction: column; }
.al-plan.is-pick { border: 2px solid var(--al-blue); box-shadow: 0 14px 34px rgba(36,169,206,.14); }
.al-pick { position: absolute; top: -16px; right: 20px; padding: 0 14px; border-radius: 999px; background: var(--al-blue); color: #fff; font-family: var(--al-hand); font-size: 24px; line-height: 1.4; transform: rotate(4deg); }
.al-plan h3 { margin: 0; font-size: 14px; letter-spacing: .12em; color: var(--al-blue-d); }
.al-plan-for { margin: 2px 0 12px; font-weight: 700; font-size: 17px; color: var(--al-navy) !important; }
.al-plan-price { font-size: 30px; font-weight: 800; color: var(--al-navy); letter-spacing: -.02em; }
.al-plan-price small { font-size: 15px; font-weight: 600; color: var(--al-muted); }
.al-plan ul { margin-top: 16px; border-top: 1px solid var(--al-line); }
.al-plan li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px dashed #E3ECF0; font-size: 14.5px; color: var(--al-ink); }
.al-plan li::before { content: "✓"; position: absolute; left: 2px; color: var(--al-blue-d); font-weight: 800; }
.al-plan li.no { color: #8F9EA6; }
.al-plan li.no::before { content: "–"; color: #B8C5CC; }
.al-plan li.cond { color: var(--al-pilot); font-weight: 600; }
.al-price-foot { margin-top: 18px; font-size: 14.5px; color: var(--al-muted); }
.al-price-foot .al-more { margin-left: 8px; }

/* ── ⑦ 진행 절차 ──────────────────────────────────────────────────────── */
.al-steps { display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: s; margin: 0; padding: 0; }
.al-steps li { position: relative; padding: 0 10px; text-align: center; }
.al-steps li::before { counter-increment: s; content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: 50%; border: 2px solid var(--al-blue); background: #fff; font-family: var(--al-hand); font-size: 32px; color: var(--al-navy); }
.al-steps li::after { content: ""; position: absolute; top: 28px; left: 50%; width: 100%; border-top: 2px dashed #BFDCE6; }
.al-steps li:last-child::after { display: none; }
.al-steps b { display: block; color: var(--al-navy); }
.al-steps span { font-size: 13.5px; color: var(--al-muted); }
.al-steps-page { margin-bottom: 44px; }

/* ── 마무리 CTA · 푸터 ───────────────────────────────────────────────── */
.al-cta-sec { padding: 20px 0 0; }
.al-cta { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 52px 48px; border-radius: 26px;
    background: radial-gradient(700px 300px at 100% 0%, #1C4A63 0%, transparent 60%), var(--al-navy); color: #fff; }
.al-cta-hand { margin: 0; font-family: var(--al-hand); font-size: 30px; line-height: 1.1; color: var(--al-blue); }
.al-cta h2 { margin: 4px 0 8px; font-size: clamp(26px, 3vw, 34px); color: #fff; }
.al-cta p { color: #C9DAE2; }
.al-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.al-cta .al-btn-main { background: var(--al-blue); }
.al-cta .al-btn-main:hover { background: #fff; color: var(--al-navy); }

.al-ft { margin-top: 92px; padding: 46px 0 40px; background: #0B1F2B; color: #9FB3BD; font-size: 14px; }
.al-ft-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.al-logo-foot .al-logo-txt, .al-logo-foot .al-logo-txt b { color: #fff; }
.al-logo-foot .al-logo-txt small { color: #7F95A0; }
.al-ft-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.al-ft-links a { color: #D3E0E6; font-weight: 600; }
.al-ft-links a:hover { color: #fff; }
.al-ft-info { margin: 22px 0 6px; line-height: 2; }
.al-ft-info p { margin: 0; }
.al-ft-info span + span::before { content: "|"; margin: 0 10px; color: #3B5160; }
.al-ft-info em { font-style: normal; color: #6F8590; margin-right: 4px; }
.al-ft-info a { color: #D3E0E6; }
.al-ft-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); }
.al-ft-legal { display: flex; gap: 16px; }
.al-ft-legal a { color: #9FB3BD; }
.al-ft-legal a strong { color: #D3E0E6; }
.al-copy { color: #6F8590; }

.al-fixbar { display: none; }
.dc-top { background: var(--al-navy); border-radius: 50%; }

/* ── 하위 페이지 ──────────────────────────────────────────────────────── */
.al-page-sec { margin-top: 72px; }
.al-page-sec:first-child { margin-top: 0; }
.al-page-sec.is-center { text-align: center; }
.al-lead { margin: 0 0 32px; font-size: 17px; line-height: 1.85; color: var(--dc-body); }
.al-lead strong { color: var(--al-ink); }
.al-sub-title { margin: 36px 0 10px; font-size: 19px; color: var(--al-navy); }
.al-note-line { margin-top: 18px; font-size: 15px; color: var(--al-muted); }
.al-note-line b { color: var(--al-navy); }
.al-table-scroll { overflow-x: auto; }
.al-cell-note { display: block; margin-top: 4px; font-weight: 400; color: var(--al-muted); }

.al-about-intro { max-width: 820px; margin: 0 auto 8px; text-align: center; }
.al-about-intro h2 { font-size: clamp(28px, 3.6vw, 38px); color: var(--al-navy); margin-bottom: 14px; }
.al-about-intro p { margin-top: 10px; font-size: 17px; line-height: 1.85; }
.al-about-intro strong { color: var(--al-navy); }
.al-phil-card h3 { font-size: 22px; }
.al-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.al-brand { padding: 22px; border-radius: var(--al-r); background: var(--al-ice); }
.al-brand b { display: block; font-size: 18px; font-weight: 900; color: var(--al-navy); letter-spacing: .02em; }
.al-brand span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--al-muted); }

/* 서비스 바로가기 */
.al-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.al-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid var(--al-line); border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; color: var(--al-navy); }
.al-jump a:hover { border-color: var(--al-blue-d); }
.al-jump-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.al-jump-ic svg { width: 20px; height: 20px; }
.al-jump .c-web .al-jump-ic { background: var(--c-web); color: var(--k-web); }
.al-jump .c-ai .al-jump-ic { background: var(--c-ai); color: var(--k-ai); }
.al-jump .c-ad .al-jump-ic { background: var(--c-ad); color: var(--k-ad); }
.al-jump .c-care .al-jump-ic { background: var(--c-care); color: var(--k-care); }
.al-jump .c-edu .al-jump-ic { background: var(--c-edu); color: var(--k-edu); }

/* 서비스 · 솔루션 상세 블록 */
.al-svc { display: grid; grid-template-columns: 170px 1fr; gap: 0 44px; padding: 52px 0; border-top: 1px solid var(--al-line); scroll-margin-top: 90px; }
.al-svc-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.al-svc-side .al-blob { width: 112px; height: 96px; margin: 0; }
.al-svc-side .al-blob svg { width: 44px; height: 44px; }
.al-svc-brand { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--al-blue-d); }
.al-svc-body h2 { font-size: clamp(24px, 2.8vw, 30px); color: var(--al-navy); letter-spacing: -.03em; }
.al-svc-lead { margin-top: 10px; font-size: 17.5px; font-weight: 600; color: var(--al-blue-d); }
.al-svc-desc { margin-top: 14px; max-width: 64ch; font-size: 16px; line-height: 1.9; }
.al-svc-label { margin: 28px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--al-muted); }
.al-check { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
.al-check li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--al-line); font-size: 15px; color: var(--al-ink); }
.al-check li::before { content: "✓"; position: absolute; left: 2px; top: 9px; color: var(--al-blue-d); font-weight: 800; }
.al-check li b { color: var(--al-navy); }
.al-fit { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--al-line); }
.al-fit span { display: block; font-family: var(--al-hand); font-size: 22px; color: var(--al-blue-d); line-height: 1.1; }
.al-fit strong { font-size: 16px; color: var(--al-navy); }

/* 기존 dc-* 요소를 사이트 톤으로 */
.dc-prose h2 { border-bottom-color: var(--al-navy); color: var(--al-navy); }
.dc-table { border-radius: 12px; overflow: hidden; }
.dc-table th { background: var(--al-ice); color: var(--al-navy); }
.dc-process-step { font-family: var(--al-hand); font-weight: 400; font-size: 42px; color: var(--al-blue); opacity: 1; }
.dc-process-term { background: var(--al-ice); border-color: transparent; color: var(--al-blue-d); font-weight: 600; }
.dc-plan { border-radius: var(--al-r); }
.dc-plan.featured { border-color: var(--al-blue); }
.dc-plan-badge { background: var(--al-blue); }
.dc-cattab { border-radius: 999px; }
.dc-cattab.active { background: var(--al-navy); border-color: var(--al-navy); }
.dc-contact-box { background: var(--al-bg); border: 1px solid var(--al-line); }
.dc-empty { background: var(--al-bg); border: 1px dashed var(--al-line); }
.dc-ainote.lead { border-left-color: var(--al-blue); }

/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .al-gnb > ul > li > a { padding: 10px 10px; font-size: 15px; }
}
@media (max-width: 1024px) {
    .al-gnb, .al-hd-cta { display: none; }
    .al-burger { display: flex; }
    /* 태블릿 이하: 문구를 위에, 사진(노트북 · 머그컵)은 아래쪽에 보이도록 위를 흰 하늘색으로 덮는다 */
    .al-hero-top { background:
        linear-gradient(180deg, #F0F9FE 0%, #F0F9FE 42%, rgba(240,249,254,.85) 52%, rgba(240,249,254,0) 66%),
        var(--al-hero-bg, none) 78% 100% / auto 40% no-repeat, #F0F9FE; }
    .al-hero-in { justify-content: center; align-items: flex-start; text-align: center; min-height: 860px; padding-top: 36px; }
    .al-hero-copy { margin: 0 auto; }
    .al-big::before { display: none; }
    .al-swoosh { margin-left: auto; margin-right: auto; }
    .al-search { margin-left: auto; margin-right: auto; }
    .al-tags { justify-content: center; padding-left: 0; }
    .al-search-msg { padding-left: 0; text-align: center; }
    /* 말풍선은 아래쪽 사진 위에 2개만 */
    .al-bubbles { left: 0; right: 0; top: auto; bottom: 0; height: 40%; }
    .al-bubble { font-size: 18px; padding: 10px 16px 10px 10px; gap: 8px; }
    .al-bubble-ic { width: 32px; height: 32px; }
    .al-bubble.b1 { left: 6%; top: 6%; }
    .al-bubble.b2 { left: auto; right: 6%; top: 20%; }
    .al-bubble.b3, .al-bubble.b4 { display: none; }
    .al-cats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .al-grid3 { grid-template-columns: repeat(2, 1fr); }
    .al-brands { grid-template-columns: repeat(2, 1fr); }
    .al-town-in { grid-template-columns: 1fr; text-align: center; }
    .al-town p { margin-bottom: 20px; }
    .al-why-wrap { grid-template-columns: 1fr; gap: 28px; }
    .al-steps { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
    .al-steps li:nth-child(3)::after { display: none; }
    .al-cta { flex-direction: column; align-items: flex-start; padding: 42px 30px; }
    .al-svc { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
    .al-svc-side { flex-direction: row; align-items: center; }
}
@media (max-width: 768px) {
    .al-wrap { padding: 0 16px; }
    .al-hd-in { height: 64px; }
    .al-mobile { top: 64px; }
    .al-logo-txt b { font-size: 22px; }
    .al-hero-top { background-size: auto, auto 36%, auto; background-position: 0 0, 80% 100%, 0 0; }
    .al-hero-in { min-height: 780px; padding-top: 28px; }
    .al-bubbles { height: 36%; }
    .al-bubble { font-size: 16px; }
    .al-bubble-ic { width: 28px; height: 28px; }
    .al-bubble.b1 { left: 3%; top: 4%; }
    .al-bubble.b2 { right: 3%; top: 24%; }
    .al-search { margin-top: 24px; padding-left: 18px; }
    .al-search input { font-size: 15.5px; }
    .al-blob { width: 112px; height: 96px; }
    .al-blob svg { width: 44px; height: 44px; }
    .al-cat p { font-size: 13.5px; }
    .al-sec { padding: 64px 0; }
    .al-grid2, .al-grid3, .al-why, .al-check { grid-template-columns: 1fr; }
    .al-phil li { font-size: 22px; }
    .al-steps { grid-template-columns: 1fr 1fr; }
    .al-steps li:nth-child(3)::after { display: block; }
    .al-steps li:nth-child(2n)::after { display: none; }
    .al-cta { padding: 34px 22px; border-radius: 18px; }
    .al-cta-actions, .al-cta-actions .al-btn { width: 100%; }
    .al-town-note { font-size: 22px; right: 2%; }
    .al-subhero { padding: 40px 0 34px; }
    .al-subhero-q { display: none; }
    .al-ft-info span { display: block; }
    .al-ft-info span + span::before { display: none; }
    .al-ft { margin-top: 64px; padding-bottom: 96px; }   /* 하단 고정 바에 가리지 않게 */

    /* 휴대폰 하단 고정 바 */
    .al-fixbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.96); border-top: 1px solid var(--al-line); transition: transform .2s; }
    .al-fixbar.is-single { grid-template-columns: 1fr; }
    .al-fixbar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-weight: 800; }
    .al-fixbar-tel { border: 1.5px solid var(--al-line); color: var(--al-navy); }
    .al-fixbar-ask { background: var(--al-blue-d); color: #fff; }
    html.fixbar-hide .al-fixbar { transform: translateY(110%); }
    .dc-top { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .al-body * { transition: none !important; }
    .al-scroll i::after { animation: none; }
    .al-bubble { animation: none; opacity: 1; }
}


/* ==========================================================================
   3부 · 선올아이티
   컨셉 : 이름 세 글자가 곧 약속이다 — 선(善) · 올(All) · 아이티(IT)
   색   : 로고에서 뽑은 색 — 선 = 잎 초록 #3A9E4F / 올 = 하늘 #1590CC / 아이티 = 진한 파랑 #0B3F86
   ========================================================================== */
:root {
    /* 로고(2026-10-19)에서 뽑은 색 */
    --so-seon: #3A9E4F;     /* 잎 초록 */
    --so-seon-soft: #E9F5EA;
    --so-all:  #1590CC;     /* S 하늘색 (글자용으로 한 단계 진하게) */
    --so-all-soft: #E4F4FA;
    --so-it:   #0B3F86;     /* S 진한 파랑 */
    --so-it-soft: #E7EEF8;
}

.so-t-seon { color: var(--so-seon); }
.so-t-all  { color: var(--so-all); }
.so-t-it   { color: var(--so-it); }

/* ── 글자 로고 ─────────────────────────────────────────────────────────── */
.so-seal {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: var(--so-seon); color: #fff; font-size: 24px; font-weight: 700; line-height: 1;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Serif KR', serif;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.so-word { display: block; line-height: 1; }
.so-word b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.03em; }
.so-word b em { font-style: normal; }
.so-word small { display: block; margin-top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--al-muted); }
.al-logo-foot .so-t-it { color: #fff; }
.al-logo-foot .so-word small { color: #7F95A0; }
.al-logo-foot .so-t-seon { color: #5CC79A; }
.al-logo-foot .so-t-all { color: #4CC3E8; }

/* ── 세 글자 카드 (메인 · 회사소개) ──────────────────────────────────── */
.so-names { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.so-name {
    --tone: var(--so-it); --tone-soft: var(--so-it-soft);
    position: relative; overflow: hidden; padding: 30px 28px 28px; border-radius: var(--al-r);
    background: #fff; border: 1px solid var(--al-line); border-top: 6px solid var(--tone);
}
.so-tone-seon { --tone: var(--so-seon); --tone-soft: var(--so-seon-soft); }
.so-tone-all  { --tone: var(--so-all);  --tone-soft: var(--so-all-soft); }
.so-tone-it   { --tone: var(--so-it);   --tone-soft: var(--so-it-soft); }
.so-name::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--tone-soft); z-index: 0; }
.so-name > * { position: relative; z-index: 1; }
.so-name-mark { margin: 0 0 14px; font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--tone); }
.so-name-mark small { margin-left: 8px; font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--al-muted); }
.so-name h3 { margin: 0 0 8px; font-size: 20px; color: var(--al-navy); }
.so-name p:last-child { font-size: 15px; color: var(--al-muted); }
.so-promise { padding-bottom: 72px; }

/* 회사소개 큰 이름 */
.so-name-big { font-size: clamp(46px, 8vw, 80px) !important; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }

/* 남색 구간의 세 글자 목록 */
.al-navy .al-phil li { font-size: 21px; display: flex; align-items: baseline; gap: 14px; }
.al-navy .al-phil li b { flex: none; min-width: 74px; font-size: 30px; font-weight: 900; }
.al-navy .so-t-it   { color: #fff; }
.al-navy .so-t-seon { color: #5CC79A; }
.al-navy .so-t-all  { color: #4CC3E8; }

/* 하위 페이지 제목 밑줄 = 세 글자 색 */
.al-subhero-title::after { width: 96px; background: linear-gradient(90deg, var(--so-seon) 0 33.3%, var(--so-all) 33.3% 66.6%, var(--so-it) 66.6% 100%); transform: none; }
.al-subhero-hand { color: var(--so-seon); }
.al-hand-label { color: var(--so-seon); }
.al-navy .al-hand-label { color: #5CC79A; }

@media (max-width: 1024px) {
    .so-names { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .so-seal { width: 36px; height: 36px; font-size: 20px; }
    .so-word b { font-size: 21px; }
    .so-name-mark { font-size: 44px; }
    .al-navy .al-phil li { font-size: 18px; }
    .al-navy .al-phil li b { min-width: 60px; font-size: 26px; }
}

/* ── 로고 이미지 (2026-10-19 확정 로고) ─────────────────────────────── */
.al-logo .dc-logo-img img { height: min(var(--dc-logo-h, 54px), 60px); }
.al-logo-foot .dc-logo-img img { height: 58px; }
.so-ft-brand { display: flex; flex-direction: column; gap: 12px; }
.so-slogan { margin: 0; font-size: 14px; color: #9FB3BD; }
.al-hd-cta { background: var(--so-it); box-shadow: 0 8px 18px rgba(11,63,134,.22); }
.al-hd-cta:hover { background: var(--so-seon); }
@media (max-width: 768px) {
    .al-logo .dc-logo-img img { height: 46px; }
    .al-logo-foot .dc-logo-img img { height: 50px; }
}

/* ── 회사소개 : 로고에 담긴 4가지 의미 ───────────────────────────────── */
.so-logo-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.so-logo-box { padding: 40px 32px; border-radius: var(--al-r); text-align: center;
    background: linear-gradient(135deg, var(--so-all-soft) 0%, #fff 55%, var(--so-seon-soft) 100%); border: 1px solid var(--al-line); }
.so-logo-box img { width: 100%; max-width: 320px; height: auto; }
.so-logo-box p { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--al-navy); }
.so-meanings { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.so-meanings li { display: flex; gap: 16px; align-items: flex-start; }
.so-mean-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; }
.so-mean-ic svg { width: 26px; height: 26px; }
.so-mean-leaf .so-mean-ic, .so-mean-sprout .so-mean-ic { background: var(--so-seon-soft); color: var(--so-seon); }
.so-mean-wave .so-mean-ic { background: var(--so-it-soft); color: var(--so-it); }
.so-mean-heart .so-mean-ic { background: linear-gradient(135deg, var(--so-it-soft), var(--so-seon-soft)); color: var(--so-seon); }
.so-meanings h3 { margin: 2px 0 6px; font-size: 18px; color: var(--al-navy); }
.so-meanings p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--al-muted); }
@media (max-width: 1024px) {
    .so-logo-story { grid-template-columns: 1fr; gap: 28px; }
}

/* ── 제작 비용 페이지 ───────────────────────────────────────────────── */
/* FAQ 아코디언: 게시판이 아닌 페이지에서도 쓰도록 게시판 스킨(corp)의 규칙을 그대로 가져온다 */
.cb-faq { border-top: 2px solid var(--dc-text); }
.cb-faq-item { border-bottom: 1px solid var(--dc-line); }
.cb-faq-q {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 20px 8px; background: none; border: 0; text-align: left;
}
.cb-faq-q:hover .cb-faq-subject { color: var(--dc-primary); }
.cb-faq-mark {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    background: var(--dc-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.cb-faq-mark.is-a { background: var(--dc-bg-alt); color: var(--dc-primary); border: 1px solid var(--dc-line); }
.cb-faq-subject { flex: 1; font-size: 16px; font-weight: 600; color: var(--dc-text); line-height: 1.5; }
.cb-faq-subject em { font-style: normal; color: var(--dc-muted); font-weight: 500; font-size: 14px; }
.cb-faq-arrow { color: var(--dc-muted); transition: transform .2s ease; }
.cb-faq-item.open .cb-faq-arrow { transform: rotate(180deg); }
.cb-faq-a {
    display: none; gap: 14px; padding: 4px 8px 24px 8px;
}
.cb-faq-item.open .cb-faq-a { display: flex; }
.cb-faq-content { flex: 1; font-size: 15px; line-height: 1.85; color: var(--dc-body); padding-top: 3px; }
.cb-faq-content img { max-width: 100%; }

.so-cost-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.so-cost-kind { position: relative; color: inherit; }
.so-cost-kind h2 { margin: 2px 0 6px; font-size: 24px; color: var(--al-navy); }
.so-cost-kind p { margin: 0; }
.so-cost-kind.is-on { border: 2px solid var(--so-seon); background: linear-gradient(135deg, #fff 60%, var(--so-seon-soft)); }
a.so-cost-kind:hover { border-color: var(--so-all); }
.so-cost-tag { display: inline-block; font-family: var(--al-hand); font-size: 24px; line-height: 1.1; color: var(--so-seon); }
a.so-cost-kind .so-cost-tag { color: var(--so-all); }

.so-build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.so-build { position: relative; display: flex; flex-direction: column; }
.so-build.is-base { border: 2px solid var(--so-seon); }
.so-build.is-base .al-pick { background: var(--so-seon); }
.so-build h3 { margin: 0 0 6px; font-size: 18px; }
.so-build-price { margin: 0 0 14px; font-size: 28px; font-weight: 900; letter-spacing: -.02em; color: var(--so-it); }
.so-build dl { display: grid; grid-template-columns: 78px 1fr; row-gap: 4px; margin: 0 0 12px; font-size: 14.5px; }
.so-build dt { color: var(--al-muted); }
.so-build dd { margin: 0; color: var(--al-ink); font-weight: 600; }
.so-build-note { margin-top: auto !important; padding-top: 12px; border-top: 1px dashed var(--al-line); font-size: 14px !important; }

.so-quote { margin-top: 22px; padding: 22px 24px; border-radius: var(--al-r); background: var(--al-bg); border: 1px dashed var(--al-line); }
.so-quote h3 { margin: 0 0 10px; font-size: 17px; color: var(--al-navy); }
.so-quote ul { margin: 0; padding: 0; list-style: none; }
.so-quote li { display: grid; grid-template-columns: 200px 1fr auto; gap: 6px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--al-line); font-size: 15px; }
.so-quote li:last-child { border-bottom: 0; }
.so-quote li b { color: var(--al-navy); }
.so-quote li span { color: var(--al-muted); }

.so-check-1 { grid-template-columns: 1fr !important; }
.so-check-x li::before { content: "＋"; color: var(--al-muted); }

/* 메인 요금 구간 : 제작비 줄 */
.so-build-strip { display: grid; grid-template-columns: auto repeat(3, 1fr) auto; gap: 14px; align-items: stretch; margin-bottom: 34px; }
.so-build-strip-label { display: flex; flex-direction: column; justify-content: center; padding-right: 6px; }
.so-build-strip-label b { font-size: 20px; color: var(--al-navy); }
.so-build-strip-label span { font-family: var(--al-hand); font-size: 22px; color: var(--so-seon); line-height: 1.1; }
.so-build-mini { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--al-line); }
.so-build-mini p { margin: 0; font-size: 14px; color: var(--al-muted); }
.so-build-mini strong { display: block; margin-top: 2px; font-size: 22px; font-weight: 900; color: var(--so-it); }
.so-build-mini small { font-size: 13px; color: var(--al-muted); }
.so-build-strip .al-more { align-self: center; white-space: nowrap; }
.so-plans-label { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--al-navy); }
.so-plans-label span { font-family: var(--al-hand); font-size: 22px; font-weight: 400; color: var(--so-all); margin-left: 6px; }

@media (max-width: 1024px) {
    .so-build-grid { grid-template-columns: repeat(2, 1fr); }
    .so-build-strip { grid-template-columns: repeat(3, 1fr); }
    .so-build-strip-label { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: baseline; }
    .so-build-strip .al-more { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .so-cost-kinds, .so-build-grid { grid-template-columns: 1fr; }
    .so-build-strip { grid-template-columns: 1fr; }
    .so-quote li { grid-template-columns: 1fr; }
}

/* ── 오픈 이벤트 (제작비 0원) ─────────────────────────────────────────
   모든 페이지 맨 위 알림 띠(.so-evbar) + 큰 배너(.so-ev).
   강조는 색 · 크기로만 한다. 깜빡임 · 카운트다운 같은 재촉 장치는 쓰지 않는다. */
.so-evbar { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 16px;
    background: linear-gradient(90deg, var(--so-it) 0%, #0E5BA8 50%, var(--so-seon) 100%); color: #fff; font-size: 14.5px; line-height: 1.3; text-align: center; }
.so-evbar:hover { color: #fff; }
.so-evbar-lb { flex: none; padding: 2px 9px; border-radius: 6px; background: #FFD84D; color: var(--so-it); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.so-evbar-txt { font-weight: 700; }
.so-evbar-go { flex: none; font-weight: 700; color: #FFE68A; }
.so-evbar:hover .so-evbar-go { text-decoration: underline; }

.so-ev-sec { padding: 8px 0 20px; background: #fff; }
.so-ev { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center;
    padding: 38px 44px; border-radius: 24px; color: #fff; scroll-margin-top: 100px;
    background: radial-gradient(600px 300px at 100% 0%, rgba(58,158,79,.55) 0%, transparent 65%),
                radial-gradient(500px 260px at 0% 100%, rgba(21,144,204,.45) 0%, transparent 60%),
                var(--so-it);
    box-shadow: 0 20px 48px rgba(11,63,134,.25); }
.so-ev::after { content: "0"; position: absolute; right: -10px; bottom: -70px; font-size: 300px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.06); pointer-events: none; }
.so-ev > * { position: relative; z-index: 1; }
.so-ev-lb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .12em; color: #FFD84D; }
.so-ev-remain { padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.so-ev-remain b { color: #FFD84D; font-size: 15px; }
.so-ev-remain.is-closed { background: rgba(255,255,255,.08); color: #C9DAE2; }
.so-ev-title { margin: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; line-height: 1.25; letter-spacing: -.03em; color: #fff; }
.so-ev-title s { font-size: .6em; font-weight: 600; color: rgba(255,255,255,.55); text-decoration-thickness: 2px; }
.so-ev-title em { display: inline-block; font-style: normal; font-size: 1.5em; line-height: 1; color: #FFD84D; transform: rotate(-3deg); }
.so-ev-pitch { margin: 12px 0 6px; font-size: 18px; font-weight: 700; color: #fff; }
.so-ev-cond { margin: 0; font-size: 14.5px; color: #C9DAE2; }
.so-ev-side { display: flex; flex-direction: column; gap: 12px; }
.so-ev-btn { min-height: 56px; background: #FFD84D; color: var(--so-it); font-size: 17px; font-weight: 900; }
.so-ev-btn:hover { background: #fff; color: var(--so-it); }
.so-ev-btn.is-off { background: rgba(255,255,255,.12); color: #C9DAE2; cursor: default; }
.so-ev-terms { border-radius: 14px; background: rgba(255,255,255,.08); }
.so-ev-terms summary { padding: 12px 16px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: #fff; list-style: none; }
.so-ev-terms summary::-webkit-details-marker { display: none; }
.so-ev-terms summary::after { content: " ▾"; color: #FFD84D; }
.so-ev-terms[open] summary::after { content: " ▴"; }
.so-ev-terms ul { margin: 0; padding: 0 16px 14px; list-style: none; }
.so-ev-terms li { position: relative; padding-left: 12px; font-size: 13.5px; line-height: 1.75; color: #D5E3EA; }
.so-ev-terms li::before { content: "·"; position: absolute; left: 2px; }
.so-ev-terms li b { color: #fff; }
.dc-page > .so-ev { margin-bottom: 40px; }

/* 메인 요금 구간 제작비 줄 : 이벤트 표시 */
.so-build-mini.is-event { border: 2px solid #F2C12E; background: #FFFBEA; }
.so-build-mini.is-event s { font-size: 15px; font-weight: 600; color: var(--al-muted); }
.so-build-mini.is-event em { font-style: normal; color: #D9480F; }
.so-build-mini.is-event small a { color: #B5651D; font-weight: 700; }

@media (max-width: 1024px) {
    .so-ev { grid-template-columns: 1fr; padding: 32px 28px; }
}
@media (max-width: 768px) {
    .so-evbar { font-size: 13px; gap: 8px; padding: 8px 12px; }
    .so-evbar-go { display: none; }
    .so-ev { padding: 26px 20px; border-radius: 18px; }
    .so-ev::after { font-size: 200px; bottom: -40px; }
    .so-ev-pitch { font-size: 16px; }
}

/* ── 선올 AD (현수막 · QR 랜딩 플랫폼) — 회사 서비스와 구분되는 별도 페이지 ── */
.c-mkt .al-blob { background: var(--c-ad); } .c-mkt .al-blob svg { color: var(--k-ad); }
.al-jump .c-mkt .al-jump-ic { background: var(--c-ad); color: var(--k-ad); }

.so-ad-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin-bottom: 12px; }
.so-ad-badge { display: inline-block; margin: 0 0 12px; padding: 5px 14px; border-radius: 999px; background: var(--c-ad); color: #8A5A00; font-size: 13.5px; font-weight: 800; }
.so-ad-intro h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; letter-spacing: -.03em; color: var(--al-navy); }
.so-ad-intro > div > p { font-size: 16.5px; line-height: 1.85; }
.so-ad-region { margin-top: 10px; font-size: 15px !important; color: var(--al-muted); }
.so-ad-region b { color: var(--so-seon); }

/* 현수막 → 휴대폰 그림 (CSS 로만 그린 장식) */
.so-ad-visual { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px 20px; border-radius: var(--al-r); background: linear-gradient(135deg, #FFF7E3, var(--so-all-soft)); }
.so-ad-banner { position: relative; display: flex; flex-direction: column; gap: 4px; width: 190px; padding: 18px 70px 18px 16px; border-radius: 6px; background: #fff; border: 3px solid #E7A417; box-shadow: 0 10px 24px rgba(16,43,59,.12); }
.so-ad-banner span { font-size: 11px; font-weight: 800; color: #B5651D; letter-spacing: .1em; }
.so-ad-banner b { font-size: 17px; color: var(--al-navy); line-height: 1.2; }
.so-ad-qr { position: absolute; right: 12px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border: 3px solid #fff; outline: 2px solid var(--al-navy);
    background: conic-gradient(var(--al-navy) 25%, #fff 0 50%, var(--al-navy) 0 75%, #fff 0) 0 0 / 11px 11px; }
.so-ad-arrow { font-size: 28px; font-weight: 900; color: var(--so-seon); }
.so-ad-phone { display: flex; flex-direction: column; gap: 7px; width: 112px; padding: 14px 12px 16px; border-radius: 18px; background: #fff; border: 3px solid var(--al-navy); box-shadow: 0 10px 24px rgba(16,43,59,.15); }
.so-ad-phone-top { width: 34px; height: 4px; margin: 0 auto 4px; border-radius: 4px; background: #CBD5DB; }
.so-ad-phone b { font-size: 13px; color: var(--al-navy); }
.so-ad-phone .l { height: 6px; border-radius: 4px; background: #E3ECF0; }
.so-ad-phone .l.s { width: 70%; }
.so-ad-phone em { margin-top: 4px; padding: 6px 0; border-radius: 8px; background: var(--so-seon); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; text-align: center; }

.so-ad-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.so-ad-diff .al-card.is-ad { border: 2px solid #E7A417; background: #FFFBEF; }

.so-ad-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.so-ad-flow li { position: relative; padding: 20px 18px; border-radius: 16px; background: var(--al-bg); border: 1px solid var(--al-line); }
.so-ad-flow li::before { counter-increment: f; content: counter(f); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--so-it); color: #fff; font-weight: 900; }
.so-ad-flow b { display: block; margin-bottom: 4px; color: var(--al-navy); }
.so-ad-flow span { font-size: 14px; line-height: 1.6; color: var(--al-muted); }

.so-ad-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.so-ad-plans .al-plan h3 { font-size: 20px; letter-spacing: 0; color: var(--al-navy); }
.so-ad-plans .al-plan.is-soon { opacity: .75; border-style: dashed; }
.so-soon { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: var(--al-bg); color: var(--al-muted); font-size: 12px; font-weight: 700; vertical-align: 3px; }

/* 서비스 페이지 하단 : 선올 AD 는 따로 */
.so-ad-callout { display: flex; align-items: center; gap: 18px; margin-top: 44px; padding: 22px 26px; border-radius: var(--al-r); border: 2px solid #E7A417; background: #FFFBEF; color: inherit; }
.so-ad-callout:hover { border-color: var(--so-it); }
.so-ad-callout-tag { flex: none; padding: 4px 12px; border-radius: 999px; background: #E7A417; color: #fff; font-size: 13px; font-weight: 800; }
.so-ad-callout-body { flex: 1; }
.so-ad-callout-body b { display: block; margin-bottom: 4px; font-size: 18px; color: var(--al-navy); }
.so-ad-callout-body span { font-size: 15px; color: var(--al-muted); }
.so-ad-callout-go { flex: none; font-size: 24px; font-weight: 900; color: var(--so-it); }

@media (max-width: 1024px) {
    .so-ad-intro { grid-template-columns: 1fr; }
    .so-ad-flow { grid-template-columns: repeat(2, 1fr); }
    .so-ad-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .so-ad-diff, .so-ad-flow, .so-ad-plans { grid-template-columns: 1fr; }
    .so-ad-callout { flex-direction: column; align-items: flex-start; }
    .so-ad-banner { width: 160px; padding-right: 64px; }
}

/* ── 제작 비용 : 무료 · 기본 홈페이지 제작 범위 / 제작비 외 비용 ─────── */
.so-scope { margin: 0 0 40px; padding: 30px 32px; border-radius: var(--al-r); background: #FFFBEF; border: 2px solid #F2C12E; scroll-margin-top: 100px; }
.so-scope-title { margin: 0 0 10px; font-size: clamp(21px, 2.4vw, 26px); color: var(--al-navy); letter-spacing: -.02em; }
.so-scope-title em { font-style: normal; color: #B5651D; box-shadow: inset 0 -10px 0 rgba(242,193,46,.35); }
.so-scope-intro { margin: 0 0 20px; font-size: 15.5px; line-height: 1.8; }
.so-scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.so-scope-col { padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid #F0DFA8; }
.so-scope-col h3 { margin: 0 0 10px; font-size: 16.5px; color: var(--al-navy); }
.so-scope-col h3 small { margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: #FDF1DC; color: #B5651D; font-size: 12px; font-weight: 800; }
.so-scope-col ul { margin: 0; padding: 0; list-style: none; }
.so-scope-col li { position: relative; padding: 6px 0 6px 24px; font-size: 15px; color: var(--al-ink); }
.so-scope-col.is-ok li::before { content: "✓"; position: absolute; left: 2px; color: var(--so-seon); font-weight: 900; }
.so-scope-col.is-no li::before { content: "＋"; position: absolute; left: 0; color: #B5651D; font-weight: 900; }
.so-scope-foot { margin: 16px 0 0; font-size: 14.5px; color: var(--al-muted); }
.so-scope-foot a { font-weight: 700; color: var(--so-it); }
.so-who { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--al-bg); border: 1px solid var(--al-line); font-size: 13px; font-weight: 700; color: var(--al-navy); white-space: nowrap; }
@media (max-width: 768px) {
    .so-scope { padding: 22px 18px; }
    .so-scope-cols { grid-template-columns: 1fr; }
}
.so-ev-scope { font-size: 14px; font-weight: 700; color: #FFE68A; text-align: center; }
.so-ev-scope:hover { color: #fff; text-decoration: underline; }

/* ── 광고용 랜딩페이지 : 두 번째 이벤트 배너 + 비용 박스 ─────────────── */
.so-ev + .so-ev { margin-top: 16px; }
.so-ev.is-landing {
    background: radial-gradient(600px 300px at 100% 0%, rgba(231,164,23,.45) 0%, transparent 65%),
                radial-gradient(500px 260px at 0% 100%, rgba(58,158,79,.5) 0%, transparent 60%),
                #1F5130;
    box-shadow: 0 20px 48px rgba(31,81,48,.25);
}
.so-ev.is-landing::after { content: "QR"; font-size: 240px; bottom: -50px; }
.dc-page > .so-ev.is-landing { margin-top: -24px; }

.so-landing { margin: 56px 0; padding: 32px; border-radius: var(--al-r); border: 2px solid #E7A417; background: linear-gradient(180deg, #FFFBEF 0%, #fff 60%); scroll-margin-top: 100px; }
.so-landing-tag { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: #E7A417; color: #fff; font-size: 13px; font-weight: 800; }
.so-landing-head h2 { margin: 0 0 16px; font-size: clamp(22px, 2.6vw, 28px); color: var(--al-navy); letter-spacing: -.02em; }
.so-landing-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.so-landing-rule p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--al-line); }
.so-landing-rule b { flex: none; padding: 4px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 900; color: #fff; }
.so-landing-rule .is-free b { background: var(--so-seon); }
.so-landing-rule .is-paid b { background: var(--so-it); }
.so-landing-rule span { font-size: 14.5px; color: var(--al-ink); }
.so-landing-partners { margin: 10px 0 0; font-size: 14px; color: var(--al-muted); }

.so-landing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.so-lp { position: relative; padding: 22px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--al-line); }
.so-lp.is-pick { border: 2px solid var(--so-all); }
.so-lp.is-free { border: 2px solid var(--so-seon); }
.so-lp.is-soon { opacity: .75; border-style: dashed; }
.so-lp-free { position: absolute; top: -12px; left: 16px; padding: 2px 12px; border-radius: 999px; background: var(--so-seon); color: #fff; font-size: 12.5px; font-weight: 800; }
.so-lp h3 { margin: 0; font-size: 17px; color: var(--al-navy); }
.so-lp-price { margin: 6px 0 2px; font-size: 26px; font-weight: 900; color: var(--so-it); letter-spacing: -.02em; }
.so-lp-for { margin: 0 0 10px; font-size: 13.5px; color: var(--al-muted); }
.so-lp ul { margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed var(--al-line); }
.so-lp li { position: relative; padding: 4px 0 4px 18px; font-size: 14px; color: var(--al-ink); }
.so-lp li::before { content: "✓"; position: absolute; left: 0; color: var(--so-seon); font-weight: 800; }

.so-landing-terms { margin: 20px 0 0; padding: 0; list-style: none; }
.so-landing-terms li { position: relative; padding: 4px 0 4px 16px; font-size: 14.5px; line-height: 1.7; color: var(--al-ink); }
.so-landing-terms li::before { content: "·"; position: absolute; left: 4px; font-weight: 900; color: #B5651D; }
.so-landing-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #F0DFA8; }
.so-landing-foot span { font-size: 13.5px; color: var(--al-muted); }

@media (max-width: 1024px) {
    .so-landing-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .so-landing { padding: 22px 16px; }
    .so-landing-rule, .so-landing-plans { grid-template-columns: 1fr; }
    .so-landing-rule p { flex-direction: column; align-items: flex-start; }
    .so-ev.is-landing::after { font-size: 160px; }
}

/* 광고용 랜딩페이지 : 유지 기간 → 월 유지비 */
.so-landing-keep { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.so-keep-step { flex: 1; margin: 0; padding: 12px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--al-line); }
.so-keep-step small { display: block; font-size: 12.5px; color: var(--al-muted); }
.so-keep-step b { font-size: 16.5px; color: var(--al-navy); }
.so-keep-step.is-in { border-left: 5px solid var(--so-seon); }
.so-keep-step.is-month { border-left: 5px solid #E7A417; }
.so-keep-arrow { align-self: center; font-size: 22px; font-weight: 900; color: #B5651D; }
.so-keep-after { margin: 8px 0 0; font-size: 13.5px; color: var(--al-muted); }
@media (max-width: 768px) {
    .so-landing-keep { flex-direction: column; }
    .so-keep-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 18px; }
}
.so-lp-keep { margin: 0 0 8px; font-size: 13.5px; color: var(--al-muted); }
.so-lp-keep b { color: #B5651D; }
.so-keep-perks { margin: 10px 0 0; padding: 12px 16px; list-style: none; border-radius: 12px; background: #fff; border: 1px dashed #F0DFA8; }
.so-keep-perks li { position: relative; padding: 3px 0 3px 22px; font-size: 14px; line-height: 1.65; color: var(--al-ink); }
.so-keep-perks li::before { content: "✓"; position: absolute; left: 2px; color: var(--so-seon); font-weight: 900; }

/* ── 하위 페이지 상단 배경 사진 (대메뉴별) ──────────────────────────────
   사진 왼쪽은 밝은 물결이라 글자를 왼쪽에 두고, 왼쪽부터 흰빛을 덧씌워 글자가 잘 읽히게 한다. */
.al-subhero.has-bg { min-height: 300px; display: flex; align-items: center; padding: 48px 0; text-align: left;
    background:
        linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.25) 62%, rgba(255,255,255,0) 78%),
        var(--sub-bg) right center / cover no-repeat,
        #EAF4FB; }
.al-subhero.has-bg .al-subhero-in { width: 100%; }
.al-subhero.has-bg .al-subhero-hand { transform: rotate(-2deg); transform-origin: left; }
.al-subhero.has-bg .al-subhero-title::after { margin-left: 0; }
.al-subhero.has-bg .al-subhero-sub { max-width: 520px; color: #36505F; }
.al-subhero.has-bg .al-crumb { justify-content: flex-start; }
.al-subhero.has-bg .al-subhero-q { display: none; }
@media (max-width: 768px) {
    .al-subhero.has-bg { min-height: 220px; padding: 34px 0;
        background:
            linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.55) 100%),
            var(--sub-bg) 70% center / cover no-repeat,
            #EAF4FB; }
}

/* ── 하위 페이지 상단 : 가로로 긴 띠 사진(3200 × 약 230px, 2026-10-19 교체) ──
   사진 높이에 맞춰 영역을 230px 로 낮춘다 → 사진이 원본 크기(약 1배)로 보여 흐려지지 않는다.
   주제(헤드셋 · 빌딩 · 화면 · 아이콘 · 노트북)는 사진 오른쪽에 있으므로 오른쪽 기준으로 맞춘다. */
.al-subhero.has-bg { min-height: 230px; padding: 26px 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 30%, rgba(255,255,255,.2) 55%, rgba(255,255,255,0) 70%),
        var(--sub-bg) right center / cover no-repeat,
        #EAF4FB; }
.al-subhero.has-bg .al-subhero-hand { font-size: 26px; }
.al-subhero.has-bg .al-subhero-title { font-size: clamp(28px, 3.2vw, 36px); }
.al-subhero.has-bg .al-subhero-title::after { margin-top: 8px; height: 5px; }
.al-subhero.has-bg .al-subhero-sub { margin-top: 10px; font-size: 15.5px; }
.al-subhero.has-bg .al-crumb { margin-top: 10px; }
@media (max-width: 768px) {
    .al-subhero.has-bg { min-height: 190px; padding: 24px 0;
        background:
            linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.75) 60%, rgba(255,255,255,.45) 100%),
            var(--sub-bg) right center / cover no-repeat,
            #EAF4FB; }
}

/* ── 하위 페이지 상단 : 브랜드 그래픽 (2026-10-19, 사진 대신) ────────────
   배경 = 로고 세 색의 흐릿한 원 + 옅은 점무늬 / 오른쪽 = 대메뉴별 선 아이콘 카드 4장.
   모두 CSS · SVG 라 화면 크기와 상관없이 선명하고 파일을 불러오지 않는다. */
.al-subhero.is-brand { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 250px; padding: 46px 0; text-align: left;
    background:
        radial-gradient(380px 240px at 70% 18%, rgba(58,158,79,.20) 0%, transparent 70%),
        radial-gradient(460px 300px at 90% 85%, rgba(21,144,204,.24) 0%, transparent 70%),
        radial-gradient(340px 220px at 58% 105%, rgba(11,63,134,.14) 0%, transparent 70%),
        radial-gradient(rgba(16,43,59,.07) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
        linear-gradient(180deg, #F7FBFD 0%, #FFFFFF 100%); }
.al-subhero.is-brand .al-subhero-in { position: relative; z-index: 1; width: 100%; }
.al-subhero.is-brand .al-subhero-title::after { margin-left: 0; }
.al-subhero.is-brand .al-crumb { justify-content: flex-start; }
.al-subhero.is-brand .al-subhero-sub { max-width: 520px; }
.al-subhero.is-brand .al-subhero-q { display: none; }

/* 아이콘 카드 — 본문 폭(.al-wrap) 오른쪽 끝에 맞춘다 */
.so-hero-deco { position: absolute; z-index: 0; top: 50%; right: max(20px, calc((100% - var(--al-max)) / 2 + 20px)); width: 440px; height: 210px; transform: translateY(-50%); }
.so-hc { position: absolute; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px;
    background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 36px rgba(11,63,134,.13), inset 0 1px 0 #fff; backdrop-filter: blur(6px);
    animation: so-float 6s ease-in-out infinite; }
.so-hc svg { width: 44px; height: 44px; }
.so-hc-1 { left: 0;     top: 66px;  color: var(--so-seon); transform: rotate(-7deg); animation-delay: 0s; }
.so-hc-2 { left: 112px; top: 4px;   color: var(--so-all);  transform: rotate(5deg);  animation-delay: -1.5s; width: 104px; height: 104px; }
.so-hc-3 { left: 234px; top: 84px;  color: var(--so-it);   transform: rotate(-4deg); animation-delay: -3s; width: 110px; height: 110px; }
.so-hc-4 { left: 350px; top: 14px;  color: var(--so-seon); transform: rotate(7deg);  animation-delay: -4.5s; }
.so-hc-3 svg { width: 52px; height: 52px; }
.so-hc-seal { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--so-seon); color: #fff;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', serif; font-size: 30px; font-weight: 700; line-height: 1; }
@keyframes so-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 1100px) {
    .so-hero-deco { right: 0; transform: translateY(-50%) scale(.82); transform-origin: right center; opacity: .9; }
}
@media (max-width: 860px) {
    .so-hero-deco { opacity: .35; transform: translateY(-50%) scale(.7); }
}
@media (max-width: 640px) {
    .al-subhero.is-brand { min-height: 0; padding: 34px 0 30px; }
    .so-hero-deco { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .so-hc { animation: none; }
}

/* 하위 페이지 본문 좌우 여백 — .dc-inner(좌우 여백)와 .dc-page(위아래 여백)를 같은 상자에 쓰면서
   뒤에 오는 .dc-page 가 좌우 여백을 0 으로 덮어써 태블릿 · 휴대폰에서 본문이 화면 끝에 붙던 문제 수정 */
.dc-inner.dc-page { padding-left: var(--dc-gutter); padding-right: var(--dc-gutter); }

/* ── 메인 히어로 : 캐릭터 사진 (seonol-hero-mascot.jpg, 3584 × 1184) — 2026-10-19 ──────────
   사진 왼쪽에 식물이 있어 글자가 잘 읽히도록 왼쪽에 흰빛을 깔고,
   아래쪽 · 바탕색은 사진의 따뜻한 회백색(책상)과 맞춘다. */
.al-hero { background: linear-gradient(180deg, #F6F6F3 0%, #FFFFFF 100%); }
.al-hero-top { --H: clamp(520px, 40vw, 640px); background-color: #F3F4F1; }
.al-hero-top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(250,250,247,.93) 0%, rgba(250,250,247,.80) 30%, rgba(250,250,247,.25) 50%, rgba(250,250,247,0) 60%); }
.al-hero-top::after { background: linear-gradient(180deg, rgba(246,246,243,0) 0%, #F6F6F3 100%); }

/* 캐릭터 대답 말풍선 — 사진 속 캐릭터 머리 위.
   사진은 cover 라 배율 s = max(화면폭/3584, 높이/1184). 캐릭터 머리 중심은 사진 오른쪽 끝에서 645px, 위에서 403px.
   → 오른쪽 거리 = 645·s, 머리 꼭대기 = H/2 − 189·s  (사진이 위아래로 잘리는 넓은 화면까지 맞춘다) */
.so-reply { position: absolute; z-index: 2; margin: 0;
    right: calc(max(18vw, 0.545 * var(--H)) - 40px);
    top: calc(var(--H) / 2 - max(5.27vw, 0.16 * var(--H)) - 112px);
    padding: 14px 22px; border-radius: 24px; background: var(--so-seon); color: #fff;
    font-size: 28px; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; text-align: center;
    box-shadow: 0 14px 30px rgba(58,158,79,.35); transform: rotate(3deg);
    opacity: 0; animation: al-pop .5s ease-out 1.4s forwards; }
.so-reply small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; opacity: .92; }
.so-reply::after { content: ""; position: absolute; right: 34px; bottom: -14px; border: 10px solid transparent; border-top: 16px solid var(--so-seon); border-bottom: 0; transform: rotate(-16deg); }

/* 손님 고민 말풍선 — 노트북 · 캐릭터를 가리지 않게 창문 쪽 빈 공간으로 */
.al-bubble.b1 { left: 0;   top: 6%; }
.al-bubble.b2 { left: 36%; top: 1%; }
.al-bubble.b3 { left: 0;   top: 41%; }
.al-bubble.b4 { left: 3%;  top: 70%; }

@media (max-width: 1024px) {
    .al-hero-top::before { background: linear-gradient(180deg, rgba(250,250,247,.9) 0%, rgba(250,250,247,.75) 50%, rgba(250,250,247,0) 62%); }
    .so-reply { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .so-reply { animation: none; opacity: 1; }
}

/* 태블릿 · 휴대폰 : 사진은 아래쪽, 말풍선 2개만 사진 위 양쪽에 (데스크톱 위치 규칙을 되돌린다) */
@media (max-width: 1024px) {
    .al-bubble.b1 { left: 4%;   right: auto; top: 6%; }
    .al-bubble.b2 { left: auto; right: 4%;   top: 18%; }
}
@media (max-width: 768px) {
    .al-hero-in { min-height: 720px; }
    .al-hero-top { background-size: auto, auto 44%, auto; background-position: 0 0, 82% 100%, 0 0; }
    .al-hero-top::before { background: linear-gradient(180deg, rgba(250,250,247,.92) 0%, rgba(250,250,247,.8) 46%, rgba(250,250,247,0) 57%); }
    .al-bubbles { height: 42%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .al-bubble.b2 { top: 4%; }       /* 태블릿: 사진이 커서 캐릭터 잎과 겹치지 않게 위로 */
}

/* ── 히어로 말풍선 : 캐릭터 중심 배치 (PC) ─────────────────────────────
   캐릭터 머리 중심을 기준점으로 삼는다. (사진 cover 배율 s = max(화면폭/3584, 높이/1184))
     --R : 화면 오른쪽 끝 → 머리 중심 거리 = 645·s
     --T : 히어로 위쪽 → 머리 꼭대기 거리 = H/2 − 189·s
   "다 있지!"는 머리 위, 고민 말풍선 4개는 머리 왼쪽에 반원으로 두르고 꼬리는 캐릭터 쪽을 향한다. */
@media (min-width: 1025px) {
    .al-hero-top { --R: max(18vw, 0.545 * var(--H)); --T: calc(var(--H) / 2 - max(5.27vw, 0.16 * var(--H))); }
    .al-hero-in { position: static; }                 /* 말풍선을 히어로 전체(사진) 기준으로 놓기 위해 */
    .al-hero-copy { z-index: 3; }
    .al-bubbles { left: 0; right: 0; top: 0; bottom: 0; z-index: 2; }

    .so-reply     { right: calc(var(--R) - 40px);  top: calc(var(--T) - 112px); }
    .al-bubble.b2 { left: auto; right: calc(var(--R) + 150px); top: calc(var(--T) - 118px); }   /* 위 · 왼쪽 */
    .al-bubble.b1 { left: auto; right: calc(var(--R) + 270px); top: calc(var(--T) + 4px); }     /* 왼쪽 위 */
    .al-bubble.b3 { left: auto; right: calc(var(--R) + 245px); top: calc(var(--T) + 128px); }   /* 왼쪽 */
    .al-bubble.b4 { left: auto; right: calc(var(--R) + 200px); top: calc(var(--T) + 252px); }   /* 왼쪽 아래 */

    /* 생각 꼬리(작은 동그라미)를 캐릭터 쪽(오른쪽 아래)으로 */
    .al-bubble.b1::before, .al-bubble.b3::before, .al-bubble.b4::before { left: auto; right: 18px; bottom: -10px; }
    .al-bubble.b1::after,  .al-bubble.b3::after,  .al-bubble.b4::after  { left: auto; right: -4px; bottom: -20px; }
    .al-bubble.b2::before { left: auto; right: 22px; bottom: -12px; }
    .al-bubble.b2::after  { left: auto; right: 6px;  bottom: -24px; }
}

/* 캐릭터를 둘러싸는 배치 (위 규칙을 덮어씀) — "다 있지!"는 머리 위 가운데,
   고민 말풍선은 오른쪽 위(b2) · 왼쪽 위(b1) · 왼쪽(b3) · 왼쪽 아래(b4) */
@media (min-width: 1025px) {
    .so-reply     { right: calc(var(--R) - 78px); top: calc(var(--T) - 116px); }
    .al-bubble.b2 { right: calc(var(--R) - 300px); top: calc(var(--T) - 104px); }
    .al-bubble.b1 { right: calc(var(--R) + 150px); top: calc(var(--T) - 66px); }
    .al-bubble.b3 { right: calc(var(--R) + 255px); top: calc(var(--T) + 70px); }
    .al-bubble.b4 { right: calc(var(--R) + 205px); top: calc(var(--T) + 205px); }
    /* 오른쪽 위 말풍선은 꼬리를 왼쪽 아래(캐릭터 쪽)로 */
    .al-bubble.b2::before { left: 22px; right: auto; bottom: -12px; }
    .al-bubble.b2::after  { left: 8px;  right: auto; bottom: -24px; }
}
@media (min-width: 1025px) {
    .al-bubble.b2 { right: max(16px, calc(var(--R) - 300px)); }   /* 좁은 PC 화면에서 오른쪽 끝을 넘지 않게 */
}

/* ── 하위 페이지 상단 : 캐릭터 이미지 (2172 × 724, 3:1) — 2026-10-19 ─────────────
   영역 높이 320px. 이미지는 잘리지 않게 높이에 맞춰 오른쪽에 붙이고(너비 = 높이 × 3),
   왼쪽 끝은 투명하게 녹여 배경색과 이어지게 한다. → 1920px 화면에서 원본보다 작게 표시되어 선명하다. */
.al-subhero.has-bg { --sub-h: 320px; position: relative; overflow: hidden; height: var(--sub-h); min-height: 0; padding: 0;
    background: linear-gradient(90deg, #F6FBFE 0%, #EDF6FC 55%, #E6F3FB 100%); }
.al-subhero.has-bg::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
    width: min(100%, calc(var(--sub-h) * 3));
    background: var(--sub-bg) right center / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.al-subhero.has-bg .al-subhero-in { position: relative; z-index: 1; }
@media (max-width: 768px) {
    .al-subhero.has-bg { --sub-h: 230px; height: auto; min-height: var(--sub-h); padding: 30px 0 26px; }
    .al-subhero.has-bg::before { width: 100%; background-position: 78% center; background-size: auto 100%; opacity: .5;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
}

/* 하위 페이지 상단 문구를 안쪽으로 — 좁은 PC(1200~1400px)에서 왼쪽 끝에 붙어 보이던 문제 */
@media (min-width: 769px) {
    .al-subhero.has-bg .al-subhero-in { padding-left: calc(20px + clamp(40px, 5vw, 80px)); }
}

/* 회사소개 '로고 이야기' : 로고 두 가지 (국문 기본형 · 영문 병기형) */
.so-logo-var { margin: 0; padding: 18px 10px 14px; border-radius: 14px; background: rgba(255,255,255,.75); }
.so-logo-var + .so-logo-var { margin-top: 12px; }
.so-logo-var img { display: block; width: auto; max-width: 100%; height: 76px; margin: 0 auto; }
.so-logo-var figcaption { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--al-muted); letter-spacing: .04em; }
.so-logo-box { padding: 24px 22px; }
@media (max-width: 768px) {
    .so-logo-var img { height: 60px; }
}

/* 로고 세 가지를 같은 너비로 — 셋 다 가로세로 비율이 비슷해(약 2.7~2.9:1) 너비를 맞추면 S 마크 크기가 같아진다 */
.so-logo-var { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 168px; }
.so-logo-var img { width: 280px; height: auto !important; max-width: 92%; }
@media (max-width: 768px) {
    .so-logo-var { min-height: 0; }
    .so-logo-var img { width: 230px; }
}