/* ============================================
Hans Travel — Shared Site CSS (v2.0 — Refined)
Clean, modern, premium aesthetic
============================================ */
/* --- Reset --- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: keep-all;
}
/* --- Design Tokens --- */
/* v3.0 — Bright Pretendard theme inspired by shoestring.kr. The brand color
is a deep cool blue (#31349C / oklch ≈ 0.4668 0.1409 258.56). All "navy"
tokens still exist as aliases so older component CSS keeps working, but
they now resolve to lighter values so the overall feel reads bright and
airy rather than dark/heavy. */
:root {
/* Brand palette — Egyptian Blue + cool periwinkle accents */
--brand: #31349C; /* oklch(0.4668 0.1409 258.56) — primary CTA + headings */
--brand-hover: #272A82; /* darker on hover */
--brand-soft: #D1D2F9; /* fill for soft chips / hover bg */
--brand-softer: #E8E9FC; /* hairline backgrounds */
--brand-baby: #A3BCF9; /* secondary highlight */
--brand-cool: #7796CB; /* muted brand variant */
--brand-gray: #C9CAD9; /* cool neutral border */
/* Warm accents — for "둥근, 따뜻한" feel (CTA badges, callouts) */
--warm-yellow: #F5CB5C;
--warm-sand: #E8EDDF;
--warm-sage: #CFDBD5;
--warm-stone: #52676C;
/* Legacy navy aliases — re-pointed to the brand blue so existing
component CSS keeps working but reads bright instead of black-navy. */
--navy: var(--brand);
--navy-deep: var(--brand);
--navy-90: rgba(49,52,156,.92);
--navy-70: rgba(49,52,156,.7);
--navy-40: rgba(49,52,156,.4);
/* Accent / CTA — all map to brand for a single coherent voice */
--accent: var(--brand);
--accent-hover: var(--brand-hover);
--accent-light: rgba(49,52,156,.08);
--accent-soft: var(--brand-softer);
--cta: var(--brand);
--cta-hover: var(--brand-hover);
--cta-light: var(--accent-light);
/* Supporting tones — kept for backward compat with existing classes */
--sky: var(--brand-baby);
--sky-bright: var(--brand-cool);
--mint: var(--warm-sage);
--gold-tone: var(--warm-yellow);
--sky-blue: var(--sky);
--soft-mint: var(--mint);
--gold: var(--brand);
--gold-light: var(--accent-soft);
--gold-dark: var(--brand-hover);
/* Neutrals — light, airy */
--cream: #FDFCFA;
--light: #F8F8FB;
--bg-section: #F9FAFC;
--white: #FFFFFF;
--border: oklch(0.928 0.006 264.531); /* matches shoestring.kr default border */
--border-strong: rgba(20,23,40,.14);
--text: oklch(0.13 0.028 261.692); /* very dark cool ink — for body */
--text-light: oklch(0.21 0.025 261.5); /* secondary body */
--text-muted: rgba(20,23,40,.55);
/* Semantic */
--success: #22A87B;
--danger: #E15050;
--warning: #E89B30;
/* Typography — Pretendard everywhere. The legacy --font-serif and
--font-round vars still exist as aliases, both resolving to Pretendard,
so any old usages render in the same family. (NanumSquareRound was
previously loaded from a non-existent jsdelivr path — see the comment
in _SiteLayout.cshtml around the font tags.) */
--font-sans: 'Pretendard Variable','Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
--font-round: var(--font-sans);
--font-serif: var(--font-sans);
/* Shape */
--radius-sm: 8px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Elevation — softer, more refined shadows tuned for the lighter theme */
--shadow-xs: 0 1px 2px rgba(20,23,40,.04);
--shadow-sm: 0 2px 8px rgba(20,23,40,.04), 0 1px 2px rgba(20,23,40,.03);
--shadow: 0 4px 16px rgba(20,23,40,.06), 0 1px 3px rgba(20,23,40,.04);
--shadow-lg: 0 12px 32px rgba(20,23,40,.08), 0 4px 8px rgba(20,23,40,.04);
--shadow-xl: 0 24px 48px rgba(20,23,40,.12);
/* Motion */
--ease: cubic-bezier(.25,.8,.25,1);
--transition: all .28s var(--ease);
--transition-fast: all .18s var(--ease);
}
/* --- Base --- */
html {
scroll-behavior: smooth;
/* Bumped 17 → 18px (round 3) for stronger senior readability. */
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: 96px;
}
:focus { scroll-margin-top: 96px; }
body {
font-family: var(--font-sans);
color: var(--text);
background: #f4f4f4; /* light gray page bg — content cards pop */
line-height: 1.9;
overflow-x: hidden;
font-weight: 400;
letter-spacing: -0.005em;
font-size: 18px
}
/* Larger body type and touch targets for senior readers (round 3). */
p { font-size: 18px; line-height: 1.9 }
li, td, th { font-size: 17px }
img {
max-width: 100%;
display: block
}
a {
text-decoration: none;
color: inherit
}
button {
font-family: inherit
}
::selection {
background: var(--accent);
color: var(--white)
}
/* --- Layout --- */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 28px
}
/* --- Header --- */
.header {
position: fixed;
/* --header-top 은 JS(_SiteLayout)가 배너 높이에 맞춰 설정한다(배너 없으면 0).
배너 아래로 헤더를 정확히 내려 겹침을 막는다. */
top: var(--header-top, 0px);
left: 0;
right: 0;
z-index: 1000;
transition: background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.header--transparent {
background: transparent;
border-bottom: 1px solid transparent
}
.header--solid {
background: var(--white);
border-bottom: 1px solid var(--border)
}
.header.scrolled {
background: rgba(255,255,255,.96);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
box-shadow: 0 1px 0 var(--border);
border-bottom: none
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
max-width: 1280px;
margin: 0 auto;
padding: 0 28px
}
.header--solid .header-inner {
height: 80px
}
/* Logo color on transparent vs scrolled */
.header--transparent:not(.scrolled) .logo-img, .logo-white {
filter: brightness(0) invert(1)
}
.logo {
display: flex;
align-items: center;
gap: 10px
}
.logo-img {
height: 100px;
width: auto;
transition: filter .25s var(--ease)
}
.header--solid .logo-img {
height: 64px
}
/* --- Nav --- */
.nav {
display: flex;
align-items: center;
gap: 44px
}
.nav a {
color: var(--text);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
transition: var(--transition-fast);
position: relative;
padding: 6px 0
}
/* White nav text only on TOP-LEVEL nav links — NOT on links inside the mega dropdown,
which has its own white panel and needs dark text. The `>` direct-child combinators
prevent the rule from leaking into .mega-dropdown descendants. */
.header--transparent:not(.scrolled) .nav > a,
.header--transparent:not(.scrolled) .nav > .nav-item > .nav-mega-trigger,
.header--transparent:not(.scrolled) .nav > .nav-item > .nav-simple-trigger {
color: rgba(255,255,255,.92)
}
.header--transparent:not(.scrolled) .nav > a:hover,
.header--transparent:not(.scrolled) .nav > .nav-item > .nav-mega-trigger:hover,
.header--transparent:not(.scrolled) .nav > .nav-item > .nav-simple-trigger:hover {
color: #fff
}
.nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.5px;
background: var(--accent);
transition: width .28s var(--ease)
}
.nav a:hover {
color: var(--accent)
}
.nav a:hover::after {
width: 100%
}
.nav-cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
background: var(--accent) !important;
color: var(--white) !important;
padding: 12px 24px !important;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 16px !important;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap
}
.nav-cta i {
font-size: 17px
}
.header--transparent:not(.scrolled) .nav-cta {
background: var(--white) !important;
color: var(--navy) !important
}
.nav-cta::after {
display: none !important
}
.nav-cta:hover {
background: var(--accent-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(43,127,255,.3)
}
.header--transparent:not(.scrolled) .nav-cta:hover {
background: var(--white) !important;
color: var(--accent) !important;
box-shadow: 0 4px 12px rgba(255,255,255,.2)
}
.header--solid .nav {
gap: 40px
}
.header--solid .nav a {
font-size: 16px
}
.header--solid .nav-cta {
padding: 11px 22px !important
}
.mobile-toggle {
display: none;
color: var(--text);
font-size: 26px;
cursor: pointer;
background: none;
border: none;
padding: 6px
}
.header--transparent:not(.scrolled) .mobile-toggle {
color: #fff
}
/* --- Buttons --- */
/* Button base — round 3: 44px tall, 16px font for clear senior tap targets. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 10px 20px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
line-height: 22px;
letter-spacing: -0.005em;
transition: var(--transition-fast);
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,.05)
}
/* Primary — brand blue fill, white ink. */
.btn-primary,
.btn-gold {
background: var(--brand);
color: #FFFFFF;
border-color: var(--brand)
}
.btn-primary:hover,
.btn-gold:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(49,52,156,.25)
}
.btn-primary:disabled,
.btn-gold:disabled {
opacity: .5;
pointer-events: none
}
/* Secondary — light fill, brand-blue ring, dark ink. */
.btn-secondary {
background: #F8F8FA;
color: var(--text);
border: 1px solid var(--brand)
}
.btn-secondary:hover {
background: var(--brand-softer);
border-color: var(--brand-hover)
}
/* Existing outline variants kept for backward compat with hero/dark sections. */
.btn-outline {
background: rgba(255,255,255,.12);
color: var(--white);
border: 1px solid rgba(255,255,255,.45);
backdrop-filter: blur(8px);
box-shadow: none
}
.btn-outline:hover {
border-color: var(--white);
background: rgba(255,255,255,.22)
}
.btn-outline-light {
background: transparent;
color: var(--white);
border: 1px solid rgba(255,255,255,.5);
box-shadow: none
}
.btn-outline-light:hover {
background: rgba(255,255,255,.12);
border-color: var(--white)
}
.btn-outline-dark {
background: #FFFFFF;
color: var(--text);
border: 1px solid var(--border-strong)
}
.btn-outline-dark:hover {
background: var(--brand);
color: #FFFFFF;
border-color: var(--brand)
}
.btn-lg {
height: 56px;
padding: 16px 28px;
font-size: 17px
}
/* --- Section Shared --- */
.section {
padding: 100px 0
}
.section-header {
text-align: center;
margin-bottom: 56px;
max-width: 720px;
margin-left: auto;
margin-right: auto
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 14px
}
.section-tag i {
font-size: 11px
}
.section-title {
font-family: var(--font-sans);
font-size: clamp(28px,3.4vw,34px); /* round 3 — +1 step again */
font-weight: 700;
color: var(--brand);
line-height: 1.4;
letter-spacing: -0.02em
}
.section-subtitle {
color: var(--text-light);
font-size: 19px;
margin-top: 14px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
line-height: 1.9
}
/* Inline icon/image rendered next to a section title (CMS title_icon /
title_image). Sized relative to the title font so this single rule controls
the mark's size/style across every home/section partial. Works for both an
![]()
(height scales with the title) and an Remix icon (font-size). */
.section-title-mark {
height: 28px;
width: auto;
font-size: 1em;
line-height: 1;
flex: 0 0 auto;
vertical-align: middle;
}
/* Wrapper that lays out the title text + its mark on one line, inheriting the
heading's alignment. Only emitted when a mark is present, so plain titles are
untouched. */
.section-title-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4em;
flex-wrap: wrap;
}
/* --- Footer --- */
/* v3.0 — bright footer to match the new theme. Cool light fill, dark ink,
brand blue for accents. Previous dark-navy footer is preserved as an
opt-in variant via .footer--dark for pages that want the heavy treatment. */
.footer {
background: #F8F8FB;
color: rgba(20,23,40,.7);
padding: 20px 0 20px;
border-top: 2px solid #fff;
}
.footer--dark {
background: var(--brand);
color: rgba(255,255,255,.7);
border-top: 0
}
.footer--simple {
padding: 40px 0;
text-align: center;
font-size: 13px;
color: rgba(20,23,40,.5)
}
.footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
gap: 56px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border)
}
.footer-brand .logo-text {
margin-bottom: 18px;
line-height: 0
}
.footer-brand .logo-text img {
height: 80px;
width: auto;
display: block;
/* Brighten back to original full-color logo (no white-invert) for the
light footer. The dark variant restores the invert via .footer--dark. */
filter: none
}
.footer--dark .footer-brand .logo-text img {
filter: brightness(0) invert(1)
}
.footer-brand .logo-text span {
color: var(--brand);
font-weight: 500;
margin-left: 2px
}
.footer-brand p {
font-size: 16px;
line-height: 1.9;
max-width: 360px;
color: rgba(20,23,40,.7);
margin-bottom: 18px
}
.footer--dark .footer-brand p {
color: rgba(255,255,255,.6)
}
.footer h4 {
color: var(--brand);
font-size: 15px;
font-weight: 700;
margin-bottom: 18px;
letter-spacing: 1.2px;
text-transform: uppercase
}
.footer--dark h4 {
color: var(--white)
}
.footer ul {
list-style: none
}
.footer li {
margin-bottom: 9px
}
.footer li a {
font-size: 16px;
color: rgba(20,23,40,.78);
transition: color .2s var(--ease)
}
.footer li a:hover {
color: var(--brand)
}
.footer--dark li a {
color: rgba(255,255,255,.65)
}
.footer--dark li a:hover {
color: var(--brand-baby)
}
.footer-contact p {
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: rgba(20,23,40,.82)
}
.footer--dark .footer-contact p {
color: rgba(255,255,255,.7)
}
.footer-contact p i {
flex-shrink: 0;
width: 16px;
text-align: center
}
/* The address is the one contact row that wraps onto multiple lines, so it
needs flex-start so the icon stays pinned to the first line instead of
centering against the full block. The text node lives inside a span so
behaves naturally (otherwise the
would just be an inert flex
sibling between two text fragments and would not visually break). */
.footer-contact p.footer-address {
align-items: flex-start;
margin-top: 4px
}
.footer-contact p.footer-address i {
margin-top: 3px
}
.footer-address-block {
line-height: 1.9;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
font-size: 14.5px;
color: rgba(20,23,40,.7);
flex-wrap: wrap;
gap: 16px
}
.footer--dark .footer-bottom {
color: rgba(255,255,255,.4)
}
.footer-slogan {
font-style: italic;
color: rgba(20,23,40,.45);
margin-left: 8px
}
.footer--dark .footer-slogan {
color: rgba(255,255,255,.4)
}
/* Legal/policy links in the footer bottom row. Need explicit color so they
don't inherit the white-on-dark color from the parent .footer-bottom when
on the new light footer. */
.footer-bottom-right { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom-right a {
color: var(--brand);
font-weight: 500;
font-size: 14.5px;
transition: color .2s var(--ease)
}
.footer-bottom-right a:hover {
color: var(--brand-hover);
text-decoration: underline
}
.footer--dark .footer-bottom-right a {
color: rgba(255,255,255,.75)
}
.footer--dark .footer-bottom-right a:hover {
color: #fff
}
.footer-social {
display: flex;
gap: 12px;
flex-wrap: wrap
}
/* Larger, filled, brand-colored circles so the SNS links are prominent. */
.footer-social a {
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
background: var(--brand);
box-shadow: var(--shadow-sm);
transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease)
}
.footer-social a:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
filter: brightness(1.06)
}
/* Per-platform brand colors so each icon is instantly recognizable. */
.footer-social a.sns-youtube { background: #FF0000 }
.footer-social a.sns-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) }
.footer-social a.sns-facebook { background: #1877F2 }
.footer-social a.sns-kakao { background: #FEE500; color: #3C1E1E }
/* Slogan line shown after the logo/description in the footer brand block. */
.footer-brand-slogan {
font-size: 16px;
font-weight: 600;
color: var(--brand);
margin: -4px 0 18px;
max-width: 360px;
line-height: 1.7
}
/* Footer contact links inherit the muted text color; brand accent on hover. */
.footer-contact a:hover { color: var(--brand) }
/* On the dark footer, --brand (#31349C) is nearly invisible against the navy
background, so use the light accent instead (matches .footer--dark li a:hover). */
.footer--dark .footer-contact a:hover { color: var(--brand-baby) }
/* --- Floating CTA ---
v3.1 — Senior-friendly stack: each button is a square card with icon
stacked over a Korean text label. The previous icon-only circle was hard
to interpret without hovering for the data-tip; this version puts the
label inline so elderly customers can identify the action at a glance.
The legacy `data-tip` attribute is kept as the accessible name (used by
the icon-only fallback when text label is absent, e.g. admin-managed
floating icons that don't ship with translated labels). */
.float-cta {
position: fixed;
bottom: 16px;
right: 18px;
/* Above the top promo banner (z-index 1001) so the topmost button
(카톡 상담) is never clipped behind it when the column is tall. */
z-index: 1002;
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
/* Never grow past the viewport — the column is bottom-anchored and grows
upward, so cap its height (leaving room for the header) and let it scroll
if a very short window can't fit every button. Scrollbar is hidden so it
stays clean. The hidden 맨 위로 button is also removed from the flow on
desktop (see .float-top:not(.show) below) so it no longer reserves space
at the bottom and the whole stack sits lower. */
max-height: calc(100vh - 96px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none
}
.float-cta::-webkit-scrollbar { width: 0; height: 0 }
/* Desktop only: when the scroll-top button is hidden (page near the top) drop it
out of layout so it doesn't reserve an empty button slot at the bottom of the
column. Mobile (≤768px) keeps it in the fixed app-bar grid. */
@media (min-width: 769px) {
.float-top:not(.show) { display: none }
}
/* Every floating button is a uniform WHITE card with consistent ink text — so
no single button (카톡/유튜브) dominates the column. The brand color lives
ONLY in the small round icon badge at the top of each button. The badge fill
/ glyph color come from --fab-badge-bg / --fab-badge-fg (per-button rules
below for the fixed buttons; inline custom-props for admin-managed icons). */
.float-btn {
width: 100px;
min-height: 58px;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 4px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
text-align: center;
line-height: 1.2;
box-shadow: var(--shadow-lg);
transition: var(--transition);
cursor: pointer;
text-decoration: none;
background: var(--white);
color: var(--text, #14233a);
border: 1px solid var(--border)
}
.float-btn i {
font-size: 17px;
line-height: 1;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fab-badge-bg, var(--brand));
color: var(--fab-badge-fg, var(--white))
}
.float-btn .float-label {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text, #14233a)
}
.float-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
border-color: var(--brand-soft)
}
/* Per-button badge colors — the CARD stays white, only the round icon changes.
카톡 상담 is now an admin-managed FloatingIcon; its badge color comes from the
icon's BackgroundColor/FontColor fields (--fab-badge-bg/fg) like the others. */
.float-phone i { background: var(--brand); color: var(--white) }
.float-top {
opacity: 0;
pointer-events: none;
transform: translateY(10px)
}
.float-top i { background: var(--brand-softer); color: var(--brand) }
.float-top.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0)
}
/* Admin-managed floating icons (Phase 7) — inherit the white card; their badge
color comes from --fab-badge-bg/fg set inline from the admin BackgroundColor
/ FontColor fields (default brand when unset). */
/* Hover caption (data-tip) — only shown when the button has NO inline
.float-label child (i.e., admin icons without translated labels). */
.float-btn[data-tip]:not(:has(.float-label)) {
position: relative
}
.float-btn[data-tip]:not(:has(.float-label))::after {
content: attr(data-tip);
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(6px);
background: var(--brand);
color: #fff;
font-size: 12.5px;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 4px 12px rgba(20,35,58,.18)
}
.float-btn[data-tip]:not(:has(.float-label)):hover::after,
.float-btn[data-tip]:not(:has(.float-label)):focus-visible::after {
opacity: 1;
transform: translateY(-50%) translateX(0)
}
@media (max-width: 768px) {
.float-btn[data-tip]::after { display: none }
}
@media(max-width: 640px) {
.float-cta { bottom: 14px; right: 10px; gap: 8px }
.float-btn { width: 62px; min-height: 62px; padding: 7px 3px }
.float-btn i { font-size: 19px }
.float-btn .float-label { font-size: 11px }
}
/* --- Reveal Animation --- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s var(--ease),transform .7s var(--ease)
}
.reveal.visible {
opacity: 1;
transform: translateY(0)
}
/* --- Scroll Pagination --- */
.landing-scroll-pagination {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 10px
}
.landing-scroll-pagination__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px
}
.landing-scroll-pagination__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(20,35,58,.18);
border: none;
cursor: pointer;
transition: var(--transition-fast);
padding: 0
}
.landing-scroll-pagination__dot:hover {
background: rgba(20,35,58,.4)
}
.landing-scroll-pagination__dot--active {
background: var(--accent);
transform: scale(1.5);
box-shadow: 0 0 0 4px rgba(43,127,255,.15)
}
/* --- Tour Cards (shared) --- */
.tour-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
transition: var(--transition);
position: relative;
display: flex;
flex-direction: column
}
.tour-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: transparent
}
.card-img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 4/3
}
.card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease)
}
.tour-card:hover .card-img-wrap img {
transform: scale(1.06)
}
.card-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
display: flex;
gap: 6px
}
.badge {
padding: 5px 10px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
backdrop-filter: blur(8px)
}
.badge-hot {
background: rgba(225,80,80,.95);
color: #fff
}
.badge-new {
background: rgba(43,127,255,.95);
color: #fff
}
.badge-confirmed {
background: rgba(216,242,230,.95);
color: #0B6B47
}
/* 단독(한스 자체기획) / 연합(공동모객) 투어 구분 배지 — 카드·상세 공통 */
.badge-exclusive {
background: rgba(15,30,60,.92);
color: #F5D48E
}
.badge-exclusive i {
font-size: 11px;
vertical-align: -1px;
margin-right: 2px
}
.badge-union {
background: rgba(255,255,255,.92);
color: #33415C;
border: 1px solid rgba(15,30,60,.18)
}
.card-body {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
flex: 1
}
.card-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
color: var(--text-muted);
font-size: 12px;
font-weight: 500
}
.card-meta span {
display: flex;
align-items: center;
gap: 4px
}
.card-title {
font-size: 15.5px;
font-weight: 700;
color: #000;
margin-bottom: 4px;
line-height: 1.6;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.card-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px
}
.card-tag {
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--light);
font-size: 11px;
color: var(--text-light);
font-weight: 500
}
.card-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--border);
margin-top: auto
}
.card-price {
font-family: var(--font-sans)
}
.card-price small {
font-size: 11px;
color: var(--text-muted);
display: block;
margin-bottom: 2px
}
.card-price strong {
font-size: 20px;
color: var(--navy);
font-weight: 800;
letter-spacing: -0.02em
}
.card-seats {
font-size: 12px;
color: var(--accent);
font-weight: 600
}
.card-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--accent);
font-size: 13px;
font-weight: 600;
transition: var(--transition-fast)
}
.card-link:hover {
color: var(--accent-hover);
gap: 8px
}
/* --- Responsive --- */
@media(max-width:1024px) {
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 36px
}
}
@media(max-width:768px) {
.nav {
display: none;
position: absolute;
top: 72px;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
align-items: stretch;
padding: 20px 28px;
gap: 0;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow)
}
.nav a {
padding: 14px 0;
border-bottom: 1px solid var(--border);
font-size: 15px
}
.nav a::after {
display: none
}
.nav-cta {
margin-top: 12px;
text-align: center;
justify-content: center
}
.mobile-toggle {
display: block
}
.section {
padding: 64px 0
}
.section-header {
margin-bottom: 40px
}
.footer-top {
grid-template-columns: 1fr;
gap: 32px
}
.container {
padding: 0 20px
}
.header-inner {
padding: 0 20px
}
.float-btn {
width: 48px;
height: 48px;
font-size: 18px
}
.landing-scroll-pagination {
display: none
}
}
/* ============================================================
FONT-SIZE UNIFICATION (3-tier system)
------------------------------------------------------------
Whole-site text uses exactly three sizes:
1) Super big — page hero titles clamp(38px, 5.6vw, 70px)
Applied to: , .hero-title, [class*="hero-title"]
2) Big — section headers 30px, color: var(--navy)
Applied to: , .section-title, [class*="section-title"]
3) Regular — everything else 19px
Uses !important to defeat the ~550 inline font-size
declarations spread across .cshtml view files. and