/* ============================================================
   바이크퀵 — 프리미엄 디자인 시스템
   전국 오토바이 퀵서비스 기사 모집·채용
   ============================================================ */
:root {
  /* 브랜드 */
  --brand: #ff5a1f;
  --brand-2: #ff7a3d;
  --brand-dark: #d8420b;
  --brand-soft: #fff2ec;
  --brand-glow: rgba(255, 90, 31, .35);

  --navy: #0b1622;
  --navy-2: #142335;
  --navy-3: #22344f;
  --ink: #14161d;
  --ink-2: #3a4150;
  --muted: #6b7280;
  --muted-2: #9aa2ae;
  --line: #eae8e3;
  --line-2: #f1efea;

  --bg: #ffffff;
  --bg-warm: #f8f7f3;
  --bg-alt: #f3f2ed;
  --bg-navy-soft: #f2f5fa;

  --gold: #c9a227; /* 신뢰 포인트(별점 등) */

  --radius-xl: 24px;
  --radius: 16px;
  --radius-sm: 11px;

  --shadow-xs: 0 1px 2px rgba(18,20,26,.04);
  --shadow-sm: 0 3px 14px -6px rgba(18,20,26,.10);
  --shadow: 0 18px 44px -20px rgba(18,20,26,.20);
  --shadow-lg: 0 34px 80px -28px rgba(18,20,26,.30);
  --shadow-brand: 0 16px 34px -12px var(--brand-glow);

  --wrap: 1200px;
  --wrap-narrow: 900px;
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 17px;
  letter-spacing: -.011em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "tnum";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.24; letter-spacing: -.038em; margin: 0 0 .5em; color: var(--ink); font-weight: 800; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
::selection { background: var(--brand); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.15em; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .92em 1.6em; border-radius: 999px; font-weight: 700; font-size: .98rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s;
  white-space: nowrap; letter-spacing: -.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .58em 1.05em; font-size: .9rem; }
.btn-lg { padding: 1.05em 1.9em; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: linear-gradient(135deg, #d8420b, #b3350a); color: #fff !important; box-shadow: var(--shadow-brand); text-shadow: 0 1px 2px rgba(0,0,0,.3); font-weight: 750; }
.btn-primary:hover { background: linear-gradient(135deg, #c93c09, #a23009); box-shadow: 0 18px 38px -10px var(--brand-glow); }
.btn-kakao { background: #fee500; color: #191600; box-shadow: 0 10px 24px -12px rgba(254,229,0,.7); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-xs); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }

/* ---------- Top utility bar ---------- */
.util-bar { background: var(--navy); color: #c9d4e2; font-size: .82rem; }
.util-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 1rem; }
.util-bar .util-left { display: flex; gap: 1.3rem; overflow: hidden; white-space: nowrap; }
.util-bar .util-left span { display: inline-flex; align-items: center; gap: .35rem; }
.util-bar .util-left .ico { color: var(--brand-2); width: 1em; height: 1em; }
.util-bar a { color: #fff; font-weight: 600; }
.util-bar .util-right { display: flex; gap: 1rem; flex: none; }
@media (max-width: 720px){ .util-bar{ display:none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-2); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark { font-size: 1.6rem; filter: drop-shadow(0 3px 6px rgba(255,90,31,.35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 1.2rem; letter-spacing: -.04em; font-weight: 800; }
.brand-text small { font-size: .67rem; color: var(--muted); letter-spacing: -.01em; }

.main-nav { margin-left: auto; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: .1rem; }
.nav-item { position: relative; }
.nav-link { display: block; padding: .7rem .82rem; font-weight: 650; font-size: .95rem; border-radius: 10px; color: var(--ink-2); transition: color .15s, background .15s; }
.nav-link:hover, .nav-link.active { color: var(--brand-dark); background: var(--brand-soft); }
.dropdown { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 224px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: .55rem; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 50; }
.nav-item.has-dd:hover .dropdown, .nav-item.has-dd:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-inner { display: flex; flex-direction: column; }
.dropdown a { padding: .62rem .8rem; border-radius: 10px; font-size: .9rem; color: var(--ink-2); font-weight: 550; transition: .13s; }
.dropdown a:hover { background: var(--bg-alt); color: var(--brand-dark); padding-left: 1rem; }
.header-cta { margin-left: .5rem; }
.nav-toggle { display: none; }

/* ---------- 상단 배너(업로드 이미지) ---------- */
.home-banner { background: var(--bg-warm); padding: 1.4rem 0 0; }
.home-banner .wrap { padding: 0 22px; }
.home-banner a { display: block; }
.home-banner img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.home-banner a:hover img { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ---------- Hero ---------- */
.hero { position: relative; background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 55%, #24344d 100%); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 82% 8%, rgba(255,90,31,.28), transparent 60%), radial-gradient(700px 400px at 10% 100%, rgba(60,110,170,.35), transparent 55%); }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 3rem; align-items: center; padding: clamp(3rem, 6vw, 5.5rem) 0; }
.hero .badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 650; font-size: .82rem; padding: .5em 1em; border-radius: 999px; margin-bottom: 1.2rem; backdrop-filter: blur(6px); }
.hero .badge .ico { color: var(--brand-2); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.15; }
.hero h1 .hl { background: linear-gradient(120deg, var(--brand-2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: #c3cfdf; font-size: 1.1rem; margin: 1.2rem 0 0; max-width: 30em; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; padding: 0; margin: 1.5rem 0 0; }
.hero-points li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; color: #eaf0f7; }
.hero-points .ico { color: var(--brand-2); }
.hero-note { margin-top: 1.1rem; color: var(--muted-2); font-size: .95rem; }
.hero-visual { position: relative; }
.hero-visual .hero-img { width: 100%; height: auto; aspect-ratio: 20/9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.12); }
.hero-card { position: relative; margin-top: -46px; margin-left: auto; margin-right: 8px; width: calc(100% - 40px); background: rgba(255,255,255,.98); color: var(--ink); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); }
.hero-card.hero-card-solo { margin-top: 0; width: 100%; margin-left: 0; margin-right: 0; }
.hero-card h3 { font-size: 1.02rem; }
.post-textonly { border-left: 3px solid var(--brand); }
.post-textonly .post-body { padding: 1.4rem 1.5rem; }
.status-line { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); font-weight: 650; margin: .2rem 0 .9rem; font-size: .92rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 4px rgba(34,197,94,.18);} 50%{ box-shadow: 0 0 0 7px rgba(34,197,94,.06);} }
.today-regions { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--navy-2); color: #fff; }
.trust-bar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 22px; }
.trust-stat { text-align: center; position: relative; }
.trust-stat + .trust-stat::before { content: ""; position: absolute; left: -.5rem; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.12); }
.trust-stat b { display: block; font-size: 1.7rem; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.trust-stat b .u { font-size: 1rem; color: var(--brand-2); }
.trust-stat span { font-size: .85rem; color: #aab7c8; }
@media(max-width:640px){ .trust-bar .wrap{ grid-template-columns: repeat(2,1fr); gap: 1.3rem 1rem;} .trust-stat + .trust-stat::before{ display:none; } }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; padding: .5em 1.05em; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .9rem; font-weight: 650; color: var(--ink-2); transition: .15s var(--ease); box-shadow: var(--shadow-xs); }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); }
.chip-more { background: var(--brand-dark); color: #fff !important; border-color: var(--brand-dark); }
.chip-static { pointer-events: none; box-shadow: none; background: var(--bg-alt); }
.hero-card .chip { background: var(--bg-alt); color: var(--ink-2); box-shadow: none; }
.hero-card .chip-more { background: var(--brand-dark); color: #fff !important; border-color: var(--brand-dark); }
.region-chips, .blog-cats { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-alt { background: var(--bg-warm); }
.section-navy { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; }
.sec-head { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-dark); font-weight: 700; letter-spacing: .18em; font-size: .74rem; text-transform: uppercase; margin-bottom: .85rem; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--brand); border-radius: 2px; }
.section-navy .kicker { color: var(--brand-2); }
.sec-head h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.18; }
.section-navy .sec-head h2 { color: #fff; }
.sec-sub { color: var(--muted); margin: .7rem 0 0; font-size: 1.08rem; line-height: 1.65; }
.section-navy .sec-sub { color: #b9c6d8; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; }
a.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #e0ddd5; }
.card h2 { font-size: 1.22rem; }
.card h3 { font-size: 1.1rem; }
.card p { color: var(--ink-2); margin: .45rem 0 0; font-size: .97rem; }

.audience .emoji { font-size: 2rem; display:block; margin-bottom:.3rem; }
.benefit-ico, .region-ico { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-soft), #ffe6d8); color: var(--brand-dark); border-radius: 14px; margin-bottom: .8rem; box-shadow: inset 0 0 0 1px rgba(255,90,31,.12); }
.benefit-ico .ico, .region-ico .ico { width: 24px; height: 24px; }
.benefit { position: relative; overflow: hidden; }
.benefit::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: 0; transition: .2s; }
.benefit:hover::after { opacity: 1; }

.audiences { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.benefits { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.3rem; }

.tag-row { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .9rem 0; }
.tag-row li { font-size: .78rem; background: var(--bg-alt); color: var(--ink-2); padding: .32em .75em; border-radius: 999px; font-weight: 600; }
.link-arrow { color: var(--brand-dark); font-weight: 720; display: inline-flex; align-items: center; gap: .3rem; transition: gap .15s; }
.link-arrow:hover { gap: .55rem; }
.link-arrow .ico { width: 1em; height: 1em; }

/* ---------- Images / figures ---------- */
.img-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--bg-alt); }
.page-hero-img { width: 100%; height: auto; aspect-ratio: 21/8; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.6rem; border: 1px solid var(--line); }
figure.fig { margin: 1.8rem 0; }
figure.fig img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
figure.fig figcaption { margin-top: .6rem; font-size: .86rem; color: var(--muted); text-align: center; }
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.media-split.reverse .media-txt { order: 2; }
.media-split img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow); border: 1px solid var(--line); }
@media(max-width:820px){ .media-split{ grid-template-columns: 1fr; gap: 1.4rem;} .media-split.reverse .media-txt{ order: 0; } }

/* ---------- Steps / process ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; counter-reset: step; }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.1rem; text-align: center; box-shadow: var(--shadow-xs); }
.steps.steps-vertical { grid-template-columns: 1fr; max-width: 680px; text-align: left; }
.steps.steps-vertical li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.1rem; align-items: center; }
.steps.steps-vertical h3 { grid-column: 2; margin: 0; }
.steps.steps-vertical p { grid-column: 2; margin: 0; }
.steps.steps-vertical .step-n { grid-row: span 2; }
.step-n { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-weight: 820; border-radius: 50%; margin-bottom: .7rem; box-shadow: var(--shadow-brand); font-size: 1.1rem; }
.steps li h3 { font-size: 1.05rem; }
.steps li p { color: var(--ink-2); font-size: .92rem; margin:.2rem 0 0; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.income-table { width: 100%; border-collapse: collapse; background: #fff; }
.income-table th, .income-table td { padding: 1.05rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-2); }
.income-table th { background: var(--navy); color: #fff; font-weight: 700; letter-spacing: -.01em; }
.income-table td:first-child { font-weight: 720; width: 140px; color: var(--ink); }
.income-table tr:last-child td { border-bottom: none; }
.income-table tbody tr:hover { background: var(--bg-warm); }
.disclaimer { color: var(--muted); font-size: .88rem; margin-top: 1rem; padding-left: .2rem; }
.notice { background: linear-gradient(#fffbe9, #fff8dd); border: 1px solid #f2e4a6; border-radius: var(--radius-sm); padding: 1rem 1.2rem; color: #6a5710; font-size: .92rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .75rem; background: #fff; overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow .15s; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: #dfe4ec; }
.faq-item summary { cursor: pointer; padding: 1.15rem 1.3rem; font-weight: 700; list-style: none; position: relative; padding-right: 2.8rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--brand); font-weight: 300; transition: transform .2s; }
.faq-item[open] summary::after { content: "−"; }
.faq-a { padding: 0 1.3rem 1.25rem; color: var(--ink-2); }

/* ---------- Reviews ---------- */
.reviews { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.review { display: flex; flex-direction: column; gap: .9rem; margin: 0; }
.review .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }
.review blockquote { margin: 0; font-size: 1.02rem; color: var(--ink); line-height: 1.75; }
.review figcaption { color: var(--muted); font-size: .86rem; font-weight: 650; display:flex; align-items:center; gap:.5rem; }
.review .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--navy-2),var(--brand-dark)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }

/* ---------- Posts / blog gallery ---------- */
.posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post .post-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-alt); }
.post .post-body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.post-cat { display: inline-block; align-self: flex-start; background: var(--brand-soft); color: var(--brand-dark); font-size: .74rem; font-weight: 720; padding: .28em .8em; border-radius: 999px; margin-bottom: .7rem; }
.post h2, .post h3 { font-size: 1.12rem; }
.post .post-body p { margin: .4rem 0 0; }
.post time { color: var(--muted); font-size: .8rem; margin-top: auto; padding-top: .9rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: linear-gradient(125deg, var(--navy) 0%, var(--navy-2) 60%, #263e5a 100%); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; overflow: hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 85% 20%, rgba(255,90,31,.28), transparent 60%); }
.cta-band .wrap { position: relative; }
.cta-band h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); font-weight: 820; color:#fff; }
.cta-band p { color: rgba(255,255,255,.8); margin: .5rem 0 0; font-size: 1.05rem; }
.cta-band .cta-group { justify-content: center; }

/* ---------- Page head / breadcrumb / prose ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 1.1rem 0 0; font-size: .84rem; color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-dark); }
.breadcrumb .sep { color: var(--line); }
.page-head { padding: 3rem 0 1.6rem; }
.page-head .badge { display:inline-flex; align-items:center; gap:.4rem; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: .8rem; padding: .48em 1.05em; border-radius: 999px; margin-bottom: 1.1rem; }
.page-head h1 { font-size: clamp(2.05rem, 4.7vw, 3.1rem); font-weight: 820; letter-spacing: -.045em; line-height: 1.14; }
.page-head .lead { color: var(--ink-2); font-size: 1.16rem; max-width: 760px; line-height: 1.7; }
.lead { font-size: 1.1rem; line-height: 1.7; }

.prose { max-width: 800px; font-size: 1.04rem; }
.prose > h2 { font-size: 1.5rem; margin-top: 2.4rem; font-weight: 800; letter-spacing: -.03em; position: relative; padding-top: .4rem; }
.prose > h2::before { content:""; display:block; width: 34px; height: 3px; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius: 3px; margin-bottom: .9rem; }
.prose h3 { font-size: 1.16rem; margin-top: 1.6rem; font-weight: 750; }
.prose p { color: var(--ink-2); }
.prose a { color: var(--brand-dark); font-weight: 650; border-bottom: 1px solid rgba(255,90,31,.3); }
.prose a:hover { border-color: var(--brand); }
.prose ul, .prose ol { color: var(--ink-2); padding-left: 1.3rem; }
.prose li { margin: .4rem 0; }

.grid-2 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 2.6rem; align-items: start; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); position: sticky; top: 96px; }
.side-card h3 { font-size: 1.08rem; }
.spec-list, .highlight-box ul { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.spec-list li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line-2); font-size: .93rem; }
.spec-list span { color: var(--muted); }
.spec-list strong { color: var(--ink); }
.highlight-box { background: linear-gradient(135deg, var(--brand-soft), #fff6f1); border: 1px solid #ffe0d0; border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.highlight-box h4 { margin: 0 0 .6rem; color: var(--brand-dark); font-size: .95rem; }
.highlight-box li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; padding: .22rem 0; color: var(--ink-2); }
.highlight-box .ico, .check-list .ico { color: var(--brand); flex:none; }
.check-list { list-style: none; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; color: var(--ink-2); }
.check-list li .ico { margin-top:.28em; }

/* feature cards (why-us) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.3rem; }
.feature { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-xs); }
.feature .benefit-ico { margin-bottom: 1rem; }
.feature h3 { font-size: 1.14rem; }
.feature p { color: var(--ink-2); font-size: .97rem; margin:.5rem 0 0; }
.section-navy .feature { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.section-navy .feature h3 { color:#fff; }
.section-navy .feature p { color:#b9c6d8; }
.section-navy .feature .benefit-ico { background: rgba(255,90,31,.18); color: var(--brand-2); box-shadow:none; }

/* ---------- Regions ---------- */
.region-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.region-card { position: relative; overflow:hidden; }
.region-card .region-thumb { width: calc(100% + 3.4rem); margin: -1.7rem -1.7rem 1.1rem; aspect-ratio: 21/9; object-fit: cover; }
.region-count { display: inline-block; margin-top: .9rem; font-size: .8rem; color: var(--brand-dark); font-weight: 720; }
.district-list { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.1rem; }
.district-list a { display: flex; justify-content: space-between; align-items: center; padding: .68rem .3rem; border-bottom: 1px solid var(--line-2); font-weight: 650; font-size: .95rem; transition: .13s; }
.district-list a:hover { color: var(--brand-dark); padding-left: .6rem; }
.district-list .ico { width: 1em; height: 1em; color: var(--muted-2); }
.local-info h2, .local-jobs h2 { font-size: 1.28rem; }
.local-jobs { margin-top: 2.2rem; }
.tag-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-link { background: #fff; border: 1px solid var(--line); padding: .6em 1.05em; border-radius: 999px; font-size: .9rem; font-weight: 650; color: var(--ink-2); box-shadow: var(--shadow-xs); transition:.15s; }
.tag-link:hover { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); }
.nearby h3 { font-size: 1.14rem; }

/* ---------- 지역 고품질 페이지 ---------- */
.region-body { max-width: 900px; margin: 0 auto; padding-bottom: 2rem; }
.toc { position: sticky; top: 78px; z-index: 20; display: flex; flex-wrap: wrap; gap: .35rem; background: linear-gradient(135deg, var(--navy), var(--navy-2)); border: 1px solid var(--navy-2); border-radius: 16px; padding: .7rem .9rem; margin: 1.4rem 0 2rem; box-shadow: var(--shadow); }
.toc a { font-size: .85rem; font-weight: 650; color: #d6e0ee; padding: .42em .9em; border-radius: 999px; white-space: nowrap; transition: .14s; }
.toc a:hover { background: var(--brand); color: #fff; }
.rsec { padding: 1.6rem 0 1.9rem; border-bottom: 1px solid var(--line-2); scroll-margin-top: 130px; }
.rsec:last-child { border-bottom: none; }
.rsec > h2 { font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .9rem; }
.rsec > h2::before { content: ""; display: inline-block; width: 26px; height: 3px; vertical-align: middle; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 3px; margin-right: .55rem; }
.rsec h3 { font-size: 1.08rem; font-weight: 720; margin: 1.2rem 0 .3rem; }
.rsec p { color: var(--ink-2); }
.rsec .muted-note { color: var(--muted); font-size: .9rem; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.summary-grid .spec-list { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0; }
.summary-cta p { font-size: .95rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.4rem; }
.two-col li { padding: .3rem 0; }
.area-list { display: grid; gap: 1rem; }
.area-item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.area-item h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.area-item h3 a { color: var(--brand-dark); }
.area-item p { margin: 0; font-size: .95rem; }
.work-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.work-grid .card { padding: 1.1rem 1.2rem; }
.work-grid .card h3 { margin: 0 0 .3rem; }
.formula { background: var(--brand-soft); border: 1px solid #ffd9c6; border-radius: var(--radius-sm); padding: .8rem 1.1rem; font-weight: 650; color: var(--brand-dark); }
.rsec-apply { background: linear-gradient(135deg, var(--bg-warm), #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.rsec-apply .cta-group { justify-content: flex-start; }
.cond-links{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.related-links .tag-grid { margin-top: .3rem; }
@media (max-width: 640px) {
  .summary-grid, .two-col { grid-template-columns: 1fr; }
  .toc { position: static; }
}

/* ---------- Jobs ---------- */
.jobs-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.job-card { display: flex; flex-direction: column; }
.job-card .link-arrow { margin-top: auto; padding-top: .7rem; }

/* ---------- Education ---------- */
.edu-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.edu-card { border-top: 3px solid var(--brand); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.3rem; }
.contact-card { text-align: center; }
.contact-card .benefit-ico { margin: 0 auto .8rem; }
.contact-card small { color: var(--muted); }
.search-links { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Article ---------- */
.article-head { padding-bottom: 0; }
.article-head .post-cat { margin-bottom: .9rem; }
.article-meta { color: var(--muted); font-size: .9rem; }
.article-body { max-width: 760px; }
.article-hero { width:100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin: 1.4rem 0 .5rem; border:1px solid var(--line); }
.article-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.info-table { margin: 1.5rem 0; }
.info-table .income-table td:first-child { background: var(--bg-warm); }

/* ---------- Notice list ---------- */
.notice-list { list-style: none; padding: 0; max-width: 800px; }
.notice-list li { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.notice-list time { color: var(--brand-dark); font-weight: 720; font-size: .85rem; }
.notice-list h2 { font-size: 1.18rem; margin: .35rem 0; }
.notice-list p { color: var(--ink-2); margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--navy), #0a1420); color: #b6c3d3; padding: 3.6rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 2fr; gap: 3rem; }
.footer-brand .brand strong { color: #fff; font-size:1.2rem; }
.footer-brand p { font-size: .9rem; color: #8fa1b6; margin: 1rem 0; max-width: 400px; line-height:1.75; }
.footer-contact a { color: #fff; font-weight: 650; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.footer-cols h4 { color: #fff; font-size: .92rem; margin-bottom: .9rem; letter-spacing:-.01em; }
.footer-cols a { display: block; color: #8fa1b6; font-size: .88rem; padding: .28rem 0; transition:.13s; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 2.4rem; padding-top: 1.4rem; }
.footer-bottom p { font-size: .8rem; color: #6f8098; margin: 0; line-height:1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-card { margin: -30px 0 0; width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 860px) {
  .header-cta { display: none; }
  .header-inner { height: 64px; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: none; padding: 8px; cursor: pointer; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 64px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); margin: 0; box-shadow: var(--shadow-lg); }
  .main-nav.open { max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav-list { flex-direction: column; padding: .6rem; gap: 0; }
  .nav-link { padding: .95rem 1rem; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; border-left: 2px solid var(--brand-soft); border-radius: 0; margin: 0 0 .3rem 1rem; min-width: auto; padding: 0 0 0 .5rem; display: none; }
  .nav-item.has-dd.expanded .dropdown { display: block; }
  .media-split img { aspect-ratio: 16/10; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .cta-group .btn { width: 100%; }
  .region-card .region-thumb { width: calc(100% + 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }