:root {
--font-primary: Pretendard, Arial, sans-serif;
--color-primary: #191919;
--color-accent: #FF6F0F;
--color-background: #FAFAFA;
--color-surface: #ffffff;
--color-text: #191919;
--color-muted: #868B94;
--color-border: #E0E0E0;
--color-success: #15803d;
--color-warning: #d97706;
--color-error: #dc2626;
--color-main: var(--color-accent);
--color-main-dark: #E85D00;
--color-main-light: #FFF1E8;
--color-sub: var(--color-background);
--color-sub-strong: var(--color-border);
--color-soft-text: var(--color-muted);
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-body: 15px;
--fs-card-title: 17px;
--fs-section-title: 26px;
--fs-page-title: 32px;
--fs-hero-title: 44px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 650;
--fw-bold: 750;
--fw-extrabold: 850;
--fw-black: 900;
--lh-tight: 1.24;
--lh-title: 1.34;
--lh-body: 1.62;
--ink: var(--color-text);
--muted: var(--color-muted);
--line: var(--color-sub-strong);
--paper: var(--color-background);
--surface: var(--color-surface);
--soft: var(--color-sub);
--yellow: var(--color-warning);
--coral: var(--color-error);
--mint: var(--color-success);
--blue: var(--color-main);
--radius: 8px;
--max: 1200px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: var(--font-primary);
}
button,
input,
select {
font: inherit;
}
button {
cursor: pointer;
}a {
color: inherit;
text-decoration: none;
}
img {
display: block;
width: 100%;
object-fit: cover;
}
.sr-only {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.shell {
width: min(calc(100% - 48px), var(--max));
margin: 0 auto;
}
.page {
display: none;
padding: 36px 0 88px;
min-height: calc(100vh - 73px);
}
.page.active {
display: block;
}.eyebrow {
margin: 0 0 10px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin: 68px 0 24px;
}
.section-head h2 {
margin: 0;
font-size: 27px;
letter-spacing: 0;
line-height: 1.25;
}.text-link {
display: inline-flex;
align-items: center;
gap: 4px;
border: 0;
padding: 0;
color: #555;
background: none;
font-size: 14px;
font-weight: 700;
}
.badge {
display: inline-flex;
align-items: center;
min-height: 23px;
padding: 3px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: 800;
line-height: 1;
}.badge.ad {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.42);
}.badge.hot {
background: #ffe9e4;
color: #e75c48;
}.badge.free {
background: #e6f5eb;
color: #238d4c;
}.badge.verify {
background: #e8edff;
color: var(--color-text);
}.icon-button {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
}.primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
border: 0;
border-radius: 5px;
padding: 0 20px;
background: var(--ink);
color: #fff;
font-size: 14px;
font-weight: 800;
}.primary.yellow {
background: var(--yellow);
color: #191919;
}.outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid #d9d9d9;
border-radius: 5px;
background: #fff;
color: #242424;
font-size: 14px;
font-weight: 750;
}
.share-open {
overflow: hidden;
}
.share-button {
gap: 7px;
}
.share-sheet[hidden],
.event-calendar-sheet[hidden],
.auth-sheet[hidden],
.global-search-sheet[hidden],
.share-toast[hidden] {
display: none !important;
}
.share-sheet {
position: fixed;
z-index: 60;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
}
.share-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(20, 20, 20, 0.44);
}
.global-search-sheet {
position: fixed;
z-index: 63;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
}.global-search-card {
position: relative;
width: min(100%, 720px);
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 24px;
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}
.global-search-card header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}.global-search-card h2 {
margin: 0;
color: var(--color-text);
font-size: 24px;
font-weight: 850;
line-height: 1.32;
}.global-search-card header p {
margin: 7px 0 0;
color: var(--color-muted);
font-size: 14px;
line-height: 1.5;
}.global-search-close {
display: grid;
flex: 0 0 auto;
width: 34px;
height: 34px;
place-items: center;
border: 0;
border-radius: 50%;
background: #f3f5f6;
color: var(--color-text);
}
.global-search-input {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0 18px;
background: #fff;
}.global-search-input svg {
color: var(--color-text);
}.global-search-input input {
width: 100%;
min-height: 52px;
border: 0;
background: transparent;
color: var(--color-text);
font-size: 16px;
outline: none;
}.global-search-meta {
margin: 16px 0 10px;
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.global-search-results {
display: grid;
gap: 8px;
}
.global-search-recommend {
display: grid;
gap: 12px;
margin-top: 10px;
}
.global-search-recommend[hidden] {
display: none !important;
}
.global-search-recommend-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}.global-search-ad {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 10px;
background: #fff;
color: var(--color-text);
text-align: left;
}.global-search-ad:hover,
.global-search-ad:focus-visible {
border-color: var(--color-accent);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.1);
}
.global-search-ad img {
height: 96px;
}
.global-search-ad span {
display: block;
padding: 11px 12px 13px;
}.global-search-ad em {
display: inline-flex;
margin-bottom: 7px;
border-radius: 999px;
padding: 4px 8px;
background: var(--color-main-light);
color: var(--color-text);
font-size: 11px;
font-style: normal;
font-weight: 850;
}.global-search-ad strong {
display: block;
color: var(--color-text);
font-size: 14px;
font-weight: 850;
line-height: 1.36;
}.global-search-ad small {
display: block;
margin-top: 5px;
color: var(--color-muted);
font-size: 12px;
line-height: 1.4;
}.global-search-result {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 10px;
background: #fff;
color: var(--color-text);
text-align: left;
}.global-search-result:hover,
.global-search-result:focus-visible {
border-color: var(--color-accent);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.1);
}.global-search-type {
display: inline-grid;
min-height: 30px;
place-items: center;
border-radius: 999px;
background: var(--color-main-light);
color: var(--color-text);
font-size: 12px;
font-weight: 850;
}
.global-search-copy {
min-width: 0;
}.global-search-copy strong {
display: block;
overflow: hidden;
color: var(--color-text);
font-size: 15px;
font-weight: 850;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}.global-search-copy span {
display: block;
overflow: hidden;
margin-top: 3px;
color: var(--color-muted);
font-size: 13px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}.global-search-result > i {
color: var(--color-muted);
}.global-search-empty {
margin: 22px 0 2px;
border: 1px dashed var(--color-border);
border-radius: 10px;
padding: 24px;
color: var(--color-muted);
font-size: 14px;
text-align: center;
}
.auth-sheet {
position: fixed;
z-index: 64;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
}.auth-card {
position: relative;
width: min(100%, 430px);
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 34px 32px 30px;
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}.auth-close {
position: absolute;
top: 16px;
right: 16px;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 0;
border-radius: 50%;
background: #f3f5f6;
color: var(--color-text);
}.auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 2px;
color: var(--color-text);
font-size: 22px;
font-weight: 900;
letter-spacing: 0.2px;
}
.auth-logo .brand-mark {
width: 30px;
height: 30px;
border-radius: 8px;
}.auth-card h2 {
margin: 26px 0 9px;
color: var(--color-text);
font-size: 24px;
font-weight: 850;
line-height: 1.35;
text-align: center;
}.auth-card > p {
margin: 0 0 24px;
color: var(--color-muted);
font-size: 14px;
line-height: 1.55;
text-align: center;
}.auth-kakao {
display: flex;
width: 100%;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 8px;
background: #fee500;
color: #191600;
font-size: 16px;
font-weight: 900;
}.auth-divider {
display: flex;
align-items: center;
gap: 13px;
margin: 24px 0 18px;
color: var(--color-muted);
font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.auth-form {
display: grid;
gap: 12px;
}
.auth-field {
display: grid;
gap: 7px;
}.auth-field label {
color: var(--color-text);
font-size: 13px;
font-weight: 750;
}.auth-field input {
width: 100%;
min-height: 48px;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 0 14px;
background: #fff;
color: var(--color-text);
font-size: 14px;
outline: none;
}.auth-field input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.12);
}.auth-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 2px 0 6px;
color: var(--color-muted);
font-size: 13px;
}
.auth-options label {
display: inline-flex;
align-items: center;
gap: 7px;
}.auth-options input {
width: 16px;
height: 16px;
accent-color: var(--color-accent);
}.auth-options a {
color: var(--color-muted);
font-weight: 700;
}.auth-submit {
width: 100%;
min-height: 50px;
border: 0;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
font-size: 15px;
font-weight: 850;
}.auth-signup {
margin: 22px 0 0;
color: var(--color-muted);
font-size: 14px;
text-align: center;
}.auth-signup a {
color: var(--color-text);
font-weight: 850;
}.auth-signup button {
border: 0;
padding: 0;
background: transparent;
color: var(--color-text);
font: inherit;
font-weight: 850;
}
.signup-card {
width: min(100%, 450px);
border-radius: 5px;
padding: 30px 26px 34px;
}
.signup-card .auth-close {
top: 16px;
right: 16px;
}
.signup-logo {
justify-content: flex-start;
margin-top: 0;
font-size: 18px;
}
.signup-logo .brand-mark {
width: 30px;
height: 30px;
}
.signup-card h2 {
margin: 24px 0 8px;
font-size: 27px;
font-weight: 900;
text-align: left;
}.signup-card .signup-subtitle {
margin: 0 0 20px;
color: var(--color-primary);
font-size: 14px;
font-weight: 750;
text-align: left;
}
.signup-kakao {
min-height: 52px;
border-radius: 999px;
}
.signup-form {
gap: 18px;
}
.signup-form .auth-field {
gap: 9px;
}
.signup-form .auth-field label {
font-size: 15px;
font-weight: 850;
}.signup-form .auth-field label span,
.signup-form .auth-field small {
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.signup-form .auth-field input {
min-height: 47px;
border-radius: 8px;
}
.signup-submit {
min-height: 46px;
margin-top: 2px;
border-radius: 999px;
}
.signup-login {
margin-top: 18px;
font-weight: 750;
}
.event-calendar-sheet {
position: fixed;
z-index: 62;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
}
.event-calendar-card {
position: relative;
width: min(100%, 720px);
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 24px;
background: #fff;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}
.event-calendar-card header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}.event-calendar-card h2 {
margin: 0;
color: var(--color-text);
font-size: 22px;
line-height: 1.32;
}.event-calendar-card header p {
margin: 7px 0 0;
color: var(--color-muted);
font-size: 13px;
}.event-calendar-close {
display: grid;
flex: 0 0 auto;
width: 34px;
height: 34px;
place-items: center;
border: 0;
border-radius: 50%;
background: #f3f5f6;
color: #333;
}.event-calendar-month {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--color-border);
padding-top: 16px;
color: var(--color-primary);
font-size: 16px;
font-weight: 850;
}
.event-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
margin-top: 13px;
}.event-calendar-weekday {
color: var(--color-muted);
font-size: 12px;
font-weight: 750;
text-align: center;
}.event-calendar-day {
display: flex;
min-height: 76px;
flex-direction: column;
gap: 5px;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 8px;
background: #fff;
color: var(--color-text);
font-size: 12px;
text-align: left;
}
.event-calendar-day.is-muted {
opacity: 0.38;
}.event-calendar-day.has-event {
border-color: rgba(255, 111, 15, 0.34);
background: #FFF1E8;
}
.event-calendar-day b {
font-size: 13px;
line-height: 1;
}.event-calendar-chip {
overflow: hidden;
width: 100%;
border: 0;
border-radius: 5px;
padding: 4px 5px;
background: var(--color-accent);
color: #fff;
font-size: 11px;
font-weight: 750;
line-height: 1.25;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-calendar-list {
display: grid;
gap: 9px;
margin-top: 18px;
}.event-calendar-list button {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 12px;
background: #fff;
color: var(--color-text);
text-align: left;
}.event-calendar-list time {
color: var(--color-text);
font-size: 13px;
font-weight: 850;
}
.event-calendar-list strong {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}.event-calendar-list span {
color: var(--color-muted);
font-size: 12px;
}.share-card {
position: relative;
width: min(100%, 382px);
border: 1px solid rgba(229, 231, 235, 0.92);
border-radius: 8px;
padding: 34px 32px 30px;
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 22px 70px rgba(17, 24, 39, 0.2);
}
.share-card header {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}.share-card h2 {
margin: 0;
color: var(--color-primary);
font-size: 24px;
font-weight: 900;
line-height: 1.3;
text-align: center;
}.share-close {
position: absolute;
top: 18px;
right: 18px;
display: grid;
flex: 0 0 auto;
width: 32px;
height: 32px;
place-items: center;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--color-primary);
}
.share-close:hover,
.share-close:focus-visible {
background: #f3f5f6;
outline: none;
}.share-summary {
display: none;
margin: 8px 0 22px;
color: var(--color-muted);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.share-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}.share-action {
display: flex;
min-width: 0;
flex-direction: column;
align-items: center;
gap: 9px;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: var(--color-primary);
font-size: 12px;
font-weight: 750;
text-align: center;
}.share-action i {
display: grid;
width: 45px;
height: 45px;
place-items: center;
border-radius: 8px;
background: #f4f6f8;
color: var(--color-primary);
transition:
transform 0.18s ease,
background 0.18s ease;
}
.share-action:hover,
.share-action:focus-visible {
outline: none;
}
.share-action:hover i,
.share-action:focus-visible i {
transform: translateY(-2px);
background: #eef4ff;
}.share-action.kakao i {
background: #fee500;
color: #191600;
}.share-action.facebook i {
background: #eef4ff;
color: #1877f2;
}.share-action.x i {
background: #f4f4f5;
color: #111;
}.share-action.naver i {
background: #ecfdf3;
color: #03c75a;
}
.share-url-box {
display: grid;
justify-content: center;
margin-top: 0;
}
.share-url-box span {
display: none;
}.share-url-box button {
display: flex;
min-width: 0;
flex-direction: column;
align-items: center;
gap: 9px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-primary);
font-size: 12px;
font-weight: 750;
}
.share-url-box button::before {
content: "";
display: grid;
width: 45px;
height: 45px;
place-items: center;
border-radius: 8px;
background: #f4f6f8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%2314213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
transition:
transform 0.18s ease,
background-color 0.18s ease;
}.share-url-box button:hover::before,
.share-url-box button:focus-visible::before {
transform: translateY(-2px);
background-color: #eef4ff;
}.share-toast {
position: fixed;
z-index: 70;
right: 24px;
bottom: 24px;
border-radius: 8px;
padding: 12px 14px;
background: #191919;
color: #fff;
font-size: 13px;
font-weight: 650;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
/* Global navigation */
.topbar {
position: sticky;
z-index: 20;
top: 0;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
}
.topbar-inner {
height: 73px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
border: 0;
padding: 0;
background: transparent;
font-size: 20px;
font-weight: 900;
letter-spacing: 0.5px;
}.brand-mark {
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
background: var(--ink);
color: #fff;
font-size: 12px;
}
.gnb {
display: flex;
align-items: center;
gap: 38px;
}.gnb :is(a,button) {
position: relative;
padding: 26px 0 24px;
border: 0;
background: transparent;
color: #777;
font-weight: 750;
font-size: 15px;
}.gnb :is(a,button).active,
.gnb :is(a,button):hover {
color: var(--ink);
}
.gnb :is(a,button).active::after {
content: "";
position: absolute;
right: 0;
bottom: 18px;
left: 0;
height: 2px;
background: var(--ink);
}
.gnb .gnb-share {
display: none;
}
.gnb-login {
display: none; /* 데스크톱: 로그인은 우측 utility 로 노출, 모바일 메뉴에서만 표시 */
}
.utility {
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
}
.utility .login {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border: 0;
background: none;
font-size: 14px;
font-weight: 750;
}
/* Main / SSGSAG-inspired discovery layout */
#home {
padding-top: 0;
}
.hero-wrap {
padding-top: 24px;
}.hero {
overflow: hidden;
position: relative;
min-height: 486px;
border-radius: var(--radius);
color: #fff;
background: #1f2522;
}
.hero-slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: stretch;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.hero-slide.active {
opacity: 1;
pointer-events: auto;
}
.hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 58px 60px;
background: #232629;
}
.hero-slide:nth-child(2) .hero-copy {
background: #40552d;
}
.hero-slide:nth-child(3) .hero-copy {
background: #6d4c35;
}
.hero-copy h1 {
max-width: 480px;
margin: 16px 0;
font-size: 42px;
line-height: 1.18;
letter-spacing: 0;
}.hero-copy p {
max-width: 420px;
margin: 0 0 28px;
color: rgba(255, 255, 255, 0.76);
font-size: 16px;
line-height: 1.65;
}.hero-copy .primary {
width: fit-content;
background: #fff;
color: #191919;
}
.hero-visual {
position: relative;
min-height: 486px;
}
.hero-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.15),
transparent 45%
);
}
.hero-visual img {
height: 100%;
}
.ad-meta {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 700;
}
.hero-counter {
position: absolute;
z-index: 2;
right: 22px;
bottom: 22px;
display: flex;
gap: 6px;
}
.hero-dot {
width: 28px;
height: 3px;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.45);
}
.hero-dot.active {
background: #fff;
}.hero-arrow {
position: absolute;
z-index: 3;
top: 50%;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.28);
color: #fff;
transform: translateY(-50%);
}
.hero-arrow.prev {
left: 18px;
}
.hero-arrow.next {
right: 18px;
}
.home-search {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 13px;
margin: 22px auto 0;
max-width: 780px;
min-height: 62px;
padding: 0 18px;
border: 1px solid #dbdbdb;
border-radius: 5px;
background: #fff;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.home-search input {
min-width: 0;
border: 0;
outline: 0;
font-size: 15px;
}.home-search button {
border: 0;
padding: 0;
background: transparent;
color: var(--ink);
}
.home-cats {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 36px;
}
.home-cat {
min-height: 108px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
font-size: 14px;
font-weight: 750;
}
.home-cat i {
width: 25px;
height: 25px;
}.home-cat:nth-child(1) i {
color: #f07058;
}.home-cat:nth-child(2) i {
color: var(--color-text);
}.home-cat:nth-child(3) i {
color: #44a66c;
}.home-cat:nth-child(4) i {
color: #db8c21;
}.home-cat:nth-child(5) i {
color: var(--color-text);
}.home-cat:nth-child(6) i {
color: #458e93;
}.home-cat:hover {
border-color: var(--ink);
}
.quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.quick-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
}
.quick-card .thumb {
aspect-ratio: 1.55;
overflow: hidden;
}
.quick-card img {
height: 100%;
transition: transform 0.25s;
}
.quick-card:hover img {
transform: scale(1.04);
}
.quick-info {
padding: 16px;
}
.quick-info strong {
display: block;
margin: 8px 0 5px;
font-size: 17px;
}.quick-info p {
overflow: hidden;
margin: 0;
color: #777;
font-size: 13px;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Directory / Ktown-inspired list */
.page-title {
margin: 8px 0 30px;
font-size: 34px;
line-height: 1.2;
letter-spacing: 0;
}
.directory-layout {
display: grid;
grid-template-columns: 236px 1fr;
gap: 42px;
align-items: start;
}
.filter-panel {
position: sticky;
top: 96px;
padding-right: 22px;
}
.filter-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--ink);
}
.filter-top strong {
font-size: 17px;
}.reset {
border: 0;
padding: 0;
color: #888;
background: none;
font-size: 12px;
}
.filter-group {
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.filter-group h3 {
margin: 0 0 13px;
font-size: 14px;
}.filter-option {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
margin: 11px 0;
border: 0;
padding: 0;
background: none;
color: #707070;
font-size: 13px;
text-align: left;
}
.filter-option::before {
content: "";
flex: 0 0 15px;
width: 15px;
height: 15px;
border: 1px solid #cfcfcf;
border-radius: 2px;
}.filter-option.selected {
color: var(--ink);
font-weight: 750;
}.filter-option.selected::before {
border-color: var(--ink);
background: var(--ink);
box-shadow: inset 0 0 0 3px #fff;
}
.directory-search {
display: grid;
grid-template-columns: 1fr 48px;
height: 52px;
margin-bottom: 20px;
border: 1px solid #cfcfcf;
}
.directory-search input {
padding: 0 15px;
border: 0;
outline: 0;
}
.directory-search button {
border: 0;
border-left: 1px solid #e5e5e5;
background: #fff;
}
.result-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.result-bar strong {
font-size: 14px;
}.result-bar strong b {
color: var(--coral);
}.sort {
border: 0;
background: #fff;
color: #777;
font-size: 13px;
}
.directory-list {
border-top: 2px solid var(--ink);
}
/* 필터로 숨긴 업체: display가 걸려 있어 [hidden] 기본값이 무시되므로 강제 */
.business-row[hidden] {
display: none !important;
}
.business-row {
display: grid;
grid-template-columns: 194px 1fr auto;
gap: 22px;
align-items: center;
min-height: 194px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.business-row .thumb {
height: 142px;
overflow: hidden;
border-radius: 4px;
}
.business-row .thumb img {
height: 100%;
}
.business-main {
min-width: 0;
}.business-main .category {
color: var(--coral);
font-size: 12px;
font-weight: 800;
}
.business-main h2 {
margin: 7px 0 9px;
font-size: 19px;
}.business-main p {
overflow: hidden;
margin: 0;
color: #666;
font-size: 13px;
line-height: 1.55;
text-overflow: ellipsis;
white-space: nowrap;
}.business-meta {
display: flex;
gap: 11px;
margin-top: 13px;
color: #777;
font-size: 12px;
}
.business-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}.business-action {
padding: 10px 0 10px 12px;
border: 0;
background: none;
color: #555;
}/* Directory detail */
.back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 26px;
border: 0;
padding: 0;
color: #666;
background: none;
font-size: 13px;
}
.detail-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
gap: 35px;
padding-bottom: 35px;
border-bottom: 1px solid var(--line);
}
.detail-gallery {
overflow: hidden;
height: 430px;
border-radius: var(--radius);
}
.detail-gallery img {
height: 100%;
}.detail-category {
color: var(--coral);
font-size: 13px;
font-weight: 800;
}
.detail-hero h1 {
margin: 10px 0 14px;
font-size: 34px;
line-height: 1.25;
}.detail-hero .intro {
margin: 0 0 24px;
color: #626262;
line-height: 1.65;
}
.detail-lines {
margin: 0;
border-top: 1px solid var(--line);
}
.detail-lines > div {
display: grid;
grid-template-columns: 82px 1fr;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid var(--line);
font-size: 13px;
}.detail-lines dt {
color: #888;
}.detail-lines dd {
margin: 0;
color: #333;
}
.detail-cta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 22px;
}
.detail-cta .outline,
.detail-cta .primary {
min-width: 0;
gap: 6px;
padding-right: 10px;
padding-left: 10px;
white-space: nowrap;
}
.detail-map-section {
margin-top: 46px;
border-bottom: 1px solid var(--line);
padding-bottom: 38px;
}
.detail-map-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.detail-map-head h2 {
margin: 0 0 6px;
font-size: 22px;
}.detail-map-head p {
margin: 0;
color: #868B94;
font-size: 14px;
}.detail-map-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
min-height: 36px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0 12px;
background: #fff;
color: var(--color-text);
font-size: 13px;
font-weight: 750;
text-decoration: none;
}
.detail-map-frame {
overflow: hidden;
height: 360px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #eef1f5;
}
.detail-map-frame iframe {
width: 100%;
height: 100%;
border: 0;
}
.detail-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 70px;
padding-top: 46px;
}
.detail-body h2 {
margin: 0 0 18px;
font-size: 22px;
}.detail-body p {
color: #555;
font-size: 15px;
line-height: 1.85;
}
.notice-card {
height: fit-content;
padding: 22px;
border: 1px solid var(--line);
background: var(--soft);
}
.notice-card strong {
display: block;
margin-bottom: 11px;
font-size: 15px;
}.notice-card p {
margin: 0;
color: #777;
font-size: 13px;
line-height: 1.65;
}
.detail-gallery {
display: flex;
height: auto;
flex-direction: column;
overflow: visible;
border-radius: 0;
}
.gallery-stage {
position: relative;
height: 370px;
overflow: hidden;
border-radius: var(--radius);
background: #ececeb;
}
.gallery-stage img {
width: 100%;
height: 100%;
object-fit: cover;
}.gallery-count {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 16px;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.62);
color: #fff;
font-size: 12px;
font-weight: 650;
}
.gallery-thumbnails {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-top: 9px;
}
.gallery-thumb {
aspect-ratio: 1;
overflow: hidden;
border: 1px solid #e1e1e1;
border-radius: 6px;
padding: 0;
background: #fff;
}
.gallery-thumb {
position: relative;
cursor: pointer;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumb.is-active {
border: 2px solid var(--ink);
}
.gallery-thumb:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}.detail-website {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--color-text);
font-weight: 650;
text-decoration: underline;
text-underline-offset: 2px;
}
.weekday-picker {
display: grid;
grid-template-columns: repeat(7, 27px);
gap: 4px;
width: max-content;
max-width: 100%;
}.weekday-button {
width: 27px;
height: 27px;
border: 1px solid #d8d8d8;
border-radius: 4px;
padding: 0;
background: #fff;
color: #666;
font-size: 12px;
font-weight: 650;
}.weekday-button.is-active {
border-color: var(--ink);
background: var(--ink);
color: #fff;
}
.weekday-button:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 1px;
}.weekday-hours-result {
margin: 8px 0 0;
color: #555;
font-size: 12px;
}.weekday-hours-result b {
margin-right: 6px;
color: #222;
}
.best-life-services {
margin-top: 68px;
border-top: 1px solid var(--line);
padding-top: 42px;
}
.best-life-services-header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
}
.best-life-services h2 {
margin: 0;
font-size: 24px;
}.best-life-ad-label {
border-radius: 4px;
padding: 3px 5px;
background: #fff3d2;
color: #9a6a0c;
font-size: 10px;
font-weight: 800;
}
.best-life-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}.best-life-card {
overflow: hidden;
border: 1px solid #e4e4e4;
border-radius: 8px;
padding: 0 0 15px;
background: #fff;
color: #222;
text-align: left;
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
.best-life-card:hover,
.best-life-card:focus-visible {
box-shadow: 0 8px 20px rgba(18, 18, 18, 0.1);
outline: none;
transform: translateY(-2px);
}
.best-life-image {
position: relative;
display: block;
height: 150px;
overflow: hidden;
background: #efefef;
}
.best-life-image img {
width: 100%;
height: 100%;
object-fit: cover;
}.best-life-pin {
position: absolute;
top: 9px;
left: 9px;
display: grid;
width: 25px;
height: 25px;
place-items: center;
border-radius: 50%;
background: #fff;
color: #d39a20;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
}
.best-life-card-copy {
display: block;
padding: 13px 14px 0;
}.best-life-category {
display: block;
margin: 0 0 6px;
color: var(--color-text);
font-size: 12px;
font-weight: 750;
}.best-life-card h3 {
overflow: hidden;
margin: 0;
color: #222;
font-size: 16px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}.best-life-card strong {
display: block;
overflow: hidden;
color: #222;
font-size: 16px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}.best-life-rating {
display: flex;
align-items: center;
gap: 5px;
margin: 9px 0 7px;
color: var(--color-text);
font-size: 12px;
font-weight: 750;
}
.best-life-rating i {
width: 14px;
fill: currentColor;
}
.best-life-contact,
.best-life-location,
.best-life-tags {
display: block;
overflow: hidden;
margin: 0;
font-size: 12px;
line-height: 1.55;
text-overflow: ellipsis;
white-space: nowrap;
}.best-life-contact {
color: #333;
font-weight: 650;
}.best-life-location {
margin-top: 4px;
color: #777;
}.best-life-tags {
margin-top: 8px;
color: #777;
font-size: 11px;
}
/* EventUs-inspired events */
#events {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
background: #fff;
}
.event-hero {
--event-hero-bleed: 125vw;
position: relative;
width: 350vw;
height: 366px;
margin-left: calc(50% - 175vw);
overflow: hidden;
background: #d4a9bf;
}
.event-hero-rail {
display: flex;
height: 100%;
transition: transform 0.58s ease;
}
.event-hero-rail.is-rolling {
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}.event-hero-slide {
position: relative;
flex: 0 0 100%;
overflow: hidden;
border: 0;
padding: 0;
background: #d4a9bf;
color: #fff;
text-align: left;
}
.event-hero-slide:nth-child(2) {
background: #141b2d;
}
.event-hero-slide:nth-child(3) {
background: #FF6F0F;
}
.event-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
align-items: center;
height: 100%;
z-index: 1;
}
.event-hero-copy {
padding-left: calc(
var(--event-hero-bleed) + max(88px, calc((100vw - 1260px) / 2))
);
}.event-hero h1 {
margin: 0;
color: #fff;
font-size: 32px;
font-weight: 850;
line-height: 1.28;
}.event-hero p {
margin: 29px 0 0;
color: rgba(255, 255, 255, 0.92);
font-size: 18px;
font-weight: 650;
}.event-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 36px;
margin-top: 37px;
color: rgba(255, 255, 255, 0.94);
font-size: 20px;
font-weight: 500;
}
.event-hero-art {
position: relative;
overflow: hidden;
min-height: 100%;
padding: 40px
calc(var(--event-hero-bleed) + max(88px, calc((100vw - 1260px) / 2)))
30px 28px;
}
/* 히어로 아트 영역 실제 사진 + 좌측(카피)으로 자연스럽게 섞이는 그라데이션 */
.event-hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.event-hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(15, 20, 35, 0.78) 0%,
rgba(15, 20, 35, 0.32) 48%,
rgba(15, 20, 35, 0.52) 100%
);
}
.event-hero-logo,
.event-hero-shape {
z-index: 2;
}
.event-hero-word {
position: relative;
z-index: 2;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}.event-hero-logo {
position: absolute;
top: 32px;
right: calc(
var(--event-hero-bleed) + max(88px, calc((100vw - 1260px) / 2))
);
color: rgba(255, 255, 255, 0.74);
font-size: 11px;
font-weight: 850;
}.event-hero-word {
display: block;
color: rgba(255, 255, 255, 0.94);
font-size: 45px;
font-weight: 900;
line-height: 1.02;
letter-spacing: 0;
}
.event-hero-shape {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
background: rgba(255, 255, 255, 0.14);
}
.event-hero-shape.one {
top: 74px;
right: 22%;
width: 96px;
height: 124px;
transform: rotate(8deg);
}
.event-hero-shape.two {
right: 10%;
bottom: 33px;
width: 158px;
height: 98px;
transform: rotate(-7deg);
}.event-hero-counter {
position: absolute;
z-index: 3;
right: calc(
var(--event-hero-bleed) + max(88px, calc((100vw - 1260px) / 2))
);
bottom: 13px;
min-width: 58px;
border-radius: 5px;
padding: 8px 10px;
background: rgba(43, 36, 54, 0.62);
color: #fff;
font-size: 13px;
font-weight: 850;
text-align: center;
}
.eventus-section {
width: min(calc(100% - 176px), 1250px);
margin: 0 auto;
padding: 34px 0 42px;
}
.eventus-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}.eventus-section-head h2 {
margin: 0;
color: #111;
font-size: 18px;
font-weight: 850;
}.eventus-section-head p {
margin: 13px 0 0;
color: #8a8f9b;
font-size: 14px;
}.eventus-section-head .text-link {
color: #8d929c;
font-weight: 500;
}
.event-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}.event-filter {
min-height: 34px;
border: 1px solid #dde1e7;
border-radius: 18px;
padding: 0 14px;
background: #fff;
color: #69707d;
font-size: 13px;
}.event-filter.active {
border-color: #FF6F0F;
background: #FF6F0F;
color: #fff;
font-weight: 800;
}
.event-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}
.event-card[hidden] {
display: none;
}.event-card {
overflow: visible;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: #111;
text-align: left;
}
.event-card .poster {
position: relative;
display: block;
aspect-ratio: 1.84;
overflow: hidden;
border-radius: 6px;
background: #e8ebef;
}
.event-card .poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.22s ease;
}
.event-card:hover .poster img,
.event-card:focus-visible .poster img {
transform: scale(1.025);
}
.event-card .poster .badge {
position: absolute;
top: 10px;
left: 10px;
}
.event-card .event-info {
position: relative;
padding: 12px 0 0;
}.event-card h3 {
display: -webkit-box;
overflow: hidden;
min-height: 44px;
margin: 5px 0 0;
color: #202124;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.event-card p {
margin: 0;
color: #9a9fa9;
font-size: 13px;
line-height: 1.45;
}.event-card .date {
overflow: hidden;
color: #9a9fa9;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}.event-card .price {
display: inline-block;
margin-top: 13px;
color: var(--color-text);
font-size: 14px;
font-weight: 850;
}.event-card .views {
float: right;
margin-top: 15px;
color: #c5cad2;
font-size: 12px;
font-weight: 650;
}.event-save {
position: absolute;
top: 9px;
right: 9px;
display: grid;
width: 30px;
height: 30px;
place-items: center;
color: #fff;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34));
transition:
color 0.18s ease,
transform 0.18s ease;
}
.event-save svg {
stroke-width: 2.4;
}.event-save.is-saved {
color: #ff4757;
transform: scale(1.08);
}
.event-save.is-saved svg {
fill: currentColor;
}
.event-newsletter {
padding: 10px 0 64px;
background: #fff;
}
.event-newsletter-inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) auto;
align-items: center;
gap: 28px;
border-top: 1px solid #eceef3;
padding-top: 32px;
}.event-newsletter p {
margin: 0 0 7px;
color: #777d89;
font-size: 14px;
}.event-newsletter h2 {
margin: 0;
color: #111;
font-size: 24px;
line-height: 1.3;
}
.event-newsletter-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 13px;
}.event-newsletter-links button {
border: 0;
padding: 0;
background: transparent;
color: #202124;
font-size: 14px;
font-weight: 650;
}
.event-newsletter-links span {
width: 1px;
height: 13px;
background: #d8dbe2;
}.event-subscribe {
min-height: 44px;
border: 0;
border-radius: 6px;
padding: 0 22px;
background: #FF6F0F;
color: #fff;
font-size: 14px;
font-weight: 850;
}
/* Event detail */
#event-detail {
padding-top: 0;
background: #fff;
}
.event-detail-shell {
width: min(calc(100% - 48px), 1120px);
margin: 0 auto;
}
.event-detail-top {
padding-top: 28px;
}
.event-detail-top .back {
margin-bottom: 22px;
}
.event-detail-grid {
display: grid;
grid-template-columns: minmax(0, 724px) 360px;
gap: 36px;
align-items: start;
}
.event-detail-main {
min-width: 0;
}
.event-cover {
overflow: hidden;
border-radius: 0;
aspect-ratio: 16 / 9;
background: #edf0f4;
}
.event-cover img {
object-fit: cover;
height: 100%;
}
.event-category-line {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 26px;
}.event-category-line span {
display: inline-flex;
align-items: center;
min-height: 28px;
border-radius: 4px;
padding: 0 10px;
background: #f4f0ff;
color: var(--color-text);
font-size: 13px;
font-weight: 800;
}.event-title {
margin: 18px 0 18px;
color: #111;
font-size: 34px;
font-weight: 850;
line-height: 1.34;
letter-spacing: 0;
}.event-host-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 16px;
color: #555d69;
font-size: 14px;
}.event-host-line b {
color: #222;
font-weight: 800;
}.event-lead {
margin: 0 0 28px;
color: #5e6572;
font-size: 16px;
line-height: 1.72;
}
.event-summary {
margin-top: 26px;
border-top: 1px solid var(--line);
}
.event-summary-row {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 20px;
border-bottom: 1px solid var(--line);
padding: 20px 0;
}.event-summary-row dt {
color: #111;
font-size: 15px;
font-weight: 850;
}.event-summary-row dd {
margin: 0;
color: #3d424b;
font-size: 15px;
line-height: 1.65;
}.event-summary-row small {
display: inline-flex;
align-items: center;
margin-left: 8px;
border-radius: 4px;
padding: 3px 6px;
background: #edf7ef;
color: #2b8a4b;
font-size: 12px;
font-weight: 800;
}
.event-tabs {
position: sticky;
top: 72px;
z-index: 5;
display: flex;
margin-top: 34px;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: #fff;
overflow-x: auto;
}.event-tabs button {
flex: 0 0 auto;
border: 0;
background: none;
min-height: 56px;
padding: 0 28px;
color: #868B94;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
}.event-tabs button.active {
background: var(--color-accent);
color: #fff;
}
.event-content {
padding: 0;
}
.apply-box {
position: sticky;
top: 96px;
border: 1px solid #e3e6ea;
border-radius: 4px;
background: #fff;
box-shadow: 0 8px 28px rgba(24, 31, 43, 0.08);
}
.apply-box header {
padding: 22px 24px 18px;
border-bottom: 1px solid #edf0f3;
}.apply-box header strong {
display: block;
color: #111;
font-size: 18px;
font-weight: 850;
}.apply-box header span {
display: block;
margin-top: 8px;
color: #7a818d;
font-size: 13px;
}
.apply-info {
padding: 20px 24px 0;
}.apply-info div {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f0f2f5;
padding: 12px 0;
color: #777d89;
font-size: 14px;
}.apply-info b {
color: #111;
font-weight: 850;
}
.ticket-selector {
margin: 18px 24px 0;
border: 1px solid #e5e8ec;
border-radius: 5px;
padding: 16px;
background: #fafbfc;
}.ticket-selector label {
display: block;
color: #111;
font-size: 14px;
font-weight: 850;
}.ticket-selector p {
margin: 8px 0 14px;
color: #7b828e;
font-size: 13px;
}
.ticket-stepper {
display: flex;
align-items: center;
justify-content: space-between;
}.ticket-stepper button {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid #d8dde4;
border-radius: 50%;
background: #fff;
color: #4d5664;
font-size: 18px;
}.ticket-stepper strong {
color: #111;
font-size: 18px;
}
.apply-box .primary {
width: calc(100% - 48px);
height: 52px;
margin: 18px 24px 12px;
border-radius: 4px;
background: #FF6F0F;
font-size: 16px;
font-weight: 850;
}
.apply-box .share-detail-button {
width: calc(100% - 48px);
height: 46px;
margin: 0 24px 24px;
border-radius: 4px;
}
.event-detail-section {
scroll-margin-top: 150px;
border-bottom: 1px solid #f0f2f5;
padding: 44px 0;
}.event-detail-section h2 {
margin: 0 0 6px;
color: #111;
font-size: 22px;
font-weight: 850;
}.event-detail-section .section-en {
margin: 0 0 28px;
color: #949aa5;
font-size: 14px;
}.event-detail-section p {
margin: 0;
color: #4a515d;
font-size: 15px;
line-height: 1.9;
}
.intro-highlight {
border-radius: 6px;
padding: 26px;
background: #f6f4ff;
}.intro-highlight h3 {
margin: 0 0 14px;
color: #111;
font-size: 20px;
}
.event-agenda {
display: grid;
gap: 12px;
margin-top: 22px;
}.event-agenda li {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 18px;
border: 1px solid #edf0f3;
border-radius: 5px;
padding: 15px 18px;
color: #4f5662;
font-size: 14px;
line-height: 1.6;
list-style: none;
}.event-agenda time {
color: var(--color-text);
font-weight: 850;
}
.event-location-box {
border-top: 1px solid var(--color-border);
}
.event-location-box dl {
margin: 0;
}.event-location-parking {
margin: 0 0 22px;
color: var(--color-muted);
font-size: 14px;
}.event-location-row {
display: grid;
grid-template-columns: 60px minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
min-height: 48px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
font-size: 14px;
}.event-location-row dt {
color: var(--color-muted);
font-weight: 650;
}
.event-location-row dd {
display: flex;
min-width: 0;
align-items: center;
gap: 9px;
margin: 0;
font-weight: 650;
}.event-location-copy,
.event-map-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-text);
font-size: 14px;
font-weight: 750;
}.event-location-copy {
flex: 0 0 auto;
color: var(--color-muted);
}.event-location-copy:hover,
.event-map-toggle:hover {
color: var(--color-text);
}
.event-location-copy:hover,
.event-map-toggle:hover { color: var(--color-accent); }
.event-map-toggle svg {
transition: transform 0.18s ease;
}
.event-location-map {
overflow: hidden;
height: 0;
border: 0;
border-radius: 8px;
background: #eef1f5;
transition:
height 0.24s ease,
margin-top 0.24s ease,
border-color 0.24s ease;
}
.event-location-map.is-open {
height: 260px;
margin-top: 16px;
border: 1px solid var(--color-border);
}
.event-location-map iframe {
width: 100%;
height: 100%;
border: 0;
}
.notice-list {
display: grid;
gap: 10px;
}
.notice-list article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border: 1px solid #edf0f3;
border-radius: 5px;
padding: 16px 18px;
}.notice-list b {
color: #222;
font-size: 15px;
}.notice-list span {
color: #9aa1ac;
font-size: 13px;
}
.contact-panel,
.channel-card {
border: 1px solid #e5e8ec;
border-radius: 6px;
padding: 22px;
background: #fff;
}.contact-panel button,
.channel-card button {
margin-top: 18px;
border: 1px solid #dfe3e8;
border-radius: 4px;
padding: 11px 16px;
background: #fff;
color: #222;
font-size: 14px;
font-weight: 750;
}
.channel-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}.channel-card h3 {
margin: 0 0 7px;
color: #111;
font-size: 18px;
}
.refund-list,
.faq-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
}.refund-list li,
.faq-list li {
list-style: none;
border-bottom: 1px solid #edf0f3;
padding: 0 0 13px;
color: #565d68;
font-size: 14px;
line-height: 1.7;
}.faq-list b {
display: block;
margin-bottom: 6px;
color: #111;
}
/* Loud-inspired expert marketplace */
#experts {
padding-top: 24px;
background: #fff;
}
.expert-market-shell {
width: min(calc(100% - 16px), 1280px);
margin: 0 auto;
}
.expert-hero-banners {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.expert-main-banner,
.expert-side-banner {
position: relative;
min-height: 290px;
overflow: hidden;
border: 0;
border-radius: 8px;
padding: 0;
text-align: left;
}.expert-main-banner {
display: block;
background:
radial-gradient(
circle at 70% 25%,
rgba(255, 255, 255, 0.2),
transparent 28%
),
linear-gradient(135deg, #e20c00 0%, #d71200 58%, #a50000 100%);
color: #070707;
}
.expert-main-track {
display: flex;
height: 100%;
transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.expert-main-track.is-rolling {
will-change: transform;
}.expert-main-slide {
position: relative;
display: grid;
flex: 0 0 100%;
grid-template-columns: 0.88fr 1.12fr;
min-height: 290px;
overflow: hidden;
border: 0;
padding: 0;
background:
radial-gradient(
circle at 70% 25%,
rgba(255, 255, 255, 0.2),
transparent 28%
),
linear-gradient(135deg, #e20c00 0%, #d71200 58%, #a50000 100%);
color: #070707;
text-align: left;
}
.expert-main-slide:nth-child(2) {
background:
radial-gradient(
circle at 72% 18%,
rgba(255, 255, 255, 0.2),
transparent 26%
),
linear-gradient(135deg, #FF8A3D 0%, #FF6F0F 54%, #C24E00 100%);
}.expert-main-slide:nth-child(2) .expert-banner-copy h1,
.expert-main-slide:nth-child(2) .expert-banner-copy p,
.expert-main-slide:nth-child(2) .expert-banner-script {
color: #fff;
}
.expert-main-slide:nth-child(3) {
background:
radial-gradient(
circle at 75% 22%,
rgba(255, 255, 255, 0.14),
transparent 25%
),
linear-gradient(135deg, #101010 0%, #292929 56%, #050505 100%);
}.expert-main-slide:nth-child(3) .expert-banner-copy h1,
.expert-main-slide:nth-child(3) .expert-banner-copy p,
.expert-main-slide:nth-child(3) .expert-banner-script {
color: #fff;
}.expert-main-slide::before {
content: "VLACKBOX PRO SAIGON HANOI DANANG";
position: absolute;
inset: 40px 0 auto 310px;
color: rgba(255, 255, 255, 0.08);
font-size: 34px;
font-weight: 900;
white-space: nowrap;
}.expert-banner-arrow {
position: absolute;
z-index: 4;
top: 50%;
display: grid;
width: 52px;
height: 52px;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: #111;
transform: translateY(-50%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.expert-banner-arrow.left {
left: 24px;
}
.expert-banner-arrow.right {
right: 24px;
}
.expert-banner-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 34px 30px 34px 74px;
}.expert-banner-script {
display: block;
margin-bottom: 18px;
color: #151515;
font-family: Georgia, "Times New Roman", serif;
font-size: 42px;
font-style: italic;
line-height: 1;
}.expert-banner-copy h1 {
margin: 0;
color: #050505;
font-size: 48px;
font-weight: 950;
line-height: 0.95;
letter-spacing: 0;
}.expert-banner-copy p {
margin: 17px 0 0;
color: #090909;
font-size: 16px;
font-weight: 750;
}.expert-banner-stats {
position: absolute;
z-index: 3;
top: 46px;
display: flex;
width: 100%;
justify-content: space-between;
padding: 0 88px 0 38px;
color: #fff;
pointer-events: none;
}
.expert-banner-stats span {
display: block;
font-size: 11px;
font-weight: 850;
}
.expert-banner-stats b {
display: block;
margin-top: 2px;
font-size: 28px;
line-height: 1;
}
.expert-portrait-group {
position: relative;
z-index: 2;
display: flex;
align-items: end;
justify-content: center;
height: 100%;
padding: 34px 74px 0 0;
}
.expert-portrait {
position: relative;
width: 132px;
height: 218px;
margin-left: -34px;
overflow: hidden;
border-radius: 74px 74px 0 0;
background: #151515;
box-shadow: 0 18px 26px rgba(0, 0, 0, 0.22);
}
.expert-portrait:first-child {
margin-left: 0;
}
.expert-portrait img {
height: 100%;
object-fit: cover;
filter: saturate(0.92);
}
.expert-portrait.center {
width: 150px;
height: 238px;
z-index: 3;
}.expert-side-banner {
padding: 30px 34px;
background: #369a68;
color: #fff;
}.expert-side-banner p {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
}
.expert-side-banner h2 {
margin: 0;
font-size: 25px;
line-height: 1.45;
}.expert-side-banner em {
display: block;
margin-top: 24px;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-style: normal;
}
.expert-mockups {
position: absolute;
right: 28px;
bottom: 20px;
width: 230px;
height: 116px;
}
.expert-window {
position: absolute;
bottom: 0;
width: 120px;
height: 86px;
border-radius: 6px;
background: #191919;
box-shadow: 0 13px 22px rgba(0, 0, 0, 0.18);
}
.expert-window::before {
content: "";
position: absolute;
top: 7px;
left: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff6b6b;
box-shadow:
10px 0 #ffd166,
20px 0 #70d678;
}
.expert-window.one {
left: 0;
}
.expert-window.two {
right: 8px;
bottom: 16px;
transform: rotate(8deg);
}.expert-window span {
position: absolute;
inset: 24px 12px 12px;
display: grid;
place-items: center;
background: #f5f0e9;
color: #2b3d37;
font-family: Georgia, serif;
font-size: 22px;
}.expert-start-badge {
position: absolute;
right: 8px;
bottom: 16px;
z-index: 2;
border-radius: 4px;
padding: 10px 14px;
background: #eef8e7;
color: #1b5d3d;
font-size: 14px;
font-weight: 850;
}
.expert-side-circle {
position: absolute;
right: -10px;
top: 88px;
width: 86px;
height: 86px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
}
.expert-market-layout {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 42px;
min-width: 0;
}
.expert-sidebar {
min-width: 0;
padding-top: 3px;
}
.expert-market-content {
min-width: 0;
}
.expert-filter-reset,
.expert-sidebar strong,
.expert-sidebar label {
display: block;
}.expert-filter-reset {
margin-bottom: 22px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-text);
font-size: 14px;
font-weight: 850;
text-align: left;
cursor: pointer;
}
.expert-filter-group {
border-bottom: 1px solid #e6e9ef;
padding: 0 0 18px;
margin-bottom: 19px;
}.expert-filter-group strong {
margin-bottom: 16px;
color: #111;
font-size: 16px;
font-weight: 900;
}.expert-filter-subtitle {
margin: 0 0 14px;
color: #111;
font-size: 14px;
font-weight: 850;
}.expert-filter-group label {
position: relative;
margin-top: 12px;
padding-left: 25px;
color: #59616e;
font-size: 14px;
line-height: 1.3;
}.expert-filter-group input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid #8d98a8;
border-radius: 2px;
background: #fff;
accent-color: #FF6F0F;
}.expert-filter-group input:checked {
border-color: var(--color-main);
background: var(--color-main);
box-shadow: inset 0 0 0 3px #fff;
}
.expert-market-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
margin-bottom: 16px;
}
.expert-control-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-left: auto;
}.expert-select {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 38px;
border: 1px solid #dce1e8;
border-radius: 4px;
padding: 0 16px;
background: #fff;
color: #1c2430;
font-size: 14px;
font-weight: 650;
}
.expert-select {
min-width: 132px;
justify-content: space-between;
}
.expert-sort {
min-width: 157px;
}
.expert-sort-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.expert-sort-wrap .expert-sort {
appearance: none;
padding-right: 42px;
}
.expert-sort-wrap i {
position: absolute;
right: 14px;
pointer-events: none;
}
.expert-market-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 44px 18px;
}
.expert-product-card {
position: relative;
display: block;
width: 100%;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.expert-product-card[hidden] {
display: none;
}
.expert-product-card:focus-visible {
outline: 2px solid #FF6F0F;
outline-offset: 4px;
}
.expert-product-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1.45 / 1;
border-radius: 4px;
background: #eef1f5;
}
.expert-product-thumb img {
height: 100%;
transition: transform 0.24s ease;
}
.expert-product-card:hover img {
transform: scale(1.035);
}.expert-like {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 0;
border-radius: 999px;
padding: 5px 8px;
background: rgba(17, 24, 39, 0.34);
backdrop-filter: blur(3px);
color: #fff;
cursor: pointer;
font-size: 15px;
font-weight: 850;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}
.expert-like:hover,
.expert-like:focus-visible {
background: rgba(17, 24, 39, 0.58);
outline: none;
}
.expert-like.is-saved {
background: rgba(255, 111, 15, 0.9);
}
.expert-like i {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.expert-like.is-saved svg {
fill: currentColor;
}.expert-product-card h2 {
min-height: 43px;
margin: 12px 0 6px;
color: #1b2230;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
}.expert-product-card p {
margin: 0 0 5px;
color: #111;
font-size: 13px;
font-weight: 750;
}
.expert-product-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12px;
}.expert-product-meta span {
display: inline-flex;
align-items: center;
min-height: 24px;
border-radius: 999px;
padding: 0 9px;
background: var(--color-main-light);
color: var(--color-text);
font-size: 12px;
font-weight: 750;
}
/* AJD-inspired expert conversion detail */
#expert-detail {
padding-top: 0;
scroll-margin-top: 80px;
background: #fff;
}
.proof-strip {
display: none;
}
.pro-section {
padding: 0 0 110px;
}
.pro-section.gray {
background: #fff;
}
.pro-section .pro-intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
max-width: none;
margin-bottom: 34px;
}.pro-section h2 {
margin: 0;
color: #151515;
font-size: 31px;
font-weight: 950;
line-height: 1.28;
}.pro-section h2 .blue {
color: var(--color-text);
}.pro-section .pro-intro p {
margin: 16px 0 0;
color: #3f4652;
font-size: 17px;
line-height: 1.7;
}.pro-more {
flex: 0 0 auto;
min-width: 88px;
border: 0;
border-radius: 999px;
padding: 12px 23px;
background: #E85D00;
color: #fff;
font-size: 14px;
font-weight: 900;
}
.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
border-top: 0;
}
.process article {
min-height: 184px;
border: 1px solid #e7ebf1;
border-radius: 12px;
padding: 24px 22px;
background: #fff;
}.process em {
display: block;
margin-bottom: 28px;
color: var(--color-text);
font-size: 12px;
font-style: normal;
font-weight: 950;
}.process h3 {
margin: 0 0 10px;
color: #151515;
font-size: 18px;
font-weight: 900;
}.process p {
margin: 0;
color: #59616e;
font-size: 14px;
line-height: 1.65;
}
.portfolio {
display: flex;
gap: 20px;
overflow-x: auto;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
}
.portfolio figure {
flex: 0 0 297px;
scroll-snap-align: start;
overflow: hidden;
margin: 0;
border-radius: 8px;
background: #fff;
}
.portfolio img {
height: 190px;
border-radius: 8px;
}
.portfolio figcaption {
padding-top: 14px;
}.portfolio figcaption b {
display: block;
margin-bottom: 14px;
color: #fff;
transform: translateY(-50px);
padding: 0 18px;
font-size: 18px;
font-weight: 950;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}.portfolio figcaption p {
margin: -26px 0 14px;
color: #525a66;
font-size: 15px;
line-height: 1.75;
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.portfolio-tags span {
border-radius: 999px;
padding: 8px 15px;
background: #f2f4f8;
color: #707987;
font-size: 13px;
}
.pro-wide-scene {
width: 100%;
height: 340px;
margin: 0;
overflow: hidden;
background: #ede6dc;
}
.pro-wide-scene img {
height: 100%;
object-fit: cover;
object-position: center;
}
.pro-trust-section {
padding: 92px 0 108px;
background: #fff;
}
.pro-trust-shell {
width: min(calc(100% - 32px), 1040px);
margin: 0 auto;
}
.pro-trust-title {
margin: 0 0 50px;
text-align: center;
}.pro-trust-title h2 {
margin: 0;
color: #111922;
font-size: 26px;
font-weight: 950;
line-height: 1.45;
}.pro-trust-title p {
margin: 17px 0 0;
color: #5b6471;
font-size: 15px;
line-height: 1.6;
}.pro-trust-title .blue {
color: var(--color-text);
}
.pro-lead-card {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
align-items: center;
gap: 48px;
width: min(100%, 794px);
min-height: 288px;
margin: 0 auto 32px;
overflow: hidden;
border-radius: 10px;
padding: 38px 54px 0 44px;
background: #f3f2f1;
}
.pro-lead-photo {
align-self: end;
display: flex;
height: 250px;
align-items: flex-end;
justify-content: center;
}
.pro-lead-photo img {
width: 210px;
height: 236px;
border-radius: 16px 16px 0 0;
object-fit: cover;
object-position: top center;
}.pro-lead-copy h3 {
margin: 0 0 20px;
color: #111922;
font-size: 21px;
font-weight: 950;
}.pro-lead-copy p {
margin: 0;
color: #4f5967;
font-size: 13px;
line-height: 1.8;
}
.pro-chip-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}.pro-chip-list span {
border-radius: 999px;
padding: 7px 13px;
background: #fff;
color: var(--color-text);
font-size: 12px;
font-weight: 850;
}
.pro-team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
width: min(100%, 794px);
margin: 0 auto;
}
.pro-team-card {
overflow: hidden;
min-height: 260px;
border-radius: 6px;
background: #f3f2f1;
}
.pro-team-card img {
width: 100%;
height: 174px;
object-fit: cover;
object-position: top center;
}.pro-team-card strong {
display: block;
margin: 16px 18px 6px;
color: #111922;
font-size: 17px;
font-weight: 950;
}.pro-team-card p {
margin: 0 18px 18px;
color: #5b6471;
font-size: 13px;
line-height: 1.55;
}
.consult {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 36px;
align-items: start;
border-radius: 18px;
padding: 40px;
background: #f6f8fb;
}
.consult h2 {
font-size: 30px;
}.consult p {
color: #59616e;
line-height: 1.7;
}
.consult-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.consult-form input,
.consult-form select {
width: 100%;
height: 52px;
border: 1px solid #dfe4ec;
border-radius: 8px;
padding: 0 13px;
outline: 0;
background: #fff;
}
.consult-form .wide {
grid-column: span 2;
}
.consult-form .primary {
grid-column: span 2;
height: 54px;
border-radius: 8px;
background: #E85D00;
}
/* 상담폼이 label 래핑/제목/textarea 구조여도 깨지지 않도록 (관리자 detail_html 호환) */
.consult > form:only-child { grid-column: 1 / -1; }.consult-form h2 {
grid-column: 1 / -1;
margin: 0 0 2px;
font-size: 22px;
font-weight: 800;
color: var(--color-primary);
}.consult-form label {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #59616e;
}
.consult-form label input,
.consult-form label select,
.consult-form textarea {
width: 100%;
height: 52px;
border: 1px solid #dfe4ec;
border-radius: 8px;
padding: 0 13px;
outline: 0;
background: #fff;
font-family: inherit;
}
.consult-form textarea,
.consult-form label textarea {
height: auto;
min-height: 96px;
padding: 12px 13px;
line-height: 1.6;
}
.pro-faq-section {
padding: 8px 0 72px;
background: #fff;
}
.pro-faq-shell {
width: min(calc(100% - 32px), 794px);
margin: 0 auto;
}.pro-faq-title {
margin: 0 0 50px;
color: #111922;
font-size: 25px;
font-weight: 950;
line-height: 1.35;
text-align: center;
}.pro-faq-title span {
color: var(--color-text);
}
.pro-faq-list {
border-top: 1px solid #d8dee7;
}
.pro-faq-item {
border-bottom: 1px solid #d8dee7;
}
.pro-faq-item summary {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
min-height: 62px;
align-items: center;
list-style: none;
cursor: pointer;
}
.pro-faq-item summary::-webkit-details-marker {
display: none;
}.pro-faq-number {
color: var(--color-text);
font-size: 15px;
font-weight: 950;
}.pro-faq-question {
color: #111922;
font-size: 13px;
font-weight: 850;
}.pro-faq-icon {
color: #6b7480;
transition: transform 0.2s ease;
}
.pro-faq-item[open] .pro-faq-icon {
transform: rotate(180deg);
}.pro-faq-answer {
margin: -4px 48px 22px 50px;
color: #5b6471;
font-size: 13px;
line-height: 1.75;
}.mobile-consult {
position: fixed;
z-index: 19;
right: 50%;
bottom: 28px;
display: flex;
min-width: 500px;
min-height: 72px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: #858d65;
color: #fff;
font-size: 25px;
font-weight: 950;
transform: translateX(50%);
box-shadow: 0 13px 30px rgba(49, 55, 31, 0.28);
}
.pro-floating-tools {
position: fixed;
z-index: 18;
right: 28px;
bottom: 28px;
display: grid;
gap: 14px;
}.pro-floating-tools button {
display: grid;
width: 58px;
height: 58px;
place-items: center;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--color-text);
box-shadow: 0 8px 22px rgba(28, 37, 54, 0.13);
}.pro-floating-tools button:last-child {
background: #ffd600;
color: #171717;
}
@media (max-width: 820px) {
.shell {
width: min(calc(100% - 32px), var(--max));
}
.topbar-inner {
grid-template-columns: 1fr auto;
height: 64px;
}
.brand {
font-size: 18px;
}
.gnb {
position: absolute;
right: 0;
bottom: -47px;
left: 0;
justify-content: space-around;
height: 47px;
border-bottom: 1px solid var(--line);
background: #fff;
gap: 0;
}
.gnb :is(a,button) {
padding: 15px 0 13px;
font-size: 14px;
}
.gnb :is(a,button).active::after {
bottom: 6px;
}
.utility .login {
display: none;
}
.utility .icon-button {
width: 34px;
height: 34px;
}
.page {
padding-top: 64px;
}
.hero-wrap {
padding-top: 14px;
}
.hero {
min-height: 500px;
}
.hero-slide {
grid-template-columns: 1fr;
}
.hero-copy {
z-index: 1;
justify-content: end;
padding: 42px 29px 60px;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.08)
) !important;
}
.hero-copy h1 {
font-size: 32px;
}
.hero-copy p {
font-size: 14px;
}
.hero-visual {
position: absolute;
inset: 0;
min-height: auto;
}
.hero-visual::after {
background: rgba(0, 0, 0, 0.12);
}
.hero-arrow {
display: none;
}
.home-search {
margin-top: 14px;
min-height: 55px;
}
.home-cats {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 28px;
}
.home-cat {
min-height: 91px;
font-size: 13px;
}
.quick-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.section-head {
margin-top: 48px;
}
.section-head h2 {
font-size: 23px;
}
.page-title {
margin: 3px 0 24px;
font-size: 29px;
}
.directory-layout {
grid-template-columns: 1fr;
gap: 0;
}
.filter-panel {
position: static;
display: flex;
gap: 8px;
overflow-x: auto;
padding: 0 0 17px;
}
.filter-top {
display: none;
}
.filter-group {
flex: 0 0 auto;
padding: 0;
border: 0;
}
.filter-group h3 {
display: none;
}
.filter-group .filter-option {
display: none;
}
.filter-group .filter-option:first-of-type {
display: inline-flex;
width: auto;
min-height: 34px;
margin: 0;
border: 1px solid #ddd;
border-radius: 17px;
padding: 0 12px;
}
.filter-option::before {
display: none;
}.filter-option.selected {
border-color: var(--ink) !important;
background: var(--ink);
color: #fff;
}
.business-row {
grid-template-columns: 108px 1fr;
gap: 13px;
min-height: 132px;
}
.business-row .thumb {
height: 96px;
}
.business-main h2 {
margin: 5px 0 7px;
font-size: 16px;
}
.business-main p {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.business-meta {
margin-top: 8px;
}
.business-action {
display: none;
}
.detail-hero {
grid-template-columns: 1fr;
gap: 22px;
}
.detail-gallery {
height: 290px;
}
.detail-hero h1 {
font-size: 28px;
}
.detail-map-head {
display: block;
}
.detail-map-head h2 {
font-size: 20px;
}
.detail-map-link {
margin-top: 12px;
}
.detail-map-frame {
height: 280px;
}
.detail-body {
grid-template-columns: 1fr;
gap: 28px;
}
.detail-cta {
position: fixed;
z-index: 18;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 10px 16px;
background: #fff;
box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.12);
}
.detail-cta .outline,
.detail-cta .primary {
min-height: 46px;
}
.event-hero {
--event-hero-bleed: 0px;
width: 100vw;
height: auto;
aspect-ratio: 2 / 1; /* 가로:세로 = 2:1 */
margin-left: calc(50% - 50vw);
}
.event-hero-inner {
grid-template-columns: 1fr;
}
.event-hero-copy {
display: flex;
height: 100%;
flex-direction: column;
justify-content: end;
padding: 16px 20px 18px;
overflow: hidden;
}
.event-hero h1 {
font-size: 20px;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-hero p {
margin-top: 7px;
font-size: 12.5px;
}
.event-hero-meta {
gap: 4px 14px;
margin-top: 8px;
font-size: 12px;
}
.event-hero-art {
position: absolute;
inset: 0;
opacity: 0.42;
padding: 28px 22px;
}
.event-hero-logo {
top: 24px;
right: 22px;
font-size: 10px;
}
.event-hero-word {
margin-left: auto;
font-size: 34px;
text-align: right;
}
.event-hero-shape.one {
top: 62px;
right: 128px;
width: 74px;
height: 96px;
}
.event-hero-shape.two {
right: 24px;
bottom: 102px;
width: 122px;
height: 72px;
}
.event-hero-counter {
right: 20px;
bottom: 18px;
}
.eventus-section {
width: min(calc(100% - 32px), 760px);
padding: 28px 0 34px;
}
.eventus-section-head {
align-items: flex-start;
margin-bottom: 16px;
}
.eventus-section-head h2 {
font-size: 18px;
}
.eventus-section-head p {
margin-top: 8px;
font-size: 13px;
}
.eventus-section-head .text-link {
display: none;
}
.event-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
}
.event-filter {
flex: 0 0 auto;
white-space: nowrap; /* 텍스트 세로로 쪼개지지 않게 */
}
.event-grid {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
}
.event-card {
flex: 0 0 266px;
scroll-snap-align: start;
}
.event-card .event-info {
padding-top: 11px;
}
.event-card h3 {
font-size: 14px;
}
.event-card p {
font-size: 12px;
}
.event-newsletter {
padding: 4px 0 42px;
}
.event-newsletter-inner {
grid-template-columns: 1fr;
gap: 18px;
padding-top: 28px;
}
.event-newsletter-links {
justify-content: flex-start;
}
.event-subscribe {
width: 100%;
}
.event-detail-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.event-detail-shell {
width: min(calc(100% - 32px), 760px);
}
.event-detail-top {
padding-top: 20px;
}
.event-cover {
aspect-ratio: 4 / 3;
}
.event-title {
max-width: 100%;
font-size: 26px;
line-break: anywhere;
overflow-wrap: anywhere;
word-break: break-word;
}
.event-lead {
font-size: 14px;
overflow-wrap: anywhere;
}
.event-summary-row {
grid-template-columns: 1fr;
gap: 7px;
padding: 17px 0;
}
.event-summary-row dd {
overflow-wrap: anywhere;
}
.event-summary-row small {
display: table;
margin: 8px 0 0;
}
.event-tabs {
top: 66px;
margin-top: 28px;
}
.event-tabs button {
min-height: 50px;
padding: 0 20px;
}
.apply-box {
position: static;
}
.event-detail-section {
padding: 34px 0;
}
.intro-highlight {
padding: 20px;
}
.event-agenda li {
grid-template-columns: 1fr;
}
.event-location-row {
grid-template-columns: 48px minmax(0, 1fr);
gap: 10px;
padding: 11px 0;
}
.event-location-row .event-map-toggle {
grid-column: 2;
justify-self: start;
}
.event-location-row dd {
flex-wrap: wrap;
overflow-wrap: anywhere;
}
.event-location-map {
min-height: 0;
}
.event-location-map.is-open {
height: 220px;
}
.notice-list article,
.channel-card {
display: block;
}
.notice-list span {
display: block;
margin-top: 6px;
}
#experts {
padding-top: 16px;
}
.expert-market-shell {
width: min(calc(100% - 24px), 760px);
}
.expert-hero-banners {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 24px;
}
.expert-main-banner,
.expert-side-banner {
min-height: 238px;
border-radius: 7px;
}
.expert-main-banner {
display: block;
}
.expert-main-slide {
grid-template-columns: 1fr;
min-height: 238px;
}
.expert-main-slide::before,
.expert-banner-stats,
.expert-banner-arrow {
display: none;
}
.expert-banner-copy {
z-index: 3;
padding: 28px 24px;
}
.expert-banner-script {
margin-bottom: 12px;
font-size: 34px;
}
.expert-banner-copy h1 {
font-size: 36px;
}
.expert-banner-copy p {
font-size: 14px;
}
.expert-portrait-group {
position: absolute;
z-index: 1;
right: -20px;
bottom: 0;
width: 62%;
opacity: 0.72;
padding: 0 16px 0 0;
pointer-events: none;
}
.expert-portrait {
width: 82px;
height: 132px;
margin-left: -26px;
}
.expert-portrait.center {
width: 94px;
height: 152px;
}
.expert-side-banner {
min-height: 214px;
padding: 24px;
}
.expert-side-banner h2 {
max-width: 240px;
font-size: 21px;
}
.expert-mockups {
right: 16px;
bottom: 16px;
width: 160px;
transform: scale(0.78);
transform-origin: right bottom;
}
.expert-market-layout {
grid-template-columns: 1fr;
gap: 18px;
}
.expert-sidebar {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
}
.expert-filter-reset {
flex: 0 0 auto;
margin: 0;
}
.expert-filter-group {
flex: 0 0 180px;
margin: 0;
border-bottom: 0;
padding: 0;
}
.expert-market-controls {
align-items: center;
justify-content: flex-end;
}
.expert-control-right {
flex-wrap: nowrap;
width: auto;
max-width: 100%;
min-width: 0;
margin-left: auto;
overflow-x: visible;
padding-bottom: 2px;
}
.expert-select {
flex: 0 0 auto;
}
.expert-market-grid {
grid-template-columns: 1fr 1fr;
gap: 24px 12px;
}
.expert-product-card h2 {
font-size: 13px;
}
.expert-product-card p,
.expert-product-meta {
font-size: 12px;
}
.pro-section {
padding: 0 0 70px;
}
.pro-section .pro-intro {
display: block;
margin-bottom: 24px;
}
.pro-section h2 {
font-size: 25px;
}
.pro-section .pro-intro p {
margin-top: 12px;
font-size: 14px;
}
.pro-more {
margin-top: 18px;
}
.process {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.process article {
min-height: 164px;
padding: 18px 15px;
}
.portfolio {
gap: 12px;
}
.portfolio figure {
flex-basis: 268px;
}
.portfolio img {
height: 168px;
}
.pro-wide-scene {
height: 220px;
margin-bottom: 0;
}
.pro-trust-section {
padding: 56px 0 70px;
}
.pro-trust-title {
margin-bottom: 34px;
}
.pro-trust-title h2 {
font-size: 22px;
line-height: 1.42;
}
.pro-trust-title p {
margin-top: 14px;
font-size: 14px;
}
.pro-lead-card {
grid-template-columns: 1fr;
gap: 18px;
min-height: 0;
padding: 28px 22px 24px;
}
.pro-lead-photo {
height: auto;
}
.pro-lead-photo img {
width: 184px;
height: 208px;
border-radius: 14px;
}
.pro-lead-copy h3 {
margin-bottom: 12px;
font-size: 19px;
}
.pro-chip-list {
gap: 7px;
margin-top: 20px;
}
.pro-team-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pro-team-card {
min-height: 246px;
}
.pro-team-card img {
height: 148px;
}
.pro-team-card strong {
margin: 13px 13px 5px;
font-size: 14px;
}
.pro-team-card p {
margin: 0 13px 15px;
font-size: 12px;
}
.consult {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px 18px;
}
.consult-form {
grid-template-columns: 1fr;
}
.consult-form .wide,
.consult-form .primary {
grid-column: span 1;
}
.pro-faq-section {
padding: 0 0 64px;
}
.pro-faq-title {
margin-bottom: 32px;
font-size: 21px;
}
.pro-faq-item summary {
grid-template-columns: auto 1fr auto;
gap: 11px;
min-height: 60px;
}
.pro-faq-number {
font-size: 14px;
}
.pro-faq-question {
font-size: 13px;
line-height: 1.45;
}
.pro-faq-answer {
margin: -2px 34px 20px 43px;
font-size: 12px;
}
.mobile-consult {
right: 12px;
bottom: 12px;
left: 12px;
min-width: 0;
min-height: 60px;
border-radius: 999px;
font-size: 20px;
transform: none;
}
.pro-floating-tools {
display: none;
}
}
/* Home aligned to the current SSG.SAG page structure. */
.topbar .shell {
width: min(calc(100% - 36px), 1024px);
}
.topbar-inner {
grid-template-columns: auto 1fr auto;
height: 72px;
}
.brand {
gap: 7px;
font-size: 19px;
letter-spacing: 0;
}
.brand-mark {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--color-primary);
}
.gnb {
justify-self: start;
gap: 0;
margin-left: 34px;
}.gnb :is(a,button) {
padding: 8px 16px;
color: var(--color-text);
font-size: 16px;
font-weight: 500;
}.gnb :is(a,button).active,
.gnb :is(a,button):hover {
color: var(--color-text);
font-weight: 700;
}
button).active,
button):hover { color: var(--color-accent); }
.gnb :is(a,button).active::after {
display: none;
}
.utility {
gap: 4px;
}.utility-action {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
border: 0;
border-radius: 10px;
padding: 0 12px;
background: transparent;
color: #686868;
font-size: 14px;
font-weight: 600;
}
.utility-action:hover {
background: #f3f5f6;
}.utility .login {
min-height: 38px;
border-radius: 10px;
padding: 0 20px;
background: var(--color-primary);
color: #fff;
font-size: 14px;
font-weight: 600;
}
.utility .login:hover {
background: var(--color-accent);
}
.mobile-menu-toggle {
display: none;
}
.topbar-login-m,
.topbar-actions-m {
display: none; /* 데스크톱: 우측 utility 사용 */
}
#home {
padding-bottom: 0;
}
.ssg-main {
overflow: hidden;
}
.ssg-carousel {
position: relative;
width: 100vw;
margin-top: 24px;
margin-left: calc(50% - 50vw);
overflow: hidden;
padding: 0 24px;
--swiper-wrapper-transition-timing-function: cubic-bezier(
0.22,
0.61,
0.36,
1
);
}
.ssg-rail {
transition-timing-function: cubic-bezier(
0.22,
0.61,
0.36,
1
) !important;
}
.ssg-rail.is-native-rolling {
display: flex;
transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.ssg-rail.is-native-rolling .ssg-ad {
flex: 0 0 calc((100vw - 96px) / 3);
margin-right: 16px;
}.ssg-ad {
position: relative;
width: 100%;
height: 330px;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 16px;
padding: 0;
color: #fff;
text-align: left;
background: #222;
}
.ssg-ad::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(14, 14, 20, 0.72),
rgba(14, 14, 20, 0.12) 70%
);
}
.ssg-ad img {
height: 100%;
}
.ssg-ad-copy {
position: absolute;
z-index: 1;
top: 50%;
left: 96px; /* 좌우 화살표(폭 48 + 여백)와 겹치지 않도록 안쪽으로 */
max-width: calc(100% - 192px);
transform: translateY(-50%);
}
.ssg-ad .badge.ad {
border: 0;
background: rgba(255, 255, 255, 0.22);
font-size: 10px;
}
.ssg-ad h1 {
margin: 13px 0 9px;
font-size: 23px;
line-height: 1.3;
letter-spacing: 0;
}.ssg-ad p {
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 14px;
line-height: 1.5;
}.ssg-carousel-arrow {
position: absolute;
z-index: 2;
top: 50%;
display: grid;
width: 48px;
height: 48px;
place-items: center;
border: 1px solid #e1e1e1;
border-radius: 50%;
background: #fff;
color: #1c1c1c;
transform: translateY(-50%);
}
.ssg-carousel-arrow.prev {
left: 36px;
}
.ssg-carousel-arrow.next {
right: 36px;
}
.ssg-dots {
position: absolute;
z-index: 2;
bottom: 24px;
left: 50%;
display: flex;
width: auto !important;
transform: translateX(-50%);
}
.ssg-dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 50%;
padding: 0;
background: #d8d8d8;
}
.ssg-dots .swiper-pagination-bullet {
width: 7px;
height: 7px;
margin: 0 3px !important;
border-radius: 50%;
background: rgba(255, 255, 255, 0.58);
opacity: 1;
transition:
width 0.25s ease,
background 0.25s ease;
}
.ssg-dots .swiper-pagination-bullet-active {
width: 18px;
border-radius: 5px;
background: #fff;
}
.ssg-dot.active {
width: 18px;
border-radius: 5px;
background: #FF6F0F;
}
.ssg-shortcuts {
display: flex;
justify-content: center;
gap: 38px;
width: min(calc(100% - 32px), 1024px);
margin: 38px auto 24px;
}.ssg-shortcut {
position: relative;
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
gap: 8px;
border: 0;
padding: 0;
background: transparent;
color: #1c1c1c;
font-size: 12px;
font-weight: 750;
}
.ssg-shortcut .shortcut-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 17px;
}
.ssg-shortcut .shortcut-icon svg {
width: 23px;
height: 23px;
stroke-width: 2;
}.ssg-shortcut.region .shortcut-icon {
background: #FFF1E8;
color: var(--color-text);
}.ssg-shortcut.weekly-event .shortcut-icon {
background: #ffe5e3;
color: #e76c68;
}.ssg-shortcut.expert .shortcut-icon {
background: #dff5e9;
color: #35a870;
}.ssg-shortcut.search .shortcut-icon {
background: #fff0d6;
color: #e89a2c;
}.ssg-shortcut .hot-pill {
position: absolute;
top: -2px;
left: 50%;
border-radius: 999px;
padding: 2px 6px;
background: #ff5f6c;
color: #fff;
font-size: 9px;
font-weight: 800;
transform: translateX(-50%);
}
.ssg-divider {
height: 1px;
background: #e7e7e7;
}
.ssg-picked {
background: #f7f7ff;
}
.ssg-inner {
width: min(calc(100% - 32px), 1024px);
margin: 0 auto;
}
.ssg-section {
padding: 56px 0;
}
.ssg-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}.ssg-section-head h2 {
margin: 0;
color: #1c1c1c;
font-size: 24px;
line-height: 1.3;
}.ssg-section-head h2 b {
color: var(--color-text);
}.ssg-section-head .text-link {
color: var(--color-text);
font-size: 13px;
}
.ssg-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ssg-card {
display: flex;
flex-direction: column;
gap: 12px;
border: 0;
border-radius: 16px;
padding: 8px 8px 12px;
background: transparent;
text-align: left;
}
.ssg-card:hover {
background: rgba(255, 255, 255, 0.55);
}
.ssg-card-thumb {
position: relative;
overflow: hidden;
aspect-ratio: 1;
border-radius: 10px;
background: #e5e5e5;
}
.ssg-card-thumb img {
height: 100%;
transition: transform 0.25s;
}
.ssg-card:hover img {
transform: scale(1.04);
}.ssg-card .ssg-tag {
width: fit-content;
border-radius: 4px;
padding: 4px 6px;
background: #FFF1E8;
color: var(--color-text);
font-size: 11px;
font-weight: 750;
}.ssg-card .ssg-tag.coral {
background: #ffe7e4;
color: #dc6555;
}.ssg-card h3 {
display: -webkit-box;
overflow: hidden;
min-height: 42px;
margin: 0;
color: #292929;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.ssg-card .ssg-detail {
margin: 0;
color: #858585;
font-size: 12px;
}.ssg-card .ssg-offer {
margin-top: auto;
color: #1c1c1c;
font-size: 16px;
font-weight: 750;
}
.ssg-latest {
background: #fff;
}
.latest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.latest-column {
display: flex;
flex-direction: column;
gap: 16px;
}.latest-item {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 104px;
border: 0;
padding: 0;
background: transparent;
color: #242424;
text-align: left;
}
.latest-item.feature {
min-height: 120px;
border-radius: 16px;
padding: 10px;
background: #f5f6f8;
}
.latest-thumb {
width: 104px;
height: 104px;
overflow: hidden;
border-radius: 10px;
background: #e7e7e7;
}
.latest-item.feature .latest-thumb {
width: 100px;
height: 100px;
}
.latest-thumb img {
height: 100%;
}
.latest-copy {
display: flex;
align-self: stretch;
min-width: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 7px;
}.latest-type {
border-radius: 4px;
padding: 3px 5px;
background: #f0edff;
color: var(--color-text);
font-size: 11px;
font-weight: 700;
line-height: 1.1;
}.latest-type.coral {
background: #fff0e8;
color: #f17748;
}.latest-title {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: #454545;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.latest-date {
margin-top: auto;
color: #242424;
font-size: 16px;
font-weight: 750;
}.latest-item:hover .latest-title {
color: var(--color-text);
}
.latest-item:hover .latest-title { color: var(--color-accent); }
.expert-wide-section {
width: 100vw;
margin: 56px 0 -56px calc(50% - 50vw);
padding: 56px 0;
background: #f0f1f6;
}
.expert-wide-carousel {
position: relative;
overflow: hidden;
}
.expert-wide-rail {
display: flex;
transition: transform 0.44s ease;
will-change: transform;
}.expert-wide-slide {
flex: 0 0 100%;
border: 0;
padding: 0;
background: transparent;
color: #1c1c1c;
text-align: left;
}
.expert-wide-card {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
min-height: 320px;
overflow: hidden;
border-radius: 20px;
background: #fff;
}
.expert-wide-image {
position: relative;
margin: 40px;
margin-right: 16px;
overflow: hidden;
border-radius: 10px;
background: #e8ebef;
}
.expert-wide-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
0deg,
rgba(12, 17, 29, 0.22),
transparent 58%
);
}
.expert-wide-image img {
height: 100%;
}
.expert-wide-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 40px 40px 40px 24px;
}.expert-wide-copy .eyebrow {
margin-bottom: 11px;
color: var(--color-text);
}
.expert-wide-copy h2 {
margin: 0 0 13px;
font-size: 26px;
line-height: 1.35;
}.expert-wide-copy p {
max-width: 510px;
margin: 0 0 22px;
color: #6c6c70;
font-size: 14px;
line-height: 1.7;
}
.expert-wide-copy .primary {
min-height: 42px;
background: #FF6F0F;
}
.expert-wide-dots {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 18px;
}
.expert-wide-dot {
width: 6px;
height: 6px;
border: 0;
border-radius: 50%;
padding: 0;
background: #c5c7cf;
}
.expert-wide-dot.active {
width: 17px;
border-radius: 5px;
background: #FF6F0F;
}
.ssg-ad-guide {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 28px;
margin-top: 8px;
padding: 32px 36px;
border-radius: 16px;
background: #FFF1E8;
}
.ssg-ad-guide h2 {
margin: 0 0 8px;
font-size: 21px;
}.ssg-ad-guide p {
margin: 0;
color: #65617e;
font-size: 14px;
}
.ssg-ad-guide .primary {
background: #FF6F0F;
}
.site-footer {
border-top: 1px solid #e5e5e5;
background: #fff;
}
.footer-inner {
width: min(calc(100% - 36px), 1024px);
margin: 0 auto;
padding: 56px 0 32px;
}
.footer-main {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 56px;
}.footer-title {
margin: 0 0 20px;
color: #1c1c1c;
font-size: 16px;
font-weight: 700;
}.footer-phone {
display: block;
margin-bottom: 14px;
color: #1c1c1c;
font-size: 24px;
font-weight: 750;
letter-spacing: 0;
}.footer-copy {
margin: 0;
color: #777;
font-size: 13px;
line-height: 1.65;
}
.footer-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}.footer-menu a,
.footer-menu button {
border: 0;
padding: 0;
background: transparent;
color: #707070;
font-size: 14px;
text-align: left;
}.footer-menu a:hover,
.footer-menu button:hover {
color: var(--color-text);
}
.footer-menu a:hover,
.footer-menu button:hover { color: var(--color-accent); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 44px;
border-top: 1px solid #e7e7e7;
padding-top: 24px;
}.footer-brand {
display: inline-flex;
align-items: center;
gap: 7px;
color: #1c1c1c;
font-size: 14px;
font-weight: 850;
}
.footer-brand .brand-mark {
width: 20px;
height: 20px;
border-radius: 5px;
font-size: 10px;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 18px;
}.footer-legal a {
color: #858585;
font-size: 12px;
}.footer-legal a:last-child {
color: #555;
font-weight: 700;
}
/* Ktown-aligned directory list */
.ktown-directory {
background: #fff;
}
.ktown-directory .ktown-shell {
width: min(calc(100% - 48px), 1100px);
}
.ktown-directory.page {
padding-top: 40px;
}
.ktown-directory .directory-layout {
grid-template-columns: 260px minmax(0, 1fr);
gap: 30px;
}
.ktown-directory .filter-panel {
top: 100px;
padding-right: 0;
max-height: calc(100vh - 120px);
overflow-y: auto;
overflow-x: hidden;
}.ktown-breadcrumb {
margin-bottom: 40px;
color: #666;
font-size: 15px;
}.ktown-breadcrumb strong {
color: var(--color-text);
font-weight: 650;
}
.ktown-directory .filter-top {
padding-bottom: 20px;
border-bottom: 0;
}.ktown-directory .filter-top strong {
color: #4b4b4b;
font-size: 20px;
font-weight: 600;
}.filter-count {
color: var(--color-text);
}.ktown-directory .reset {
color: #171717;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.selected-filter-list {
display: flex;
min-height: 96px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border-bottom: 1px solid #ececec;
padding-bottom: 30px;
}.selected-filter {
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-text);
font-size: 14px;
font-weight: 500;
}
.selected-filter { color: var(--color-accent); }
.selected-filter::before {
content: "";
width: 12px;
height: 12px;
background:
linear-gradient(
45deg,
transparent 45%,
#FF6F0F 46%,
#FF6F0F 54%,
transparent 55%
),
linear-gradient(
-45deg,
transparent 45%,
#FF6F0F 46%,
#FF6F0F 54%,
transparent 55%
);
}
.filter-group-heading {
display: flex;
align-items: center;
justify-content: space-between;
}.filter-group-heading .more-filter {
border: 0;
padding: 0;
background: transparent;
color: #999;
font-size: 14px;
}
.ktown-directory .filter-group {
margin-bottom: 28px;
border-bottom: 1px solid #ececec;
padding: 0 0 28px;
}.ktown-directory .filter-group h3 {
margin-bottom: 16px;
color: #4b4b4b;
font-size: 16px;
font-weight: 600;
}.ktown-directory .filter-option {
min-height: 26px;
margin: 10px 0;
border: 1px solid transparent;
border-radius: 3px;
padding: 0;
background: transparent;
color: #595959;
font-size: 14px;
font-weight: 500;
}
.ktown-directory .filter-option::before {
width: 18px;
height: 18px;
flex-basis: 18px;
border: 1px solid #cfd6df;
border-radius: 3px;
background: #fff;
}.ktown-directory .filter-option.selected {
min-height: 28px;
border-color: transparent;
background: transparent;
color: var(--color-text);
font-weight: 800;
}
.ktown-directory .filter-option.selected { color: var(--color-accent); }.ktown-directory .filter-option.selected::before {
content: "✓";
display: grid;
place-items: center;
border-color: var(--color-main);
background: #fff;
color: var(--color-text);
font-size: 13px;
font-weight: 950;
line-height: 1;
box-shadow: none;
}
.ktown-directory .filter-option.selected::before { color: var(--color-accent); }.ktown-directory .filter-option:hover {
border-color: transparent;
}.ktown-directory .filter-option.selected:hover {
border-color: transparent;
}
.ktown-directory .filter-option:focus-visible {
outline: 2px solid rgba(0, 108, 255, 0.3);
outline-offset: 2px;
}.ktown-directory .filter-option.sub-option {
margin-left: 22px;
color: #666;
}
.ktown-directory .filter-option.sub-option[hidden] {
display: none !important;
}
.ktown-directory .filter-option.sub-option::before {
width: 18px;
height: 18px;
}
.ktown-directory .directory-search {
grid-template-columns: 1fr 36px;
height: 52px;
margin-bottom: 30px;
border: 1px solid #999;
border-radius: 50px;
padding: 7px 11px 7px 25px;
background: #f8f8f8;
}.ktown-directory .directory-search input {
background: transparent;
color: #333;
font-size: 16px;
}.ktown-directory .directory-search button {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 0;
border-radius: 50%;
background: #FF6F0F;
color: #fff;
}
.ktown-directory .directory-search button svg {
width: 18px;
height: 18px;
}
.ktown-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 24px;
}.ktown-title-row h1 {
margin: 0;
color: #292929;
font-size: 32px;
line-height: 1.2;
}.ktown-title-row p {
margin: 8px 0 0;
color: #777;
font-size: 14px;
}.ktown-saved {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
border: 1px solid var(--color-border);
border-radius: 22px;
padding: 0 18px;
background: #fff;
color: var(--color-text);
font-size: 14px;
font-weight: 650;
}
.ktown-saved.is-active {
border-color: var(--color-accent);
background: #FFF1E8;
}.saved-business-count {
min-width: 16px;
color: inherit;
font-size: 12px;
}
.ktown-list-title {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 15px;
}.ktown-list-title h2 {
position: relative;
margin: 0;
border-left: 3px solid #a65d3b;
padding-left: 10px;
color: #333;
font-size: 22px;
line-height: 1.2;
}
.ktown-directory .result-bar {
margin: 0;
}.ktown-directory .result-bar strong {
color: #777;
font-weight: 500;
}.ktown-directory .result-bar strong b {
color: var(--color-text);
}.ktown-directory .sort {
color: #4b4b4b;
font-size: 14px;
}
.ktown-directory .directory-list {
margin-top: 14px;
border-top: 1px solid #ececec;
}
.ktown-directory .business-row {
grid-template-columns: 167px minmax(0, 1fr) auto;
gap: 16px;
min-height: 190px;
padding: 16px;
border-bottom: 1px solid #ececec;
cursor: pointer;
transition: background 0.18s ease;
}
.ktown-directory .business-row:hover {
background: #f5f9fb;
}
.ktown-directory .business-row:focus-visible {
outline: 2px solid #FF6F0F;
outline-offset: -2px;
}
.ktown-directory .business-row .thumb {
width: 167px;
height: 138px;
border-radius: 10px;
}.ktown-directory .business-main .category {
color: var(--color-text);
font-size: 13px;
}.ktown-directory .business-main h2 {
margin: 9px 0 10px;
color: #232429;
font-size: 18px;
}.ktown-directory .business-main p {
display: -webkit-box;
overflow: hidden;
color: #4b4b4b;
font-size: 14px;
line-height: 1.5;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.ktown-directory .business-meta {
margin-top: 14px;
color: #777;
font-size: 12px;
}
.ktown-directory .business-tags {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-top: 10px;
}.ktown-directory .business-tag {
padding: 0;
border: 0;
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}.ktown-directory .business-tag:hover,
.ktown-directory .business-tag:focus-visible {
color: var(--color-text);
text-decoration: underline;
outline: none;
}
.ktown-directory .business-tag:hover,
.ktown-directory .business-tag:focus-visible { color: var(--color-accent); }
.ktown-directory .business-actions {
display: flex;
align-items: center;
gap: 2px;
}.ktown-directory .business-save,
.ktown-directory .business-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-text);
}
.ktown-directory .business-save {
cursor: pointer;
}
.ktown-directory .business-save:hover,
.ktown-directory .business-save:focus-visible {
background: #FFF1E8;
outline: none;
}
.ktown-directory .business-save.is-saved svg {
fill: currentColor;
}
@media (max-width: 820px) {
.topbar {
z-index: 40;
min-height: 56px;
height: auto;
}
.topbar .shell {
width: min(calc(100% - 36px), 1024px);
}
.topbar-inner {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
min-height: 56px;
height: auto;
padding-top: 22px; /* 로고 영역 높이 +50% (44px→66px) */
padding-bottom: 6px;
}
.brand {
gap: 6px;
font-size: 16px;
}
.brand-mark {
width: 23px;
height: 23px;
border-radius: 6px;
}
/* 상단바: 로고+액션(row1) / 메뉴 고정 가로바(row2) */
.topbar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 0;
}
.topbar-actions-m {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}.tam-btn {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--color-primary);
text-decoration: none;
cursor: pointer;
}.tam-btn:hover,
.tam-btn:active {
background: var(--color-main-light);
color: var(--color-text);
}
.tam-btn:hover { color: var(--color-accent); }
.tam-btn i {
width: 20px;
height: 20px;
}
.mobile-menu-toggle {
display: none !important;
}
/* 메뉴 = 로고 아래 고정 가로 탭바 */
.gnb {
position: static;
order: 5;
display: flex;
width: 100%;
min-width: 0;
margin: 6px 0 0;
padding: 0;
border-top: 1px solid var(--color-border);
background: transparent;
box-shadow: none;
overflow: visible;
}.gnb :is(a,button) {
position: static;
flex: 1 1 0;
min-width: 0;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--color-muted);
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}.gnb :is(a,button).active {
color: var(--color-text);
border-bottom-color: var(--color-accent);
background: transparent;
}
button).active { color: var(--color-accent); }
.gnb :is(a,button).active::after {
display: none;
}
.gnb .gnb-login,
.gnb-login {
display: none !important; /* 로그인/마이페이지는 나v에서 제외(상단 액션바로 이동) */
}
.gnb .gnb-share {
display: none;
}
.utility-action {
display: none;
}
.utility {
display: none;
}.mobile-menu-toggle {
display: inline-grid;
width: 36px;
height: 36px;
place-items: center;
border: 0;
border-radius: 8px;
padding: 0;
background: transparent;
color: var(--color-primary);
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
background: var(--color-main-light);
outline: none;
}/* 모바일 상단 로그인 버튼 (햄버거 왼쪽에 항상 노출) */
.topbar-login-m {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 7px 12px;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.topbar-login-m i {
width: 15px;
height: 15px;
}
.topbar-login-m + .mobile-menu-toggle {
margin-left: 6px;
}
.ssg-carousel {
margin-top: 8px;
padding: 0 16px;
}
.ssg-rail.is-native-rolling .ssg-ad {
flex-basis: calc(100vw - 32px);
margin-right: 12px;
}
.ssg-ad {
height: auto;
aspect-ratio: 2 / 1; /* 모바일 히어로 배너 가로:세로 = 2:1 */
min-height: 0;
border-radius: 12px;
}
.ssg-ad-copy {
left: 24px;
max-width: 260px;
}
.ssg-ad h1 {
margin: 9px 0 7px;
font-size: 21px;
}
.ssg-ad p {
font-size: 12px;
}
.ssg-carousel-arrow {
display: none;
}
.ssg-dots {
bottom: 17px;
}
.ssg-shortcuts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch;
gap: 8px;
overflow-x: visible;
width: 100%;
margin: 24px 0 18px;
padding: 0 18px;
}
.ssg-shortcut .shortcut-icon {
width: 46px;
height: 46px;
border-radius: 16px;
}
.ssg-shortcut {
width: 100%;
min-width: 0;
gap: 7px;
font-size: 11px;
line-height: 1.2;
white-space: nowrap;
}
.ssg-section {
padding: 32px 0;
}
.ssg-section-head {
align-items: end;
margin-bottom: 12px;
}
.ssg-section-head h2 {
font-size: 18px;
}
.ssg-card-grid {
grid-template-columns: 1fr 1fr;
gap: 8px 7px;
}
.ssg-card {
gap: 9px;
border-radius: 12px;
padding: 7px 5px 9px;
}
.ssg-card h3 {
min-height: 38px;
font-size: 13px;
}
.ssg-card .ssg-detail {
font-size: 11px;
}
.ssg-card .ssg-offer {
font-size: 14px;
}
.latest-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.latest-column {
gap: 12px;
}
.latest-item {
grid-template-columns: 88px minmax(0, 1fr);
min-height: 88px;
gap: 10px;
}
.latest-thumb {
width: 88px;
height: 88px;
}
.latest-item.feature {
min-height: 104px;
padding: 8px;
}
.latest-item.feature .latest-thumb {
width: 88px;
height: 88px;
}
.latest-title {
font-size: 13px;
}
.latest-date {
font-size: 14px;
}
.expert-wide-section {
margin-top: 36px;
margin-bottom: -32px;
padding: 32px 0;
}
.expert-wide-card {
grid-template-columns: 1fr;
min-height: 0;
border-radius: 14px;
}
.expert-wide-image {
height: 164px;
margin: 16px 16px 0;
border-radius: 9px;
}
.expert-wide-copy {
min-height: 224px;
padding: 22px;
}
.expert-wide-copy h2 {
font-size: 21px;
}
.expert-wide-copy p {
margin-bottom: 18px;
font-size: 13px;
}
.ssg-ad-guide {
grid-template-columns: 1fr;
gap: 18px;
padding: 25px 21px;
border-radius: 12px;
}
.ssg-ad-guide h2 {
font-size: 18px;
}
.ssg-ad-guide .primary {
width: 100%;
}
.footer-inner {
padding: 42px 0 24px;
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 36px 24px;
}
.footer-main section:first-child {
grid-column: span 2;
}
.footer-phone {
font-size: 21px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin-top: 36px;
}
.footer-legal {
gap: 14px;
}
.ktown-directory .ktown-shell {
width: min(calc(100% - 32px), 1100px);
}
.ktown-directory.page {
padding-top: 64px;
}
.ktown-directory .directory-layout {
grid-template-columns: 1fr;
}
/* 모바일 디렉토리 필터 = 전문가 필터와 동일: 가로 스크롤 컬럼 + 체크박스 리스트 */
.ktown-directory .filter-panel {
display: flex;
gap: 18px;
overflow-x: auto;
overflow-y: visible;
max-width: 100%;
max-height: none;
margin-bottom: 14px;
padding: 0 0 10px;
}
.ktown-directory .ktown-breadcrumb {
display: none;
}
.ktown-directory .filter-top {
display: none;
}
.ktown-directory .selected-filter-list {
display: none;
}
.ktown-directory .filter-group {
flex: 0 0 168px;
margin: 0;
padding: 0;
border-bottom: 0;
}.ktown-directory .filter-group h3 {
display: block;
margin: 0 0 12px;
font-size: 15px;
font-weight: 900;
color: #111;
}
.ktown-directory .filter-group .filter-group-heading {
margin: 0 0 12px;
}
.ktown-directory .filter-group .filter-group-heading h3 {
margin: 0;
}.ktown-directory .filter-group .filter-option {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 30px;
margin: 11px 0 0;
padding: 0 0 0 25px;
border: 0;
border-radius: 0;
background: transparent;
color: #59616e;
font-size: 14px;
font-weight: 600;
text-align: left;
white-space: normal;
}
.ktown-directory .filter-option::before {
content: "";
display: block !important;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 1px solid #8d98a8;
border-radius: 3px;
background: #fff;
}.ktown-directory .filter-group .filter-option.selected {
color: var(--color-text);
background: transparent;
}
.ktown-directory .filter-group .filter-option.selected { color: var(--color-accent); }.ktown-directory .filter-panel .filter-option.selected::before {
content: "";
border-color: var(--color-accent);
background: var(--color-accent);
box-shadow: inset 0 0 0 3px #fff;
}
/* 카테고리는 항목이 많아 3열 그리드로 (세로로 너무 길지 않게) */
.ktown-directory .filter-group[data-filter-label="카테고리"] {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(94px, 1fr));
gap: 12px 12px;
align-content: start;
}
.ktown-directory .filter-group[data-filter-label="카테고리"] .filter-group-heading {
grid-column: 1 / -1;
margin: 0;
}
.ktown-directory .filter-group[data-filter-label="카테고리"] .filter-option {
margin: 0;
}
.ktown-directory .directory-search {
height: 48px;
margin-bottom: 22px;
padding-left: 18px;
}
.ktown-title-row {
align-items: flex-end;
margin-bottom: 20px;
}
.ktown-title-row h1 {
font-size: 25px;
}
.ktown-title-row p,
.ktown-saved {
display: none;
}
.ktown-list-title h2 {
font-size: 19px;
}
.ktown-directory .business-row {
grid-template-columns: 108px minmax(0, 1fr);
gap: 13px;
min-height: 146px;
padding: 14px 0;
}
.ktown-directory .business-row .thumb {
width: 108px;
height: 96px;
}
.ktown-directory .business-actions {
display: none;
}
.detail-gallery {
height: auto;
}
.gallery-stage {
height: 290px;
}
.gallery-thumbnails {
gap: 6px;
}
.detail-lines > div {
grid-template-columns: 72px minmax(0, 1fr);
}
.best-life-services {
margin-top: 48px;
padding-top: 32px;
}
.best-life-services h2 {
font-size: 20px;
}
.best-life-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.best-life-card {
padding-bottom: 12px;
}
.best-life-image {
height: 108px;
}
.best-life-card-copy {
padding: 10px 10px 0;
}
.best-life-card h3,
.best-life-card strong {
font-size: 14px;
}
.best-life-rating,
.best-life-contact,
.best-life-location {
font-size: 11px;
}
.best-life-tags {
display: none;
}
.share-sheet {
align-items: end;
padding: 12px;
}
.event-calendar-sheet {
align-items: end;
padding: 12px;
}
.global-search-sheet {
align-items: end;
padding: 12px;
}
.global-search-card {
width: 100%;
max-height: min(720px, calc(100vh - 24px));
border-radius: 16px 16px 10px 10px;
padding: 22px 16px 16px;
}
.global-search-card h2 {
font-size: 21px;
}
.global-search-input input {
min-height: 48px;
font-size: 15px;
}
.global-search-recommend-grid {
grid-template-columns: 1fr;
}
.global-search-ad {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
align-items: stretch;
}
.global-search-ad img {
height: 100%;
min-height: 104px;
}
.global-search-result {
grid-template-columns: 58px minmax(0, 1fr);
gap: 10px;
}
.global-search-result > i {
display: none;
}
.global-search-type {
min-height: 28px;
font-size: 11px;
}
.auth-sheet {
align-items: end;
padding: 12px;
}
.auth-card {
width: 100%;
max-height: min(720px, calc(100vh - 24px));
border-radius: 16px 16px 10px 10px;
padding: 34px 20px 24px;
}
.signup-card {
border-radius: 10px 10px 8px 8px;
padding: 28px 24px 28px;
}
.auth-card h2 {
font-size: 22px;
}
.signup-card h2 {
font-size: 25px;
}
.event-calendar-card {
width: 100%;
max-height: min(720px, calc(100vh - 24px));
border-radius: 14px 14px 10px 10px;
padding: 20px 16px 16px;
}
.event-calendar-card h2 {
font-size: 20px;
}
.event-calendar-month {
display: block;
}
.event-calendar-month span {
display: block;
}.event-calendar-month span + span {
margin-top: 4px;
color: var(--color-muted);
font-size: 13px;
}
.event-calendar-grid {
gap: 4px;
}
.event-calendar-day {
min-height: 62px;
padding: 6px 4px;
}
.event-calendar-chip {
padding: 3px 4px;
font-size: 10px;
}
.event-calendar-list button {
grid-template-columns: 1fr;
gap: 5px;
}
.share-card {
width: 100%;
border-radius: 14px 14px 10px 10px;
padding: 20px 16px 16px;
}
.share-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.share-toast {
right: 16px;
bottom: 16px;
left: 16px;
text-align: center;
}
}
@media (max-width: 360px) {
.brand > span:last-child {
display: none;
}
.gnb :is(a,button) {
padding: 8px 7px;
font-size: 13px;
}
}
/* Unified typography and color system across pages */
body,
button,
input,
select,
textarea {
font-family: var(--font-primary);
}body {
color: var(--color-text);
font-size: var(--fs-body);
line-height: 1.55;
}.page-title,
.ktown-title-row h1,
.event-title,
.pro-section h2,
.pro-trust-title h2,
.pro-faq-title {
color: var(--color-text);
font-size: var(--fs-page-title);
font-weight: 900;
letter-spacing: 0;
line-height: 1.28;
}.section-head h2,
.ssg-section-head h2,
.event-newsletter h2,
.event-detail-section h2,
.ktown-list-title h2,
.ssg-ad-guide h2 {
color: var(--color-text);
font-size: var(--fs-section-title);
font-weight: 900;
letter-spacing: 0;
line-height: 1.3;
}.event-lead,
.event-content,
.pro-section .pro-intro p,
.pro-trust-title p,
.consult p,
.ktown-title-row p,
.business-main p,
.ssg-card .ssg-detail,
.expert-product-card h2,
.expert-product-card p,
.expert-product-meta,
.pro-faq-answer {
color: var(--color-muted);
font-size: var(--fs-body);
letter-spacing: 0;
}.ssg-card h3,
.event-card h3,
.expert-product-card h2,
.ktown-directory .business-main h2,
.pro-team-card strong,
.pro-lead-copy h3 {
color: var(--color-text);
font-size: var(--fs-card-title);
font-weight: 850;
line-height: 1.42;
}
.eyebrow,
.badge,
.ssg-tag,
.event-category-line span,
.event-filter,
.expert-filter-reset,
.expert-filter-subtitle,
.expert-select,
.ktown-directory .filter-option,
.ktown-directory .sort,
.business-tag,
.pro-chip-list span,
.pro-faq-question {
font-size: var(--fs-base);
letter-spacing: 0;
}.brand-mark,
.primary,
.utility .login,
.event-subscribe,
.pro-more,
.consult-form .primary,
.ktown-directory .business-save:hover,
.ktown-directory .business-save:focus-visible {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
}.event-filter.active,
.event-tabs button.active,
.event-summary-row small,
.ktown-directory .directory-search button {
border-color: var(--color-accent);
background: var(--color-accent);
color: #fff;
}.gnb :is(a,button).active,
.gnb :is(a,button):hover,
.text-link,
.ssg-section-head h2 b,
.ssg-card .ssg-offer,
.event-card .price,
.event-tabs button.active,
.event-detail-section .section-en,
.ktown-directory .filter-top strong,
.ktown-directory .reset,
.ktown-directory .result-bar strong b,
.ktown-directory .business-main .category,
.ktown-directory .business-tag,
.expert-filter-reset,
.pro-section h2 .blue,
.pro-trust-title .blue,
.pro-chip-list span,
.pro-faq-title span,
.pro-faq-number,
.pro-floating-tools button {
color: var(--color-text);
}
button).active,
button):hover,
.event-tabs button.active { color: var(--color-accent); }.event-filter.active,
.event-tabs button.active,
.ktown-directory .directory-search button,
.consult-form .primary,
.event-subscribe {
color: #fff;
}.icon-button:focus-visible,
.event-card:focus-visible,
.expert-product-card:focus-visible,
.ktown-directory .business-row:focus-visible {
outline-color: var(--color-main);
}.event-filter,
.expert-select,
.directory-search,
.ktown-directory .directory-search,
.event-summary,
.event-tabs,
.event-detail-section,
.consult-form input,
.consult-form select,
.auth-card,
.auth-field input,
.share-card,
.share-url-box {
border-color: var(--color-sub-strong);
}.ktown-directory .filter-option.selected {
border-color: transparent;
background: transparent;
color: var(--color-text);
}
.ktown-directory .filter-option.selected { color: var(--color-accent); }.ktown-directory .filter-option.selected:hover {
border-color: transparent;
}.ktown-directory .filter-option.selected::before {
content: "✓";
display: grid;
place-items: center;
border-color: var(--color-main);
background: #fff;
color: var(--color-text);
font-size: 13px;
font-weight: 950;
line-height: 1;
box-shadow: none;
}
.ktown-directory .filter-option.selected::before { color: var(--color-accent); }
.event-newsletter,
.pro-section.gray,
.pro-lead-card,
.pro-team-card,
.consult,
.ktown-directory .business-row:hover,
.ssg-shortcut:hover,
.utility-action:hover {
background: var(--color-sub);
}
.badge.verify,
.ssg-card .ssg-tag,
.pro-chip-list span,
.ktown-directory .business-tag {
background: var(--color-main-light);
}.badge.hot,
.badge.free,
.ssg-card .ssg-tag.coral {
background: var(--color-main-light);
color: var(--color-text);
}
body,
.page,
#home,
#events,
#experts,
#expert-detail,
.ktown-directory {
background: var(--color-background);
}
.topbar,
.ssg-card,
.event-card,
.event-detail-main,
.event-summary,
.event-tabs,
.event-location-box,
.ktown-directory .business-row,
.consult-form input,
.consult-form select,
.auth-card,
.auth-field input,
.share-card {
background: var(--color-surface);
}.badge.verify,
.ssg-card .ssg-tag {
background: var(--color-main-light);
color: var(--color-text);
}.badge.free {
background: #f0fdf4;
color: var(--color-success);
}.badge.hot {
background: #fffbeb;
color: var(--color-warning);
}.ssg-card .ssg-tag.coral {
background: #fef2f2;
color: var(--color-error);
}
.event-hero-slide,
.event-hero-slide:nth-child(2),
.event-hero-slide:nth-child(3) {
background:
radial-gradient(
circle at 80% 28%,
rgba(255, 255, 255, 0.2),
transparent 34%
),
linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-main-dark) 54%,
var(--color-accent) 100%
);
}.expert-main-slide,
.expert-main-slide:nth-child(2),
.expert-main-slide:nth-child(3),
.expert-side-banner {
background:
radial-gradient(
circle at 74% 30%,
rgba(255, 255, 255, 0.18),
transparent 32%
),
linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-main-dark) 58%,
var(--color-accent) 100%
);
color: #fff;
}.expert-banner-stats,
.expert-side-banner p,
.expert-side-banner h2,
.expert-side-banner em {
color: #fff;
}
.ssg-ad-guide,
.expert-wide-card {
background: var(--color-sub);
}
.expert-wide-dot.active,
.ssg-dots .swiper-pagination-bullet-active,
.ssg-dot.active {
background: var(--color-main);
}
.mobile-consult {
background: var(--color-primary);
}.site-footer {
border-top-color: var(--color-sub-strong);
}
@media (max-width: 820px) {
body {
font-size: var(--fs-base);
}
.page-title,
.ktown-title-row h1,
.event-title,
.pro-section h2,
.pro-trust-title h2,
.pro-faq-title {
font-size: 24px;
line-height: 1.34;
}
.section-head h2,
.ssg-section-head h2,
.event-newsletter h2,
.event-detail-section h2,
.ktown-list-title h2,
.ssg-ad-guide h2 {
font-size: 21px;
}
.event-lead,
.event-content,
.pro-section .pro-intro p,
.pro-trust-title p,
.consult p,
.ktown-title-row p,
.business-main p,
.ssg-card .ssg-detail,
.expert-product-card h2,
.expert-product-card p,
.expert-product-meta,
.pro-faq-answer {
font-size: var(--fs-base);
}
.ssg-card h3,
.event-card h3,
.expert-product-card h2,
.ktown-directory .business-main h2,
.pro-team-card strong,
.pro-lead-copy h3 {
font-size: 15px;
}
}
/* Final typography normalization */
html,
body,
button,
input,
select,
textarea {
font-family: var(--font-primary);
letter-spacing: 0;
}body {
color: var(--color-text);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure,
figcaption {
margin-top: 0;
}.event-title,
.page-title,
.ktown-title-row h1 {
color: var(--color-text);
font-size: clamp(32px, 4vw, var(--fs-hero-title));
font-weight: var(--fw-black);
line-height: var(--lh-tight);
}.event-hero h1,
.event-hero p,
.event-hero .event-date,
.event-hero .event-kind,
.expert-banner-stats,
.expert-side-banner h2,
.expert-side-banner p,
.expert-side-banner em {
color: #fff;
}.section-head h2,
.ssg-section-head h2,
.eventus-section-head h2,
.event-newsletter h2,
.event-detail-section h2,
.ktown-list-title h2,
.ssg-ad-guide h2,
.pro-section h2,
.pro-trust-title h2,
.pro-faq-title,
.best-life-services h2 {
color: var(--color-text);
font-size: var(--fs-section-title);
font-weight: var(--fw-extrabold);
line-height: var(--lh-title);
}.ssg-card h3,
.event-card h3,
.expert-product-card h2,
.ktown-directory .business-main h2,
.business-main h2,
.pro-lead-copy h3,
.pro-team-card strong,
.portfolio figcaption b,
.process h3,
.event-location-box h3,
.best-life-card h3 {
color: var(--color-text);
font-size: var(--fs-card-title);
font-weight: var(--fw-bold);
line-height: 1.42;
}p,
.event-card p,
.event-lead,
.event-content,
.event-content p,
.ktown-title-row p,
.business-main p,
.ssg-card .ssg-detail,
.expert-product-card p,
.pro-section .pro-intro p,
.pro-trust-title p,
.pro-lead-copy p,
.pro-team-card p,
.portfolio figcaption p,
.process p,
.consult p,
.pro-faq-answer,
.footer-copy {
color: var(--color-muted);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
}.event-hero h1,
.event-hero p,
.event-hero .event-date,
.event-hero .event-kind,
.expert-banner-stats,
.expert-side-banner h2,
.expert-side-banner p,
.expert-side-banner em {
color: #fff;
}
.eyebrow,
.badge,
.ssg-tag,
.ssg-card .ssg-offer,
.event-category-line span,
.event-filter,
.event-host-line,
.event-summary-row dt,
.event-summary-row small,
.latest-type,
.latest-date,
.expert-filter-reset,
.expert-filter-subtitle,
.expert-select,
.expert-product-meta,
.expert-sidebar label,
.ktown-breadcrumb,
.ktown-directory .filter-option,
.ktown-directory .sort,
.selected-filter,
.business-meta,
.business-tag,
.business-tags,
.best-life-rating,
.best-life-contact,
.best-life-location,
.pro-chip-list span,
.pro-faq-question,
.pro-faq-number,
.footer-menu,
.footer-legal {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
line-height: 1.45;
}.eyebrow,
.event-host-line,
.event-summary-row dt,
.expert-product-meta,
.business-meta,
.best-life-rating,
.best-life-contact,
.best-life-location,
.footer-menu,
.footer-legal {
color: var(--color-muted);
}.text-link,
.gnb :is(a,button).active,
.gnb :is(a,button):hover,
.ssg-section-head h2 b,
.event-card .price,
.event-detail-section .section-en,
.ktown-directory .filter-top strong,
.ktown-directory .reset,
.ktown-directory .result-bar strong b,
.ktown-directory .business-main .category,
.ktown-directory .business-tag,
.expert-filter-reset,
.pro-section h2 .blue,
.pro-trust-title .blue,
.pro-chip-list span,
.pro-faq-title span,
.pro-faq-number {
color: var(--color-text);
}
button).active,
button):hover { color: var(--color-accent); }
button,
.primary,
.outline,
.utility-action,
.utility .login,
.gnb :is(a,button),
.event-filter,
.event-subscribe,
.consult-form .primary,
.share-action,
.share-url-box button,
.mobile-consult {
font-size: var(--fs-base);
font-weight: var(--fw-bold);
line-height: 1.2;
}input,
select,
textarea,
.directory-search input,
.ktown-directory .directory-search input,
.consult-form input,
.consult-form select {
color: var(--color-text);
font-size: var(--fs-base);
font-weight: var(--fw-medium);
line-height: 1.35;
}input::placeholder,
textarea::placeholder {
color: var(--color-muted);
}.ktown-directory .filter-option,
.ktown-directory .filter-option.selected,
.ktown-directory .filter-option:hover,
.ktown-directory .filter-option.selected:hover {
width: fit-content;
max-width: 100%;
border-color: transparent;
background: transparent;
box-shadow: none;
}
@media (max-width: 820px) {
body {
font-size: var(--fs-base);
line-height: 1.58;
}
.event-title,
.page-title,
.ktown-title-row h1 {
font-size: clamp(24px, 7vw, 30px);
line-height: 1.28;
}
.section-head h2,
.ssg-section-head h2,
.eventus-section-head h2,
.event-newsletter h2,
.event-detail-section h2,
.ktown-list-title h2,
.ssg-ad-guide h2,
.pro-section h2,
.pro-trust-title h2,
.pro-faq-title,
.best-life-services h2 {
font-size: 21px;
line-height: 1.35;
}
.ssg-card h3,
.event-card h3,
.expert-product-card h2,
.ktown-directory .business-main h2,
.business-main h2,
.pro-lead-copy h3,
.pro-team-card strong,
.portfolio figcaption b,
.process h3,
.event-location-box h3,
.best-life-card h3 {
font-size: 15px;
}
p,
.event-card p,
.event-lead,
.event-content,
.event-content p,
.ktown-title-row p,
.business-main p,
.ssg-card .ssg-detail,
.expert-product-card p,
.pro-section .pro-intro p,
.pro-trust-title p,
.pro-lead-copy p,
.pro-team-card p,
.portfolio figcaption p,
.process p,
.consult p,
.pro-faq-answer,
.footer-copy {
font-size: var(--fs-base);
line-height: 1.56;
}
.eyebrow,
.badge,
.ssg-tag,
.ssg-card .ssg-offer,
.event-category-line span,
.event-filter,
.event-host-line,
.event-summary-row dt,
.event-summary-row small,
.latest-type,
.latest-date,
.expert-filter-reset,
.expert-filter-subtitle,
.expert-select,
.expert-product-meta,
.expert-sidebar label,
.ktown-breadcrumb,
.ktown-directory .filter-option,
.ktown-directory .sort,
.selected-filter,
.business-meta,
.business-tag,
.business-tags,
.best-life-rating,
.best-life-contact,
.best-life-location,
.pro-chip-list span,
.pro-faq-question,
.pro-faq-number,
.footer-menu,
.footer-legal,
button,
.primary,
.outline,
.utility-action,
.utility .login,
.gnb :is(a,button),
.event-subscribe,
.consult-form .primary,
.share-action,
.share-url-box button {
font-size: var(--fs-sm);
}
.mobile-consult {
font-size: 16px;
}
}
@media (max-width: 360px) {
body {
font-size: var(--fs-sm);
}
.gnb :is(a,button),
.ssg-shortcut,
.event-filter,
.ktown-directory .filter-option {
font-size: var(--fs-xs);
}
.weekday-picker {
grid-template-columns: repeat(7, 24px);
gap: 3px;
}
.weekday-button {
width: 24px;
height: 24px;
font-size: 11px;
}
}
/* ── 로그인/회원가입 페이지 (리디자인) ── */
.auth-page{max-width:420px;margin:48px auto;padding:0 20px}
.auth-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px;padding:34px 30px;box-shadow:0 16px 44px rgba(20,33,61,.08)}
.auth-brand{display:flex;justify-content:center;margin-bottom:6px}.auth-brand span.w {display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:22px;color:var(--color-primary)}.auth-brand .mk {display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--color-primary);color:#fff;font-weight:900}.auth-h {text-align:center;font-size:21px;font-weight:800;color:var(--color-text);margin:14px 0 4px}.auth-sub {text-align:center;font-size:14px;color:var(--color-muted);margin-bottom:22px}.auth-err {background:#fdecea;color:var(--color-error);border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:700;margin-bottom:16px;line-height:1.5}.auth-kakao {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border:0;border-radius:12px;background:#fee500;color:#191600;font-size:15px;font-weight:800;text-decoration:none;margin-bottom:14px}.auth-div {display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--color-muted);font-size:12.5px;font-weight:700}
.auth-div::before,.auth-div::after{content:"";height:1px;flex:1;background:var(--color-border)}
.auth-f{display:grid;gap:14px}.auth-f label {display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--color-text)}
.auth-f input{width:100%;border:1px solid var(--color-border);border-radius:11px;padding:13px 14px;font-size:14.5px;font-family:inherit;background:#fff}.auth-f input:focus {outline:none;border-color:var(--color-accent)}.auth-f .hint {font-size:12px;font-weight:600;color:var(--color-muted);margin-top:-4px}.auth-submit {width:100%;min-height:50px;border:0;border-radius:12px;background:var(--color-accent);color:#fff;font-size:15px;font-weight:800;cursor:pointer;margin-top:4px}
.auth-submit:hover{background:var(--color-main-dark)}.auth-alt {text-align:center;font-size:14px;color:var(--color-muted);margin-top:20px}.auth-alt a {color: var(--color-text);font-weight:800;text-decoration:none}
/* =====================================================================
마이페이지 (리디자인) — 메인 + 서브페이지 공통
===================================================================== */
.mp-page { padding: 26px 16px 60px; }
.mp-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; word-break: keep-all; }
.mp-wrap--wide { max-width: 720px; }
/* 프로필 카드 */
.mp-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.mp-cover { background: var(--color-primary); padding: 18px 22px 52px; }.mp-cover p { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; color: var(--color-text); }
.mp-profile { padding: 0 22px 22px; margin-top: -38px; }
.mp-profile-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }.mp-avatar { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--color-surface); background: var(--color-accent); color: #fff; font-size: 28px; font-weight: 900; box-shadow: 0 1px 3px rgba(16,24,40,0.12); }.mp-edit { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--color-muted); text-decoration: none; }.mp-edit:hover { border-color: var(--color-accent); color: var(--color-text); }
.mp-edit:hover { color: var(--color-accent); }
.mp-edit i { width: 13px; height: 13px; }
.mp-id { margin-top: 12px; }
.mp-id-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.mp-id-line h1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: var(--color-primary); }.mp-role { border-radius: 999px; background: var(--color-main-light); padding: 4px 10px; font-size: 12px; font-weight: 800; color: var(--color-text); }.mp-email { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--color-muted); }
.mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-sub); }
.mp-stats a { padding: 14px 6px; text-align: center; text-decoration: none; transition: background 0.15s ease; }
.mp-stats a + a { border-left: 1px solid var(--color-border); }
.mp-stats a:hover { background: var(--color-surface); }.mp-stats b { display: block; font-size: 20px; font-weight: 900; color: var(--color-primary); }.mp-stats span { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--color-muted); }/* 그룹/리스트/행 */
.mp-group-title { margin: 0 8px 8px; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.mp-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.mp-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; text-decoration: none; transition: background 0.15s ease; }
.mp-row + .mp-row { border-top: 1px solid var(--color-border); }
.mp-row:hover { background: var(--color-sub); }.mp-row-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--color-main-light); color: var(--color-text); }
.mp-row-icon i { width: 18px; height: 18px; }.mp-row-icon--soft { background: var(--color-sub); color: var(--color-muted); }.mp-row-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--color-primary); }.mp-row-meta { flex: 0 0 auto; border-radius: 999px; background: var(--color-sub); padding: 4px 10px; font-size: 12px; font-weight: 900; color: var(--color-muted); }.mp-row-time { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--color-muted); }.mp-row-arrow { flex: 0 0 auto; color: var(--color-muted); display: inline-flex; }
.mp-row-arrow i { width: 16px; height: 16px; }.mp-row--danger .mp-row-icon { background: #fee2e2; color: var(--color-error); }.mp-row--danger .mp-row-label { color: var(--color-error); }
/* 서브페이지 헤더/탭 */
.mp-head { display: flex; align-items: center; gap: 12px; }.mp-back { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); }.mp-back:hover { border-color: var(--color-accent); color: var(--color-text); }
.mp-back:hover { color: var(--color-accent); }
.mp-back i { width: 18px; height: 18px; }.mp-head h1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: var(--color-primary); }.mp-eyebrow { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text); }
.mp-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }.mp-tab { flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--color-muted); text-decoration: none; white-space: nowrap; }.mp-tab:hover { color: var(--color-text); }
.mp-tab:hover { color: var(--color-accent); }.mp-tab.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* 알림/폼 */
.mp-notice { border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; }.mp-notice--ok { background: #dcfce7; color: var(--color-success); }.mp-notice--err { background: #fee2e2; color: var(--color-error); }
.mp-form-card { border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); padding: 18px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }.mp-form-card h2 { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--color-primary); }
.mp-field { margin-bottom: 12px; }.mp-field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--color-muted); }.mp-input { width: 100%; border: 1px solid var(--color-border); border-radius: 12px; padding: 11px 14px; font-size: 14px; color: var(--color-text); background: var(--color-surface); font-family: inherit; }.mp-input:focus { outline: none; border-color: var(--color-accent); }.mp-input:disabled { background: var(--color-sub); color: var(--color-muted); }.mp-submit { width: 100%; border: 0; border-radius: 999px; padding: 12px; font-size: 14px; font-weight: 700; color: #fff; background: var(--color-accent); cursor: pointer; }
.mp-submit:hover { background: var(--color-main-dark); }
.mp-submit--navy { background: var(--color-primary); }
.mp-submit--navy:hover { background: #333333; }
/* 리스트 아이템(글/신청) + 배지 + 빈 상태 */
.mp-item { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; transition: background 0.15s ease; }
.mp-item + .mp-item { border-top: 1px solid var(--color-border); }
.mp-item:hover { background: var(--color-sub); }
.mp-item-main { min-width: 0; flex: 1; }.mp-item-title { margin: 6px 0 0; font-weight: 700; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mp-item-sub { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--color-muted); }.mp-item-right { flex: 0 0 auto; text-align: right; font-size: 12px; font-weight: 700; color: var(--color-muted); }
.mp-tagrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-badge { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }.mp-badge--soft { background: var(--color-sub); color: var(--color-muted); }.mp-badge--wait { background: #fef3c7; color: var(--color-warning); }.mp-badge--ok { background: #dcfce7; color: var(--color-success); }.mp-badge--err { background: #fee2e2; color: var(--color-error); }.mp-empty { border: 1px dashed var(--color-border); border-radius: 16px; background: var(--color-surface); padding: 40px 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--color-muted); }
/* =====================================================================
디렉토리 상단 가로 필터바 (event-us 스타일: 드롭다운 + 토글)
— 파일 끝에 두어 기존 사이드바/모바일 필터 규칙을 덮어씀
===================================================================== */
.directory-single { width: 100%; }
.ktown-directory .dir-filterbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 16px 0 6px;
}
.ktown-directory .dir-dd { position: relative; }.ktown-directory .dir-dd-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface);
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.ktown-directory .dir-dd-btn i { width: 16px; height: 16px; transition: transform 0.15s ease; }.ktown-directory .dir-dd.open .dir-dd-btn { border-color: var(--color-accent); color: var(--color-text); }
.ktown-directory .dir-dd.open .dir-dd-btn { color: var(--color-accent); }
.ktown-directory .dir-dd.open .dir-dd-btn i { transform: rotate(180deg); }.ktown-directory .dir-dd.has-selected .dir-dd-btn {
border-color: var(--color-accent);
color: var(--color-text);
background: var(--color-main-light);
}
.ktown-directory .dir-dd.has-selected .dir-dd-btn { color: var(--color-accent); }
.ktown-directory .dir-dd-menu.filter-group {
position: absolute;
z-index: 30;
top: calc(100% + 6px);
left: 0;
display: none;
flex: none;
min-width: 250px;
max-width: 92vw;
margin: 0;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface);
box-shadow: 0 16px 34px rgba(20, 33, 61, 0.16);
grid-template-columns: none;
border-bottom: 1px solid var(--color-border);
}
.ktown-directory .dir-dd.open .dir-dd-menu.filter-group { display: block; }.ktown-directory .dir-dd-menu h3 { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--color-muted); }
.ktown-directory .dir-dd-menu .filter-group-heading { grid-column: auto; margin: 0 0 10px; }
.ktown-directory .dir-dd-grid {
display: grid;
grid-template-columns: repeat(2, minmax(118px, 1fr));
gap: 9px 16px;
max-height: 320px;
overflow-y: auto;
}/* 드롭다운 내 옵션 = 체크박스 행 */
.ktown-directory .dir-dd-menu .filter-option {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 30px;
margin: 0;
padding: 0 0 0 24px;
border: 0;
border-radius: 0;
background: transparent;
color: #59616e;
font-size: 14px;
font-weight: 600;
text-align: left;
white-space: normal;
}
.ktown-directory .dir-dd-menu .filter-option::before {
content: "";
display: block !important;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 1px solid #8d98a8;
border-radius: 4px;
background: #fff;
box-shadow: none;
}.ktown-directory .dir-dd-menu .filter-option.selected { color: var(--color-text); background: transparent; }
.ktown-directory .dir-dd-menu .filter-option.selected { color: var(--color-accent); }.ktown-directory .dir-dd-menu .filter-option.selected::before {
border-color: var(--color-accent);
background: var(--color-accent);
box-shadow: inset 0 0 0 3px #fff;
}
/* 추가조건 = 인라인 토글 칩 (드롭다운 없이 바에 바로) */
.ktown-directory .dir-inline {
display: inline-flex;
flex: none;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}.ktown-directory .dir-inline .filter-option {
position: static;
display: inline-flex;
align-items: center;
width: auto;
min-height: 40px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface);
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.ktown-directory .dir-inline .filter-option::before { display: none !important; }.ktown-directory .dir-inline .filter-option.selected {
border-color: var(--color-accent);
background: var(--color-main-light);
color: var(--color-text);
}
.ktown-directory .dir-inline .filter-option.selected { color: var(--color-accent); }.ktown-directory .dir-reset {
margin-left: auto;
border: 0;
background: transparent;
color: var(--color-muted);
font-size: 14px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}.ktown-directory .dir-reset:hover { color: var(--color-text); }
.ktown-directory .dir-reset:hover { color: var(--color-accent); }
.ktown-directory .filter-top { display: none; }
@media (max-width: 820px) {
/* 필터바 한 줄 유지: 가로 스크롤 */
.ktown-directory .dir-filterbar {
flex-wrap: nowrap;
gap: 7px;
overflow-x: auto;
padding-bottom: 2px;
}
.ktown-directory .dir-dd,
.ktown-directory .dir-inline,
.ktown-directory .dir-inline .filter-option,
.ktown-directory .dir-dd-btn,
.ktown-directory .dir-reset {
flex: 0 0 auto;
}
.ktown-directory .dir-reset { margin-left: 0; white-space: nowrap; }
/* 드롭다운: 바가 가로 스크롤(overflow)이라 fixed 로 띄워 안 잘리게 (top 은 JS) */
.ktown-directory .dir-dd.open .dir-dd-menu.filter-group {
position: fixed;
left: 8px;
right: 8px;
width: auto;
min-width: 0;
max-width: none;
}
.ktown-directory .dir-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── 커스텀 공유 팝오버 (PC) ── */
.vb-share-pop {
position: fixed;
z-index: 10000;
width: 210px;
background: #fff;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(20, 33, 61, 0.18);
padding: 8px;
animation: vbSharePop 0.14s ease-out;
}
@keyframes vbSharePop {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}.vb-share-pop-title {
margin: 4px 8px 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-sub, #868B94);
}.vb-share-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
background: transparent;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: var(--color-primary, #191919);
cursor: pointer;
text-align: left;
}
.vb-share-item:hover { background: var(--color-surface, #f5f7fb); }
.vb-share-ic {
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
}.sh-kakao .vb-share-ic { background-color: #fee500; background-image: url("data:image/svg+xml;utf8,"); }.sh-fb .vb-share-ic { background-color: #1877f2; background-image: url("data:image/svg+xml;utf8,"); }.sh-x .vb-share-ic { background-color: #000; background-image: url("data:image/svg+xml;utf8,"); }.sh-line .vb-share-ic { background-color: #06c755; background-image: url("data:image/svg+xml;utf8,"); }.sh-copy .vb-share-ic { background-color: var(--color-primary, #191919); background-image: url("data:image/svg+xml;utf8,"); }/* ── 새 브랜드 로고 (사각 프레임 + 블루 포인트) ── */
.brand-logo { color: inherit; }
.brand-word { font-weight: 700; letter-spacing: 0.12em; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; }
.footer-brand .brand-word { letter-spacing: 0.1em; }/* 공유 아이콘 — Zalo / WeChat */
.sh-zalo .vb-share-ic { background-color: #0068ff; background-image: url("data:image/svg+xml;utf8,"); }.sh-wechat .vb-share-ic { background-color: #09b83e; background-image: url("data:image/svg+xml;utf8,"); }
/* PC 디렉토리 카테고리 드롭다운 — 항목이 2줄로 접히지 않도록(내용 너비 컬럼 + 줄바꿈 방지) */
@media (min-width: 821px) {
.ktown-directory .dir-dd-grid { grid-template-columns: repeat(2, max-content); }
.ktown-directory .dir-dd-menu .filter-option { white-space: nowrap; }
}
/* ── 배지 색 통일 — 중립 회색(카테고리/타입 배지 전부 동일) ── */
.ssg-card .ssg-tag,
.ssg-card .ssg-tag.coral,
.latest-type,
.latest-type.coral,
.event-category-line span,
.expert-product-meta span {
background: #F3F4F5 !important;
color: #555555 !important;
}
/* ── 이벤트 상세 탭 — 통짜 오렌지 블록 대신 밑줄 강조(오렌지 절제) ── */
.event-tabs button.active {
background: none !important;
color: var(--color-text) !important;
box-shadow: inset 0 -3px 0 var(--color-accent);
}
/* ── 이벤트 신청/문의 모달 + 플래시 ── */
.ev-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.45); }
.ev-modal[hidden] { display: none; }
.ev-modal-card { position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 26px 24px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); max-height: 90vh; overflow-y: auto; }
.ev-modal-card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--color-text); }
.ev-modal-sub { margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--color-muted); }
.ev-modal-card form { display: flex; flex-direction: column; gap: 12px; }
.ev-modal-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.ev-modal-card label span { color: var(--color-accent); }
.ev-modal-card input, .ev-modal-card textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: inherit; color: var(--color-text); }
.ev-modal-card input:focus, .ev-modal-card textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: transparent; }
.ev-modal-card textarea { resize: vertical; }
.ev-modal-card .primary { margin-top: 6px; border: 0; border-radius: 10px; background: var(--color-accent); color: #fff; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; }
.ev-modal-card .primary:hover { background: var(--color-main-dark); }
.ev-modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--color-muted); cursor: pointer; }
.ev-flash { margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.ev-flash.ok { background: #e9f7ef; color: #1c7a43; border: 1px solid #b7e4c7; }
.ev-flash.err { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
/* 이벤트 캘린더 — 주 이동 네비게이션 */
.event-calendar-month { display: flex; align-items: center; gap: 8px; }
.event-calendar-month [data-cal-range] { margin-left: auto; }
.cal-nav { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; font-size: 17px; line-height: 1; color: var(--color-text); cursor: pointer; }
.cal-nav:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
/* ── 모든 CTA 버튼을 로그인 버튼과 동일한 다크 컬러로 통일 ── */
.primary,
.event-subscribe,
.pro-more,
.ktown-directory .directory-search button,
.auth-submit,
.mp-submit,
.topbar-login-m,
.utility .login {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: #fff !important;
}
.primary:hover,
.event-subscribe:hover,
.pro-more:hover,
.ktown-directory .directory-search button:hover,
.auth-submit:hover,
.mp-submit:hover,
.topbar-login-m:hover,
.utility .login:hover {
background: #333333 !important;
border-color: #333333 !important;
color: #fff !important;
}