:root {
--bg: #0a0a0a;
--bg-alt: #131313;
--bg-card: #1c1b18;
--bg-card-hover: #232220;
--border: #2d2c28;
--border-strong: #3d3b35;
--text: #f6f1e6;
--text-soft: #d9d3c4;
--text-dim: #b3ad9e;
--accent: #d4ad6a;
--accent-bright: #e6c084;
--accent-dark: #a8854a;
--accent-glow: rgba(212, 173, 106, 0.18);
--kakao: #fee500;
--kakao-text: #1a1a1a;
--max-width: 1200px;
--header-h: 72px;
--radius: 14px;
--radius-sm: 8px;
--transition: 0.22s ease;
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
font-size: 17px;
}
body {
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.75;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-bright); }
ul, ol { list-style: none; }
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 28px;
}
.container-narrow { max-width: 860px; }
.section {
padding: 110px 0;
position: relative;
}
.section-alt {
background: var(--bg-alt);
}
.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
margin-bottom: 18px;
color: var(--text);
}
.section-lead {
color: var(--text-soft);
font-size: clamp(15px, 1.8vw, 17px);
max-width: 680px;
margin: 0 auto;
line-height: 1.8;
}
.micro-cta {
text-align: center;
margin-top: 48px;
}
.micro-cta a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent);
font-weight: 700;
font-size: 15px;
padding: 8px 4px;
border-bottom: 1px solid var(--accent-dark);
}
.micro-cta a:hover {
color: var(--accent-bright);
border-bottom-color: var(--accent-bright);
}
.icon { width: 1em; height: 1em; flex-shrink: 0; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.88);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--border);
height: var(--header-h);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 32px;
}
.logo {
font-weight: 900;
font-size: 20px;
letter-spacing: -0.03em;
color: var(--text);
white-space: nowrap;
}
.logo .logo-accent { color: var(--accent); }
.gnb > ul {
display: flex;
align-items: center;
gap: 22px;
}
.gnb a {
font-size: 14.5px;
font-weight: 400;
color: var(--text-soft);
padding: 6px 0;
position: relative;
white-space: nowrap;
}
.gnb a:hover { color: var(--text); }
.gnb .caret {
display: inline-block;
margin-left: 2px;
font-size: 10px;
color: var(--text-dim);
transition: transform var(--transition);
}
.has-dropdown:hover > a .caret { transform: rotate(180deg); color: var(--accent); }
.has-dropdown { position: relative; }
.dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 8px 0;
min-width: 210px;
opacity: 0;
visibility: hidden;
transition: all var(--transition);
box-shadow: var(--shadow-lg);
}
.dropdown li a {
display: block;
padding: 11px 22px;
font-size: 14px;
}
.dropdown li a:hover { background: var(--bg-alt); color: var(--accent-bright); }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.header-cta { display: flex; gap: 10px; align-items: center; }
.btn-phone, .btn-kakao {
font-size: 13px;
font-weight: 700;
padding: 10px 16px;
border-radius: 8px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-phone {
background: var(--accent);
color: #1a1410;
}
.btn-phone:hover { background: var(--accent-bright); color: #1a1410; }
.btn-kakao {
background: var(--kakao);
color: var(--kakao-text);
}
.btn-kakao:hover { color: var(--kakao-text); opacity: 0.92; }
.mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 36px;
height: 36px;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 0;
}
.mobile-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--text);
margin: 0 auto;
transition: var(--transition);
}
.hero {
position: relative;
min-height: calc(100vh - var(--header-h));
display: flex;
align-items: center;
overflow: hidden;
padding: 100px 0 80px;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(212, 173, 106, 0.22) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(168, 133, 74, 0.12) 0%, transparent 55%),
linear-gradient(180deg, #0a0a0a 0%, #1a1410 50%, #0a0a0a 100%);
z-index: 0;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(212, 173, 106, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.6;
}
.hero-inner {
position: relative;
z-index: 1;
text-align: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--accent-bright);
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid var(--accent-dark);
background: rgba(212, 173, 106, 0.06);
padding: 9px 20px;
border-radius: 999px;
margin-bottom: 32px;
}
.hero-title {
font-size: clamp(36px, 6.4vw, 64px);
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.04em;
margin-bottom: 24px;
color: var(--text);
}
.hero-brand {
display: inline-block;
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 50%, var(--accent-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.hero-sub {
font-size: clamp(16px, 2vw, 19px);
color: var(--text-soft);
margin-bottom: 44px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.hero-meta {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 52px;
}
.hero-meta li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 400;
color: var(--text-soft);
background: rgba(255, 255, 255, 0.04);
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--border);
}
.hero-meta li .icon { color: var(--accent); width: 18px; height: 18px; }
.hero-cta {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 32px;
font-size: 15px;
font-weight: 700;
border-radius: 10px;
transition: all var(--transition);
white-space: nowrap;
border: 2px solid transparent;
cursor: pointer;
}
.btn-large {
padding: 20px 44px;
font-size: 17px;
border-radius: 12px;
}
.btn-primary {
background: var(--accent);
color: #1a1410;
box-shadow: 0 8px 24px rgba(212, 173, 106, 0.22);
}
.btn-primary:hover {
background: var(--accent-bright);
color: #1a1410;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(212, 173, 106, 0.32);
}
.btn-secondary {
background: var(--kakao);
color: var(--kakao-text);
box-shadow: 0 8px 24px rgba(254, 229, 0, 0.18);
}
.btn-secondary:hover {
color: var(--kakao-text);
opacity: 0.95;
transform: translateY(-2px);
}
.trust-bar {
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-alt) 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 28px 0;
}
.trust-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.trust-item {
display: flex;
align-items: center;
gap: 14px;
justify-content: center;
}
.trust-item .icon-wrap {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(212, 173, 106, 0.12);
display: grid;
place-items: center;
color: var(--accent);
flex-shrink: 0;
}
.trust-item .icon-wrap .icon { width: 20px; height: 20px; }
.trust-item .trust-text {
font-size: 14px;
color: var(--text-soft);
line-height: 1.4;
text-align: left;
}
.trust-item .trust-text strong {
color: var(--text);
font-weight: 700;
display: block;
margin-bottom: 2px;
}
.intro {
padding: 100px 0;
}
.intro-content {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.intro-content p {
font-size: clamp(16px, 1.9vw, 19px);
color: var(--text-soft);
line-height: 1.95;
margin-bottom: 22px;
}
.intro-content p:last-child { margin-bottom: 0; }
.intro-content strong {
color: var(--text);
font-weight: 700;
}
.intro-highlight {
color: var(--accent-bright) !important;
font-weight: 700;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 30px;
transition: all var(--transition);
}
.feature-card:hover {
border-color: var(--accent-dark);
background: var(--bg-card-hover);
transform: translateY(-4px);
}
.feature-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212, 173, 106, 0.18) 0%, rgba(212, 173, 106, 0.04) 100%);
border: 1px solid var(--border-strong);
display: grid;
place-items: center;
color: var(--accent);
margin-bottom: 22px;
}
.feature-icon .icon { width: 26px; height: 26px; }
.feature-card h3 {
font-size: 19px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text);
letter-spacing: -0.02em;
}
.feature-card p {
font-size: 15px;
color: var(--text-soft);
line-height: 1.8;
}
.system-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.system-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 36px;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.system-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-dark), var(--accent-bright), var(--accent-dark));
opacity: 0;
transition: opacity var(--transition);
}
.system-card:hover { border-color: var(--border-strong); }
.system-card:hover::before { opacity: 1; }
.system-card .system-tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}
.system-card h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 18px;
color: var(--text);
letter-spacing: -0.02em;
}
.system-card .system-desc {
font-size: 15px;
color: var(--text-soft);
margin-bottom: 24px;
line-height: 1.8;
}
.system-card ul li {
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 15px;
color: var(--text-soft);
display: flex;
justify-content: space-between;
gap: 16px;
}
.system-card ul li:last-child { border-bottom: none; }
.system-card ul li .label { color: var(--text-dim); font-size: 14px; }
.system-card ul li .value { color: var(--text); font-weight: 700; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1020px;
margin: 0 auto;
}
.pricing-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 38px 30px;
text-align: center;
transition: all var(--transition);
}
.pricing-card:hover {
border-color: var(--accent-dark);
transform: translateY(-3px);
}
.pricing-card .pricing-icon {
width: 48px;
height: 48px;
margin: 0 auto 18px;
color: var(--accent);
}
.pricing-card .pricing-icon .icon { width: 100%; height: 100%; }
.pricing-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 14px;
color: var(--text);
}
.pricing-card .price {
font-size: 17px;
color: var(--accent-bright);
font-weight: 700;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.pricing-card .pricing-desc {
font-size: 14px;
color: var(--text-dim);
line-height: 1.65;
}
.pricing-note {
margin-top: 36px;
text-align: center;
padding: 20px 28px;
background: rgba(212, 173, 106, 0.06);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-soft);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.occasions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.occasion-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px 24px;
text-align: center;
transition: all var(--transition);
}
.occasion-card:hover {
border-color: var(--accent-dark);
background: var(--bg-card-hover);
}
.occasion-card .occ-emoji {
font-size: 36px;
margin-bottom: 14px;
display: block;
filter: saturate(0.85);
}
.occasion-card h3 {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text);
}
.occasion-card p {
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
}
.location-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.location-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
transition: all var(--transition);
display: block;
color: var(--text);
position: relative;
overflow: hidden;
}
.location-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: scaleX(0);
transition: transform var(--transition);
}
.location-card:hover {
border-color: var(--accent-dark);
transform: translateY(-4px);
background: var(--bg-card-hover);
color: var(--text);
}
.location-card:hover::after { transform: scaleX(1); }
.location-card h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 14px;
color: var(--text);
letter-spacing: -0.02em;
}
.location-card .location-areas {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 10px;
}
.location-card .location-distance {
font-size: 18px;
color: var(--accent-bright);
font-weight: 700;
margin-bottom: 18px;
}
.location-card .location-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 700;
color: var(--accent);
}
.review-summary {
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.review-summary-item {
text-align: center;
}
.review-summary-item .num {
font-size: 36px;
font-weight: 700;
color: var(--accent-bright);
letter-spacing: -0.03em;
line-height: 1;
}
.review-summary-item .label {
font-size: 13px;
color: var(--text-dim);
margin-top: 6px;
}
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
transition: border-color var(--transition);
}
.review-card:hover { border-color: var(--border-strong); }
.review-rating {
color: var(--accent-bright);
font-size: 16px;
margin-bottom: 16px;
letter-spacing: 3px;
}
.review-text {
font-size: 15px;
color: var(--text);
margin-bottom: 20px;
line-height: 1.85;
}
.review-meta {
font-size: 13px;
color: var(--text-dim);
border-top: 1px solid var(--border);
padding-top: 16px;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--transition);
}
.faq-item:hover, .faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
cursor: pointer;
padding: 24px 28px;
font-size: 16px;
font-weight: 700;
list-style: none;
position: relative;
padding-right: 60px;
color: var(--text);
transition: background var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '';
position: absolute;
right: 28px;
top: 50%;
width: 12px;
height: 12px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: translateY(-75%) rotate(45deg);
transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-item summary:hover { background: var(--bg-card-hover); }
.faq-item .faq-answer {
padding: 0 28px 26px;
color: var(--text-soft);
font-size: 15px;
line-height: 1.85;
}
.directions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 940px;
margin: 0 auto;
}
.directions-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 30px;
}
.directions-card h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
margin-bottom: 18px;
color: var(--text);
}
.directions-card h3 .icon {
width: 22px;
height: 22px;
color: var(--accent);
}
.directions-card ol, .directions-card ul {
padding-left: 0;
}
.directions-card li {
padding: 10px 0;
padding-left: 28px;
position: relative;
font-size: 15px;
color: var(--text-soft);
line-height: 1.7;
border-bottom: 1px solid var(--border);
}
.directions-card li:last-child { border-bottom: none; }
.directions-card li::before {
content: '';
position: absolute;
left: 0;
top: 20px;
width: 14px;
height: 2px;
background: var(--accent);
}
.section-cta {
background:
radial-gradient(ellipse at 50% 50%, rgba(212, 173, 106, 0.18) 0%, transparent 65%),
linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
text-align: center;
padding: 120px 0;
}
.cta-title {
font-size: clamp(28px, 4.4vw, 44px);
font-weight: 700;
margin-bottom: 18px;
letter-spacing: -0.03em;
line-height: 1.25;
}
.cta-sub {
color: var(--text-soft);
font-size: 17px;
margin-bottom: 44px;
line-height: 1.7;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.error-page {
min-height: calc(100vh - var(--header-h));
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
background:
radial-gradient(ellipse at 50% 30%, rgba(212, 173, 106, 0.12) 0%, transparent 60%),
var(--bg);
text-align: center;
}
.error-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.error-code {
font-size: clamp(96px, 18vw, 180px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.06em;
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 50%, var(--accent-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 28px;
}
.error-title {
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 16px;
}
.error-text {
font-size: 16px;
color: var(--text-soft);
line-height: 1.85;
margin-bottom: 40px;
}
.error-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.error-links {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.error-links h3 {
font-size: 14px;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.error-links ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 20px;
list-style: none;
padding: 0;
}
.error-links a {
font-size: 14px;
color: var(--text-soft);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.error-links a:hover { color: var(--accent-bright); border-bottom-color: var(--accent-dark); }
.review-back-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
margin-bottom: 32px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: var(--text-soft);
text-decoration: none;
transition: all var(--transition);
}
.review-back-link::before {
content: '←';
font-size: 18px;
color: var(--accent);
transition: transform var(--transition);
}
.review-back-link:hover {
border-color: var(--accent-dark);
color: var(--accent-bright);
background: var(--bg-card-hover);
}
.review-back-link:hover::before { transform: translateX(-3px); }
.review-pager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 880px;
margin: 48px auto 0;
}
.review-pager a {
display: block;
padding: 22px 24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
text-decoration: none;
transition: all var(--transition);
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: center;
}
.review-pager a:hover {
border-color: var(--accent-dark);
transform: translateY(-2px);
background: var(--bg-card-hover);
}
.review-pager .pager-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.review-pager .pager-prev .pager-label::before {
content: '←';
color: var(--accent);
font-size: 16px;
}
.review-pager .pager-next {
text-align: right;
}
.review-pager .pager-next .pager-label {
justify-content: flex-end;
}
.review-pager .pager-next .pager-label::after {
content: '→';
color: var(--accent);
font-size: 16px;
}
.review-pager .pager-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
line-height: 1.45;
letter-spacing: -0.02em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-pager .pager-empty {
background: transparent;
border: 1px dashed var(--border);
color: var(--text-dim);
text-align: center;
font-size: 13px;
cursor: default;
}
.review-pager .pager-empty:hover {
transform: none;
border-color: var(--border);
background: transparent;
}
@media (max-width: 640px) {
.review-pager { grid-template-columns: 1fr; }
.review-pager .pager-next { text-align: left; }
.review-pager .pager-next .pager-label { justify-content: flex-start; }
}
.reviews-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 880px;
margin: 0 auto 64px;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-alt) 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.reviews-stats::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-dark), var(--accent-bright), var(--accent-dark));
}
.reviews-stat-item {
padding: 30px 24px;
text-align: center;
border-right: 1px solid var(--border);
}
.reviews-stat-item:last-child { border-right: none; }
.reviews-stat-item .stat-value {
font-size: clamp(32px, 4vw, 42px);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.reviews-stat-item .stat-label {
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.reviews-stat-item .stat-stars {
margin-top: 6px;
color: var(--accent-bright);
font-size: 14px;
letter-spacing: 2px;
}
.review-album {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1140px;
margin: 0 auto;
}
.review-card-thumb {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
.review-card-thumb:hover {
transform: translateY(-6px);
border-color: var(--accent-dark);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 173, 106, 0.1);
}
.review-card-visual {
position: relative;
aspect-ratio: 4 / 3;
background:
radial-gradient(ellipse at 30% 20%, rgba(212, 173, 106, 0.32) 0%, transparent 55%),
radial-gradient(ellipse at 70% 80%, rgba(168, 133, 74, 0.18) 0%, transparent 55%),
linear-gradient(135deg, #1a1410 0%, #0a0a0a 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.review-card-visual::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(212, 173, 106, 0.08) 1px, transparent 0);
background-size: 24px 24px;
}
.review-card-visual .quote-mark {
font-family: Georgia, serif;
font-size: 160px;
line-height: 1;
color: rgba(212, 173, 106, 0.16);
font-weight: 900;
user-select: none;
position: absolute;
top: -30px;
left: 20px;
}
.review-card-visual .visual-rating {
position: relative;
z-index: 2;
text-align: center;
}
.review-card-visual .visual-rating .stars-big {
font-size: 32px;
color: var(--accent-bright);
letter-spacing: 4px;
margin-bottom: 8px;
filter: drop-shadow(0 2px 8px rgba(212, 173, 106, 0.3));
}
.review-card-visual .visual-rating .num-big {
font-size: 48px;
font-weight: 900;
color: var(--text);
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(135deg, var(--accent-bright), var(--accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.review-card-visual .visual-rating .num-big small {
font-size: 18px;
color: var(--text-dim);
font-weight: 700;
-webkit-text-fill-color: var(--text-dim);
}
.review-card-tag {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 6px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
background: rgba(10, 10, 10, 0.7);
border: 1px solid rgba(212, 173, 106, 0.3);
color: var(--accent-bright);
}
.review-card-body {
padding: 26px 26px 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.review-card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-card-excerpt {
font-size: 14px;
line-height: 1.65;
color: var(--text-soft);
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-style: italic;
position: relative;
padding-left: 14px;
border-left: 2px solid var(--accent-dark);
}
.review-card-foot {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border);
display: grid;
gap: 8px;
}
.review-card-foot .author-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.review-card-foot .author-row .mini-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
color: #1a1410;
flex-shrink: 0;
}
.review-card-foot .author-row .author-name {
font-weight: 700;
color: var(--text);
}
.review-card-foot .author-row .author-meta {
color: var(--text-dim);
font-size: 12px;
}
.review-card-foot .visit-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-dim);
}
.review-card-foot .visit-row .read-link {
color: var(--accent-bright);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap var(--transition);
}
.review-card-thumb:hover .read-link { gap: 8px; }
.reviews-detail-section {
padding: 96px 0 0;
}
.reviews-detail-section .section-eyebrow-row {
text-align: center;
margin-bottom: 56px;
}
.reviews-detail-section .section-eyebrow-row .eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}
.reviews-detail-section .section-eyebrow-row h2 {
font-size: clamp(24px, 3.4vw, 32px);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
}
.review-detail {
max-width: 880px;
margin: 0 auto 64px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
scroll-margin-top: 100px;
position: relative;
}
.review-detail::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-dark), var(--accent-bright), var(--accent-dark));
z-index: 1;
}
.review-feature-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 32px 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
}
.review-feature-strip::before {
content: '#';
font-size: 18px;
font-weight: 900;
background: linear-gradient(135deg, var(--accent-bright), var(--accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.review-title,
h1.review-title,
h2.review-title {
font-size: clamp(24px, 3.4vw, 34px);
font-weight: 900;
line-height: 1.3;
letter-spacing: -0.03em;
color: var(--text);
padding: 16px 32px 6px;
margin: 0;
}
.review-pull-quote {
font-family: Georgia, serif;
font-style: italic;
font-size: clamp(17px, 2.2vw, 20px);
line-height: 1.7;
color: var(--accent-bright);
padding: 24px 32px 28px;
position: relative;
border-bottom: 1px solid var(--border);
}
.review-pull-quote::before {
content: '"';
font-size: 64px;
color: rgba(212, 173, 106, 0.3);
position: absolute;
top: 4px;
left: 22px;
line-height: 1;
font-family: Georgia, serif;
font-weight: 900;
}
.review-pull-quote p {
padding-left: 32px;
}
.review-photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 28px 32px 0;
}
.review-photo {
aspect-ratio: 4 / 3;
border-radius: 10px;
background:
radial-gradient(ellipse at center, rgba(212, 173, 106, 0.12) 0%, transparent 60%),
linear-gradient(135deg, #1a1410 0%, #0a0a0a 100%);
border: 1px solid rgba(212, 173, 106, 0.18);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
transition: all var(--transition);
}
.review-photo::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(212, 173, 106, 0.1) 1px, transparent 0);
background-size: 16px 16px;
opacity: 0.6;
}
.review-photo:hover {
border-color: var(--accent-dark);
transform: scale(1.02);
}
.review-photo .photo-icon {
font-size: 28px;
color: var(--accent);
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.review-photo span {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.06em;
position: relative;
z-index: 1;
text-transform: uppercase;
font-weight: 700;
}
.review-detail.variant-2::before {
background: linear-gradient(90deg, #6a6a6a, #c9a961, #6a6a6a);
}
.review-detail.variant-3::before {
background: linear-gradient(90deg, #4a8a5a, #c9a961, #4a8a5a);
}
@media (max-width: 960px) {
.review-album { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.reviews-stats { grid-template-columns: 1fr; }
.reviews-stat-item { border-right: none; border-bottom: 1px solid var(--border); padding: 22px; }
.reviews-stat-item:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
.review-album { grid-template-columns: 1fr; gap: 16px; }
.review-card-body { padding: 22px 22px 20px; }
.review-feature-strip { padding: 18px 22px 0; }
h2.review-title { padding: 14px 22px 6px; }
.review-pull-quote { padding: 20px 22px 24px; }
.review-pull-quote::before { left: 14px; }
.review-pull-quote p { padding-left: 28px; }
.review-photos { padding: 22px 22px 0; gap: 4px; }
}
.review-detail {
max-width: 880px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.review-author-bar {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 18px;
align-items: center;
padding: 24px 32px;
border-bottom: 1px solid var(--border);
background: rgba(212, 173, 106, 0.04);
}
.review-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
display: grid;
place-items: center;
font-size: 22px;
font-weight: 700;
color: #1a1410;
letter-spacing: -0.04em;
}
.review-author-info .review-author-name {
font-size: 17px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.review-author-info .verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
background: rgba(74, 222, 128, 0.12);
color: #6ee7a4;
border: 1px solid rgba(74, 222, 128, 0.25);
letter-spacing: 0.04em;
}
.review-author-info .verified-badge::before { content: '✓'; font-size: 10px; }
.review-author-info .review-author-meta {
font-size: 13px;
color: var(--text-dim);
}
.review-rating-large {
font-size: 22px;
color: var(--accent-bright);
letter-spacing: 3px;
text-align: right;
line-height: 1;
}
.review-rating-large .rating-number {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--text-soft);
letter-spacing: 0.05em;
margin-top: 6px;
}
.review-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.4;
color: var(--text);
padding: 32px 32px 0;
}
.review-meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 24px 32px;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 28px;
}
.review-meta-item {
padding: 0 18px;
border-right: 1px solid var(--border);
}
.review-meta-item:first-child { padding-left: 0; }
.review-meta-item:last-child { padding-right: 0; border-right: none; }
.review-meta-item .meta-label {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.review-meta-item .meta-value {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.4;
}
.review-photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 28px 32px 0;
}
.review-photo {
aspect-ratio: 4 / 3;
border-radius: var(--radius-sm);
background:
linear-gradient(135deg, rgba(212, 173, 106, 0.08), rgba(212, 173, 106, 0.02)),
var(--bg-alt);
border: 1px dashed var(--border-strong);
display: grid;
place-items: center;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.04em;
}
.review-photo span { opacity: 0.6; }
.review-body-content {
padding: 32px 32px 16px;
font-size: 15.5px;
color: var(--text-soft);
line-height: 1.95;
}
.review-body-content h2 {
font-size: clamp(18px, 2.4vw, 22px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.45;
color: var(--text);
margin: 36px 0 18px;
padding-left: 16px;
position: relative;
}
.review-body-content h2:first-child { margin-top: 0; }
.review-body-content h2::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent-dark) 100%);
}
.review-body-content p { margin-bottom: 18px; }
.review-body-content p:last-child { margin-bottom: 0; }
.review-body-content strong { color: var(--text); font-weight: 700; }
.review-body-content em {
font-style: normal;
background: linear-gradient(180deg, transparent 65%, rgba(212, 173, 106, 0.2) 65%);
padding: 0 2px;
}
@media (max-width: 640px) {
.review-body-content { padding: 26px 22px 12px; font-size: 15px; }
.review-body-content h2 { margin: 30px 0 14px; }
}
.review-pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 20px 32px 28px;
}
.pros-block, .cons-block {
padding: 22px 24px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.pros-block {
background: rgba(74, 222, 128, 0.04);
border-color: rgba(74, 222, 128, 0.18);
}
.cons-block {
background: rgba(244, 96, 96, 0.04);
border-color: rgba(244, 96, 96, 0.18);
}
.pros-block h4, .cons-block h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 6px;
}
.pros-block h4 { color: #6ee7a4; }
.cons-block h4 { color: #ff8e8e; }
.pros-block ul, .cons-block ul { list-style: none; padding: 0; }
.pros-block li, .cons-block li {
font-size: 14px;
color: var(--text-soft);
line-height: 1.7;
padding: 4px 0 4px 18px;
position: relative;
}
.pros-block li::before {
content: '+';
position: absolute;
left: 0;
color: #6ee7a4;
font-weight: 700;
}
.cons-block li::before {
content: '−';
position: absolute;
left: 0;
color: #ff8e8e;
font-weight: 700;
}
.review-store-reply {
margin: 8px 32px 32px;
padding: 24px 28px;
background: rgba(212, 173, 106, 0.06);
border-left: 3px solid var(--accent);
border-radius: 6px;
}
.review-store-reply .reply-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
color: var(--accent-bright);
letter-spacing: 0.04em;
}
.review-store-reply .reply-header::before {
content: '↳';
font-size: 18px;
color: var(--accent);
}
.review-store-reply p {
font-size: 14px;
color: var(--text-soft);
line-height: 1.85;
margin-bottom: 8px;
}
.review-store-reply p:last-child { margin-bottom: 0; }
.review-store-reply .reply-signature {
margin-top: 14px;
font-size: 12px;
color: var(--text-dim);
}
.review-helpful-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 18px 32px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--text-dim);
}
.review-helpful-bar .review-id {
font-feature-settings: 'tnum';
letter-spacing: 0.02em;
}
.review-helpful-bar .helpful-count {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-soft);
}
.review-helpful-bar .helpful-count strong { color: var(--accent-bright); }
@media (max-width: 720px) {
.review-author-bar { grid-template-columns: 48px 1fr; padding: 20px 22px; }
.review-rating-large {
grid-column: 1 / -1;
text-align: left;
padding-top: 4px;
border-top: 1px solid var(--border);
padding: 14px 0 0;
}
.review-title { padding: 24px 22px 0; font-size: 22px; }
.review-meta-grid {
grid-template-columns: repeat(2, 1fr);
padding: 18px 22px;
gap: 18px 14px;
}
.review-meta-item {
padding: 0;
border-right: none;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.review-meta-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.review-photos { padding: 22px 22px 0; gap: 4px; }
.review-body-content { padding: 26px 22px 12px; font-size: 15px; }
.review-pros-cons { grid-template-columns: 1fr; padding: 16px 22px 22px; }
.review-store-reply { margin: 6px 22px 26px; padding: 20px 22px; }
.review-helpful-bar { padding: 16px 22px; }
}
.mobile-cta-bar {
display: none;
}
@media (max-width: 720px) {
body {
padding-bottom: 72px;
}
.mobile-cta-bar {
display: flex;
gap: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 95;
background: rgba(10, 10, 10, 0.94);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-top: 1px solid rgba(212, 173, 106, 0.32);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55);
height: 64px;
overflow: hidden;
}
.mobile-cta-bar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-bright) 50%,
transparent 100%);
z-index: 1;
}
.mobile-cta-bar a {
flex: 1 1 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
font-weight: 700;
transition: all 0.18s ease;
position: relative;
padding: 0 16px;
}
.mobile-cta-bar a:active { transform: scale(0.96); }
.mobile-cta-bar .cta-phone {
background: linear-gradient(135deg, #e6c084 0%, #c9a961 50%, #a8854a 100%);
color: #1a1410;
}
.mobile-cta-bar .cta-kakao {
background: linear-gradient(135deg, #fee500 0%, #f2da00 100%);
color: #1a1410;
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.mobile-cta-bar .cta-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.mobile-cta-bar .cta-label {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
gap: 1px;
}
.mobile-cta-bar .cta-label strong {
font-size: 15px;
font-weight: 900;
letter-spacing: -0.01em;
}
.mobile-cta-bar .cta-label small {
font-size: 12px;
font-weight: 700;
opacity: 0.85;
font-feature-settings: 'tnum';
letter-spacing: 0.02em;
}
}
@supports (padding: max(0px)) {
@media (max-width: 720px) {
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.mobile-cta-bar { padding-bottom: env(safe-area-inset-bottom); }
}
}
.site-footer {
background: #050505;
border-top: 1px solid var(--border);
font-size: 14px;
color: var(--text-dim);
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-dark) 20%,
var(--accent-bright) 50%,
var(--accent-dark) 80%,
transparent 100%);
opacity: 0.7;
}
.footer-sitemap {
padding: 64px 0 48px;
border-bottom: 1px solid var(--border);
}
.footer-sitemap-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 36px;
}
.sitemap-col .footer-section-title {
color: var(--text);
font-weight: 700;
font-size: 14px;
margin-bottom: 18px;
letter-spacing: -0.01em;
position: relative;
padding-bottom: 10px;
}
.sitemap-col .footer-section-title::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 24px; height: 2px;
background: linear-gradient(90deg, var(--accent-bright), var(--accent-dark));
border-radius: 1px;
}
.sitemap-col ul li { margin-bottom: 9px; }
.sitemap-col ul li a {
color: var(--text-dim);
font-size: 13px;
line-height: 1.6;
transition: color var(--transition);
text-decoration: none;
}
.sitemap-col ul li a:hover { color: var(--accent-bright); }
.footer-inner {
padding: 56px 0 44px;
display: grid;
grid-template-columns: 1.4fr 1.1fr 1fr 0.9fr;
gap: 44px;
}
.footer-col p { margin-bottom: 8px; line-height: 1.75; }
.footer-col strong { color: var(--text); font-weight: 700; }
.footer-section-title {
color: var(--text);
font-weight: 700;
margin-bottom: 14px;
font-size: 14px;
letter-spacing: -0.01em;
}
.footer-col a { color: var(--text-dim); transition: color var(--transition); }
.footer-col a:hover { color: var(--accent-bright); }
.footer-brand {
font-size: 22px;
font-weight: 900;
color: var(--text);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.footer-brand .logo-accent { color: var(--accent); }
.footer-desc {
font-size: 13px;
line-height: 1.85;
color: var(--text-dim);
margin-bottom: 18px;
}
.footer-channels {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
.footer-channel {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all var(--transition);
border: 1px solid var(--border);
}
.footer-channel.kakao {
background: var(--kakao);
color: var(--kakao-text);
border-color: var(--kakao);
}
.footer-channel.kakao:hover { color: var(--kakao-text); opacity: 0.92; }
.footer-channel.phone {
background: rgba(212, 173, 106, 0.08);
color: var(--accent-bright);
border-color: rgba(212, 173, 106, 0.25);
}
.footer-channel.phone:hover { color: var(--accent-bright); background: rgba(212, 173, 106, 0.15); }
.footer-channel .icon {
font-size: 14px;
flex-shrink: 0;
}
.footer-nap {
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-nap-item {
display: grid;
grid-template-columns: 22px 1fr;
gap: 8px;
font-size: 13px;
color: var(--text-dim);
line-height: 1.55;
}
.footer-nap-item .nap-icon {
color: var(--accent);
font-size: 14px;
padding-top: 1px;
}
.footer-nap-item .nap-value { color: var(--text-soft); }
.footer-nap-item .nap-value strong { color: var(--text); }
.footer-nap-item.is-hours .nap-value {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-open-status {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
background: rgba(74, 222, 128, 0.12);
color: #6ee7a4;
border: 1px solid rgba(74, 222, 128, 0.2);
letter-spacing: 0.06em;
}
.footer-open-status::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #6ee7a4;
animation: pulse 2s infinite;
}
.footer-business p {
font-size: 12.5px;
line-height: 1.75;
color: var(--text-dim);
}
.footer-business .biz-line {
display: flex;
gap: 6px;
}
.footer-business .biz-line .biz-label {
color: var(--text-dim);
flex-shrink: 0;
min-width: 60px;
}
.footer-business .biz-line .biz-value { color: var(--text-soft); }
.footer-quick-menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-quick-menu a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-soft);
text-decoration: none;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: all var(--transition);
width: fit-content;
}
.footer-quick-menu a:hover {
color: var(--accent-bright);
border-bottom-color: var(--accent-dark);
}
.footer-quick-menu a::before {
content: '→';
color: var(--accent-dark);
font-weight: 700;
}
.footer-bottom {
border-top: 1px solid var(--border);
padding: 22px 0;
background: rgba(0, 0, 0, 0.4);
}
.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: var(--text-dim);
}
.footer-bottom .legal-links {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.footer-bottom .legal-links a {
color: var(--text-dim);
text-decoration: none;
transition: color var(--transition);
}
.footer-bottom .legal-links a:hover { color: var(--accent-bright); }
.footer-bottom .legal-divider { color: var(--border-strong); }
.footer-bottom .age-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
background: rgba(244, 96, 96, 0.12);
border: 1px solid rgba(244, 96, 96, 0.25);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #ff8e8e;
letter-spacing: 0.04em;
}
@media (max-width: 1024px) {
.footer-sitemap-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-inner { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
.footer-sitemap { padding: 48px 0 32px; }
.footer-sitemap-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.footer-inner { grid-template-columns: 1fr; padding: 40px 0 32px; gap: 36px; }
.footer-bottom .container { flex-direction: column; text-align: center; }
}
.notice-list {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 880px;
margin: 0 auto;
}
.notice-item {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 24px;
padding: 26px 30px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
align-items: start;
transition: all var(--transition);
}
.notice-item:hover {
border-color: var(--accent-dark);
background: var(--bg-card-hover);
transform: translateX(2px);
}
.notice-date {
font-size: 13px;
color: var(--accent-bright);
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
padding-top: 3px;
font-feature-settings: 'tnum';
}
.notice-body h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.45;
}
.notice-body p {
font-size: 15px;
color: var(--text-soft);
line-height: 1.75;
}
.notice-body p + p { margin-top: 10px; }
.notice-tag {
font-size: 11px;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
background: rgba(212, 173, 106, 0.14);
color: var(--accent-bright);
white-space: nowrap;
letter-spacing: 0.05em;
border: 1px solid rgba(212, 173, 106, 0.22);
align-self: start;
}
.notice-tag.tag-urgent {
background: rgba(244, 96, 96, 0.14);
color: #ff8e8e;
border-color: rgba(244, 96, 96, 0.22);
}
.notice-tag.tag-update {
background: rgba(96, 165, 250, 0.14);
color: #93c5fd;
border-color: rgba(96, 165, 250, 0.22);
}
.event-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 1040px;
margin: 0 auto;
}
.event-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 30px;
position: relative;
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.event-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-dark), var(--accent-bright), var(--accent-dark));
opacity: 0;
transition: opacity var(--transition);
border-radius: var(--radius) var(--radius) 0 0;
}
.event-card.is-ongoing { border-color: rgba(212, 173, 106, 0.4); }
.event-card.is-ongoing::before { opacity: 1; }
.event-card:hover {
transform: translateY(-3px);
background: var(--bg-card-hover);
}
.event-card:hover::before { opacity: 1; }
.event-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
letter-spacing: 0.08em;
margin-bottom: 16px;
align-self: flex-start;
}
.event-status::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
}
.event-status.ongoing {
background: rgba(74, 222, 128, 0.12);
color: #6ee7a4;
border: 1px solid rgba(74, 222, 128, 0.25);
}
.event-status.ongoing::before { background: #6ee7a4; animation: pulse 2s infinite; }
.event-status.upcoming {
background: rgba(212, 173, 106, 0.14);
color: var(--accent-bright);
border: 1px solid rgba(212, 173, 106, 0.25);
}
.event-status.upcoming::before { background: var(--accent-bright); }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.4); }
}
.event-card h3 {
font-size: 21px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text);
letter-spacing: -0.025em;
line-height: 1.35;
}
.event-period {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 18px;
font-feature-settings: 'tnum';
}
.event-period::before {
content: '🗓';
font-size: 14px;
}
.event-desc {
font-size: 15px;
color: var(--text-soft);
line-height: 1.8;
margin-bottom: 20px;
flex-grow: 1;
}
.event-meta {
display: flex;
align-items: center;
gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--text-dim);
}
.event-meta strong { color: var(--text-soft); }
@media (max-width: 720px) {
.notice-item {
grid-template-columns: 1fr;
gap: 10px;
padding: 22px 22px;
}
.notice-tag { justify-self: start; }
.event-grid { grid-template-columns: 1fr; gap: 16px; }
.event-card { padding: 28px 24px; }
}
.legal-list {
max-width: 820px;
list-style: none;
counter-reset: legal-counter;
margin-top: 12px;
}
.legal-list > li {
position: relative;
padding: 6px 0 6px 32px;
margin-bottom: 10px;
font-size: 15px;
color: var(--text-soft);
line-height: 1.85;
counter-increment: legal-counter;
}
.legal-list > li::before {
content: counter(legal-counter) ".";
position: absolute;
left: 0;
top: 6px;
color: var(--accent);
font-weight: 700;
}
.legal-list > li > ul {
margin-top: 8px;
list-style: none;
padding-left: 0;
}
.legal-list > li > ul > li {
position: relative;
padding: 4px 0 4px 18px;
font-size: 14px;
color: var(--text-dim);
}
.legal-list > li > ul > li::before {
content: '–';
position: absolute;
left: 0;
top: 4px;
color: var(--accent-dark);
}
.legal-meta {
margin-top: 36px;
padding: 22px 26px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-dim);
max-width: 820px;
line-height: 1.8;
}
.legal-meta strong { color: var(--text); }
.legal-meta p { margin-bottom: 4px; }
.breadcrumb {
padding: 28px 0 0;
font-size: 13px;
color: var(--text-dim);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after {
content: '›';
color: var(--border-strong);
margin-left: 4px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb li[aria-current="page"] { color: var(--text-soft); }
.region-hero {
padding: 64px 0 56px;
background:
radial-gradient(ellipse at 50% 0%, rgba(212, 173, 106, 0.14) 0%, transparent 60%),
var(--bg);
border-bottom: 1px solid var(--border);
text-align: center;
}
.region-hero .region-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 18px;
}
.region-hero h1 {
font-size: clamp(26px, 4.4vw, 42px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.03em;
margin-bottom: 22px;
color: var(--text);
}
.region-hero .region-intro {
max-width: 760px;
margin: 0 auto;
color: var(--text-soft);
font-size: clamp(15px, 1.8vw, 17px);
line-height: 1.85;
}
.region-hero .hero-bullet {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 13px;
color: var(--text-soft);
}
.region-section {
padding: 72px 0;
border-bottom: 1px solid var(--border);
}
.region-section:last-of-type { border-bottom: none; }
.region-section:nth-of-type(even) { background: var(--bg-alt); }
.region-section h2 {
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.35;
margin-bottom: 24px;
color: var(--text);
max-width: 820px;
}
.region-section .region-text {
max-width: 820px;
color: var(--text-soft);
font-size: 16px;
line-height: 1.95;
}
.region-section .region-text p { margin-bottom: 16px; }
.region-section .region-text p:last-child { margin-bottom: 0; }
.region-section .region-text strong { color: var(--text); font-weight: 700; }
.route-list {
max-width: 820px;
margin-top: 8px;
display: grid;
gap: 12px;
}
.route-list li {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
padding: 16px 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
color: var(--text-soft);
}
.route-list li .route-from {
font-weight: 700;
color: var(--accent-bright);
}
.route-list li .route-to {
color: var(--text-soft);
line-height: 1.6;
}
.route-list li .route-to strong { color: var(--text); }
.bullet-list {
max-width: 820px;
display: grid;
gap: 10px;
margin-top: 8px;
}
.bullet-list li {
position: relative;
padding: 12px 16px 12px 36px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
color: var(--text-soft);
line-height: 1.7;
}
.bullet-list li::before {
content: '';
position: absolute;
left: 16px;
top: 22px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.bullet-list li strong { color: var(--text); }
.related-regions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 8px;
}
.related-regions a {
display: block;
padding: 22px 24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: all var(--transition);
}
.related-regions a:hover {
border-color: var(--accent-dark);
transform: translateY(-2px);
background: var(--bg-card-hover);
}
.related-regions .related-region-name {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.related-regions .related-region-desc {
font-size: 14px;
color: var(--text-dim);
line-height: 1.6;
}
.related-regions a:hover .related-region-name { color: var(--accent-bright); }
@media (max-width: 720px) {
.route-list li { grid-template-columns: 1fr; gap: 6px; }
.related-regions { grid-template-columns: 1fr; }
.region-section { padding: 56px 0; }
}
.site-footer {
background: #050505;
border-top: 1px solid var(--border);
font-size: 14px;
color: var(--text-dim);
}
.footer-sitemap {
padding: 64px 0 48px;
border-bottom: 1px solid var(--border);
}
.footer-sitemap-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 36px;
}
.sitemap-col .footer-section-title {
color: var(--text);
font-weight: 700;
font-size: 14px;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.sitemap-col ul li {
margin-bottom: 8px;
}
.sitemap-col ul li a {
color: var(--text-dim);
font-size: 13px;
line-height: 1.6;
transition: color var(--transition);
}
.sitemap-col ul li a:hover { color: var(--accent-bright); }
.footer-inner {
padding-top: 56px;
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 44px;
padding-bottom: 52px;
}
.footer-col p { margin-bottom: 8px; line-height: 1.75; }
.footer-col strong { color: var(--text); font-weight: 700; }
.footer-brand {
font-size: 20px;
font-weight: 900;
color: var(--text);
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.footer-brand .logo-accent { color: var(--accent); }
.footer-desc { font-size: 13px; line-height: 1.75; color: var(--text-dim); }
.footer-col a { color: var(--text-dim); }
.footer-col a:hover { color: var(--accent-bright); }
.footer-section-title {
color: var(--text);
font-weight: 700;
margin-bottom: 14px;
font-size: 15px;
}
.footer-bottom {
border-top: 1px solid var(--border);
padding: 22px 0;
}
.footer-bottom .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: var(--text-dim);
}
@media (max-width: 1024px) {
.features-grid, .occasions-grid { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: repeat(2, 1fr); gap: 36px; }
.footer-sitemap-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 1180px) {
.gnb { display: none; }
.header-cta .btn-phone, .header-cta .btn-kakao {
padding: 9px 14px;
font-size: 12px;
}
.mobile-toggle { display: flex; }
.gnb.is-open {
display: block;
position: absolute;
top: var(--header-h);
left: 0;
right: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 12px 28px 20px;
box-shadow: var(--shadow-lg);
}
.gnb.is-open > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.gnb.is-open > ul > li {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.gnb.is-open > ul > li:last-child { border-bottom: none; }
.gnb.is-open .dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
box-shadow: none;
border: none;
background: transparent;
margin-top: 10px;
padding: 0 0 0 14px;
}
.gnb.is-open .dropdown li a { padding: 8px 0; }
.trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
html { font-size: 16px; }
.section { padding: 80px 0; }
.intro { padding: 80px 0; }
.section-cta { padding: 88px 0; }
.container { padding: 0 20px; }
.hero { min-height: auto; padding: 64px 0 80px; }
.hero-meta { gap: 10px; }
.hero-meta li { font-size: 13px; padding: 8px 14px; }
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.system-grid,
.pricing-grid,
.location-grid,
.review-grid,
.features-grid,
.occasions-grid,
.directions-grid {
grid-template-columns: 1fr;
}
.trust-item { justify-content: flex-start; }
.review-summary { gap: 22px; }
.review-summary-item .num { font-size: 28px; }
.footer-inner {
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 40px;
}
.footer-sitemap { padding: 48px 0 32px; }
.footer-sitemap-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.cta-buttons { flex-direction: column; align-items: stretch; }
.cta-buttons .btn { width: 100%; }
.footer-bottom .container {
flex-direction: column;
align-items: center;
text-align: center;
}
.section-header { margin-bottom: 44px; }
}