/* ============================================================ location-combo-base.css — shared structure for the 20 지역+키워드 조합 페이지. Header/nav/CTA/btn/photo-row come from base.css. Each page's own page-{slug}.css only sets the CSS custom properties below (--accent 등) plus a --loc-layout modifier class on to pick one of five hero/section skeletons — that's what makes each of the 20 pages look different while keeping the markup identical. ============================================================ */ :root { --accent: #1d4ed8; --accent-dark: #1e3a8a; --accent-soft: #eef2ff; } .loc-hero { padding: 64px 20px 40px; background: var(--accent-soft); text-align: center; } .loc-hero__badge { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700; margin-bottom: 18px; } .loc-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--accent-dark); margin-bottom: 16px; } .loc-hero p { max-width: 720px; margin: 0 auto; font-size: 1.02rem; color: #334155; } /* layout-2: split hero, text left / accent panel right */ body.loc-layout-2 .loc-hero { text-align: left; display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; } body.loc-layout-2 .loc-hero p { margin: 0; } body.loc-layout-2 .loc-hero::after { content: ""; display: block; border-radius: 20px; min-height: 160px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); } @media (max-width: 760px) { body.loc-layout-2 .loc-hero { grid-template-columns: 1fr; text-align: center; } body.loc-layout-2 .loc-hero::after { display: none; } } /* layout-3: boxed hero with border, no bg fill */ body.loc-layout-3 .loc-hero { background: #fff; border: 2px solid var(--accent); border-radius: 16px; max-width: 960px; margin: 32px auto 0; } /* layout-4: diagonal accent block behind heading */ body.loc-layout-4 .loc-hero { background: #0f172a; position: relative; overflow: hidden; } body.loc-layout-4 .loc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 45%, var(--accent) 45%); opacity: .85; z-index: 0; } body.loc-layout-4 .loc-hero > * { position: relative; z-index: 1; } body.loc-layout-4 .loc-hero h1 { color: #fff; } body.loc-layout-4 .loc-hero p { color: #e2e8f0; } /* layout-5: bottom wave divider */ body.loc-layout-5 .loc-hero { padding-bottom: 56px; position: relative; } body.loc-layout-5 .loc-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .loc-section { max-width: 960px; margin: 0 auto; padding: 48px 20px; } .loc-section--alt { background: #f8fafc; } .loc-section h2 { font-size: 1.4rem; color: var(--accent-dark); margin-bottom: 14px; } .loc-section h3 { font-size: 1.08rem; color: #0f172a; margin-bottom: 6px; } .loc-section > p { margin-bottom: 14px; color: #334155; } .loc-lead { font-weight: 600; color: #0f172a !important; } .loc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; } .loc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; } body.loc-layout-3 .loc-card, body.loc-layout-5 .loc-card { border-radius: 999px 12px 12px 12px; border-color: var(--accent); } .loc-card h3 { color: var(--accent-dark); } .loc-card p { color: #475569; font-size: .94rem; } @media (max-width: 640px) { .loc-cards { grid-template-columns: 1fr; } } .loc-table-wrap { overflow-x: auto; margin: 16px 0; } .loc-table-wrap table { font-size: .92rem; } .loc-table-wrap th, .loc-table-wrap td { border: 1px solid #e2e8f0; padding: 10px 12px; text-align: left; } .loc-table-wrap thead th { background: var(--accent); color: #fff; } .loc-table-wrap tbody th { background: #f8fafc; white-space: nowrap; } .loc-note { font-size: .85rem; color: #64748b; } .loc-steps { padding-left: 1.2em; color: #334155; } .loc-steps li { margin-bottom: 10px; } .loc-faq-list details { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; background: #fff; } .loc-faq-list summary { font-weight: 700; color: #0f172a; } .loc-faq-list summary::before { content: "Q. "; color: var(--accent); } .loc-faq-list p { margin-top: 8px; color: #475569; font-size: .95rem; } .loc-related { max-width: 960px; margin: 0 auto; padding: 0 20px 8px; } .loc-related h2 { font-size: 1.15rem; color: var(--accent-dark); margin-bottom: 10px; } .loc-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .loc-related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-dark); font-size: .9rem; font-weight: 600; } .loc-related a:hover { background: var(--accent-soft); } .loc-closing { color: #475569; } @media (max-width: 480px) { .loc-hero { padding: 48px 16px 32px; } }