/*
Theme Name: 주소타임 가이드
Theme URI: https://타임주소요.com/
Author: 주소타임
Description: 주소타임의 주소모음과 링크모음 안내를 위한 3페이지 WordPress 테마입니다.
Version: 1.0.0
Text Domain: jusotime-guide
*/

:root {
  --navy: #173b63;
  --blue: #2478e5;
  --ink: #151515;
  --muted: #707070;
  --line: #e5e8ec;
  --soft: #f5f7fa;
  --paper: #ffffff;
  --content: 884px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1.78;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(var(--content), calc(100% - 36px)); margin: 0 auto; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 8px 12px; color: #fff; background: var(--navy); }
.skip-link:focus { top: 12px; }

.site-header { height: 64px; background: #fff; border-bottom: 1px solid #f1f1f1; }
.header-inner { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { width: 120px; height: 42px; position: relative; justify-self: start; overflow: hidden; text-decoration: none; }
.brand img { width: 168px; height: 89px; max-width: none; position: absolute; top: -22px; left: 0; }
.main-nav { grid-column: 2; }
.menu-list { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; list-style: none; }
.main-nav a { display: block; min-width: 126px; color: #3b3b3b; text-align: center; text-decoration: none; font-size: 13px; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav .current-menu-item > a { color: var(--blue); }
.menu-button { display: none; }

.hero { height: 235px; color: #fff; background: var(--navy); text-align: center; }
.hero-inner { padding-top: 45px; }
.hero h1 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.5; }
.hero p { max-width: 680px; margin: 10px auto 0; color: #dfeaf5; font-size: 13px; }
.hero-link { width: 314px; min-height: 35px; margin: 28px auto 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--blue); text-decoration: none; font-weight: 700; }

.section { padding: 52px 0; border-bottom: 1px solid var(--line); }
.section.soft { background: var(--soft); }
.section-heading { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.section-heading h2 { margin: 0; font-size: 20px; line-height: 1.6; }
.section-heading p { margin: 10px 0 0; color: var(--muted); }

.intro { padding-top: 36px; }
.intro-copy { max-width: 760px; margin: 0 auto; }
.intro-copy h2 { margin: 0 0 34px; text-align: center; font-size: 19px; }
.intro-copy h3 { margin: 38px 0 12px; font-size: 17px; }
.intro-copy p { margin: 0 0 18px; color: var(--muted); }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: #fff; }
.category-card { min-height: 155px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.category-card:nth-child(3n) { border-right: 0; }
.category-card:nth-last-child(-n+3) { border-bottom: 0; }
.category-card span { display: block; margin-bottom: 8px; color: var(--blue); font-size: 12px; font-weight: 700; }
.category-card strong { display: block; margin-bottom: 8px; font-size: 17px; }
.category-card p { margin: 0; color: var(--muted); font-size: 13px; }
.category-card:hover { background: #f8fbff; }

.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.route-card { padding: 28px; border: 1px solid var(--line); background: #fff; }
.route-card h2 { margin: 0 0 8px; font-size: 19px; }
.route-card p { margin: 0 0 20px; color: var(--muted); }
.text-link { color: var(--blue); font-weight: 700; text-decoration: none; }

.page-hero { padding: 56px 0; color: #fff; background: var(--navy); text-align: center; }
.page-hero h1 { margin: 0; font-size: 28px; line-height: 1.45; }
.page-hero p { max-width: 670px; margin: 12px auto 0; color: #dfeaf5; }
.page-content { padding: 58px 0 80px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin: 48px 0 14px; font-size: 22px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; font-size: 17px; }
.prose p { margin: 0 0 18px; color: #4f5964; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 22px; color: #4f5964; }
.prose li { margin-bottom: 8px; }
.status-list { margin: 24px 0; border: 1px solid var(--line); }
.status-item { padding: 20px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; border-bottom: 1px solid var(--line); }
.status-item:last-child { border-bottom: 0; }
.status-item strong { color: var(--blue); }
.status-item p { margin: 0; }
.link-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.link-group { padding: 22px; border: 1px solid var(--line); background: #fff; }
.link-group h2 { margin: 0 0 8px; font-size: 19px; }
.link-group p { margin: 0; color: var(--muted); }
.notice { margin: 30px 0; padding: 20px; border-left: 4px solid var(--blue); background: #f2f7ff; color: #3c4c60; }

.site-footer { padding: 30px 0; color: #66717c; background: #f4f4f4; text-align: center; font-size: 12px; }
.site-footer p { margin: 0; }

@media (max-width: 700px) {
  .site-header, .header-inner { height: auto; min-height: 64px; }
  .header-inner { grid-template-columns: auto 1fr; padding: 10px 0; }
  .menu-button { width: 38px; height: 38px; display: inline-flex; justify-self: end; align-items: center; justify-content: center; color: var(--navy); background: #fff; border: 1px solid var(--line); font-size: 20px; }
  .main-nav { display: none; grid-column: 1 / -1; width: 100%; padding: 10px 0 4px; }
  .main-nav.is-open { display: block; }
  .menu-list { justify-content: center; }
  .main-nav a { min-width: auto; padding: 8px 16px; }
  .hero { height: auto; min-height: 225px; }
  .hero-inner { padding: 42px 0; }
  .hero h1 { font-size: 22px; }
  .hero-link { width: min(314px, 88%); }
  .category-grid, .route-grid, .link-groups { grid-template-columns: 1fr; }
  .category-card { border-right: 0; }
  .category-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .category-card:last-child { border-bottom: 0; }
  .status-item { grid-template-columns: 1fr; gap: 5px; }
}