@charset "UTF-8";
/* 동적 숨김은 로고의 inline-flex 및 메뉴의 block 유틸리티보다 우선한다. */
header.header .is-hidden, .mobile-menu .is-hidden, .mobile-menu.is-hidden { display: none; }
/* 기본 배치·폰트·간격은 Naknes UI. 사이트 고유 상태와 효과만 보완한다. */
:where(header.header, .mobile-menu, .page-content, footer.footer, .header-overlay) { --layout-ink: var(--ui-color-base); --layout-muted: var(--ui-color-muted); --layout-white: var(--ui-white); --layout-header-height: 65px; --layout-radius: 32px; --layout-fast: 200ms; --layout-motion: 300ms; --layout-small: 13px; --layout-text-xs: var(--ui-text-sm); --layout-text-sm: var(--ui-font-size); --layout-text-md: 18px; --layout-text-lg: 20px; --layout-icon-size: 24px; --layout-secondary: #404040; --layout-subtle: #525252; }
header.header { bottom: auto; z-index: 100; height: var(--layout-header-height); transition: transform var(--layout-motion) cubic-bezier(0.42, 0, 0.58, 1); }
header.header .surface { bottom: auto; z-index: 5; height: var(--layout-header-height); margin-inline: auto; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(20px); transition: opacity ease-out; }
header.header .surface.is-solid { background: var(--layout-white); backdrop-filter: none; }
header.header .surface.is-faded { opacity: 0; transition-duration: 350ms; }
header.header .content { z-index: 20; width: 90%; max-width: 1600px; margin-inline: auto; }
header.header .logo { letter-spacing: 0.02em; }
header.header .wordmark { font-size: 18px; line-height: inherit; letter-spacing: inherit; color: inherit; }
header.header [data-header-logo="light"] { color: var(--layout-white); }
header.header .logo-dot { color: rgb(237, 0, 59); }
header.header .logo-image { height: 28px; width: auto; object-fit: contain; transform: translateY(-4px); }
header.header .menu-link { height: var(--layout-header-height); font-size: 15px; transition: opacity 150ms; }
header.header .menu-link:hover { font-weight: 500; opacity: 0.6; }
header.header .account-form { display: contents; }
header.header .menu-toggle { transition: transform 150ms; }
header.header .menu-toggle:active { transform: scale(0.95); }
header.header .toggle-line { background: var(--layout-ink); transition: transform var(--layout-fast), background-color var(--layout-fast); }
header.header [data-header-line="first"] { transform: translateY(-3px); }
header.header [data-header-line="second"] { transform: translateY(3px); }
header.header [aria-expanded="true"] [data-header-line="first"] { transform: rotate(45deg); }
header.header [aria-expanded="true"] [data-header-line="second"] { transform: rotate(-45deg); }
header.header.is-transparent [data-header-theme], header.header.is-transparent [data-header-divider], header.header.is-transparent .account-link { color: var(--layout-white); }
header.header.is-transparent .toggle-line { background: var(--layout-white); }
header.header .mega-menu { position: absolute; inset: var(--layout-header-height) 0 auto; z-index: 10; display: none; min-height: 320px; margin-inline: auto; padding-block: 32px; border-top: 1px solid rgba(0, 0, 0, 0.04); background: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--layout-motion) ease-out; }
header.header .mega-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
header.header .mega-grid { grid-template-columns: minmax(180px, 0.75fr) minmax(0px, 2fr); }
header.header .menu-column { transform: translateY(16px); opacity: 0; transition: transform var(--layout-motion), opacity var(--layout-motion); }
header.header .is-open .menu-column { transform: translateY(0px); opacity: 1; }
header.header .menu-intro { min-height: 240px; border-right: 1px solid rgba(0, 0, 0, 0.06); }
header.header .menu-caption { font-size: var(--layout-small); font-weight: 500; letter-spacing: 0.08em; color: var(--layout-secondary); }
header.header .menu-rule { display: block; height: 3px; width: 32px; border-radius: 9999px; background: rgba(0, 0, 0, 0.7); }
header.header .menu-title { font-size: 30px; font-weight: 500; line-height: 1.25; letter-spacing: -0.05em; color: rgb(23, 23, 23); }
header.header .menu-description { max-width: 240px; font-size: 15px; line-height: 1.7; color: var(--layout-secondary); word-break: keep-all; }
header.header .menu-links { min-width: 0px; transition-delay: 75ms; }
header.header .menu-heading { font-size: var(--layout-small); font-weight: 500; letter-spacing: -0.02em; color: rgb(23, 23, 23); }
header.header .menu-count { font-size: var(--layout-small); font-variant-numeric: tabular-nums; color: var(--layout-subtle); }
header.header .submenu-link { min-height: 82px; padding: 20px 16px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 12px; background: transparent; color: rgb(23, 23, 23); transition: color var(--layout-fast), background-color var(--layout-fast), transform var(--layout-fast); }
header.header .submenu-link:hover { background: rgba(255, 255, 255, 0.6); color: rgb(0, 0, 0); }
header.header .submenu-link:active { transform: scale(0.99); }
header.header .submenu-link:focus-visible { outline: rgba(0, 0, 0, 0.7) solid 2px; outline-offset: 2px; }
header.header .menu-number { flex-shrink: 0; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--layout-subtle); }
header.header .menu-label { font-size: 17px; font-weight: 400; line-height: 1.375; letter-spacing: -0.03em; word-break: keep-all; }
header.header .menu-arrow { height: 32px; width: 32px; flex-shrink: 0; border-radius: 9999px; font-size: var(--layout-text-md); background: transparent; color: rgba(0, 0, 0, 0.3); transition: transform var(--layout-fast), color var(--layout-fast), background-color var(--layout-fast); }
header.header .submenu-link:hover .menu-arrow { transform: translate(2px, -2px); background: rgba(0, 0, 0, 0.04); color: rgb(0, 0, 0); }
header.header [data-current="true"] .menu-label { font-weight: 600; }
header.header [data-current="true"] .menu-arrow { background: var(--layout-white); color: var(--layout-secondary); }
.mobile-menu { z-index: 95; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 73px 24px calc(1.25rem + env(safe-area-inset-bottom)); background: var(--layout-white); }
.mobile-menu .menu-link { padding-block: 10px; font-size: 30px; line-height: 1.15; letter-spacing: -0.045em; transition: color 150ms; }
.mobile-menu .menu-link:hover { color: var(--layout-muted); }
.mobile-menu .back-button { width: 40px; height: 40px; color: var(--layout-ink); }
.mobile-menu .back-icon { font-size: var(--layout-icon-size); }
.mobile-menu .detail-link { font-weight: 600; line-height: 1.25; color: var(--layout-ink); }
.mobile-menu .detail-title { font-size: 29px; letter-spacing: -0.04em; }
.mobile-menu .submenu-link { display: block; padding-block: 12px; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; color: var(--layout-muted); transition: color 150ms; }
.mobile-menu .submenu-link:hover { color: var(--layout-ink); }
.mobile-menu .account-menu { border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: var(--layout-text-sm); line-height: 1.25; letter-spacing: -0.025em; }
.mobile-menu .account-link, .mobile-menu .logout-button { transition: opacity 150ms; }
.mobile-menu .account-link:hover, .mobile-menu .logout-button:hover { opacity: 0.6; }
.mobile-menu .account-link:focus-visible, .mobile-menu .logout-button:focus-visible { outline: currentcolor solid 2px; outline-offset: 4px; }
.mobile-menu .account-icon { font-size: var(--layout-text-lg); }
.mobile-menu .account-divider { background: rgba(0, 0, 0, 0.2); }
.mobile-menu .logout-button { border: 0px; background: transparent; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.mobile-menu .current-marker { margin-left: 8px; font-size: 0.8em; font-weight: 400; color: rgb(134, 134, 139); }
.page-content { min-height: 100svh; }
.page-content.has-header-space { padding-top: var(--layout-header-height); }
footer.footer { --footer-muted: #787882; --footer-border: rgb(255 255 255 / 8%); overflow: hidden; background: rgb(14, 14, 17); color: rgb(142, 142, 150); }
footer.footer ::selection { background: var(--layout-white); color: rgb(0, 0, 0); }
footer.footer a:focus-visible { outline: 2px solid var(--layout-white); outline-offset: 4px; }
footer.footer .vision-section { padding-block: 64px 56px; border-bottom: 1px solid var(--footer-border); }
footer.footer .eyebrow { font-size: 11px; letter-spacing: 0.22em; color: var(--footer-muted); text-transform: uppercase; }
footer.footer .vision-title { font-size: 32px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.25; word-break: keep-all; }
footer.footer .vision-emphasis { color: rgba(255, 255, 255, 0.9); }
footer.footer .vision-description { font-size: var(--layout-text-sm); font-weight: 300; line-height: 1.625; color: rgb(154, 154, 162); word-break: keep-all; }
footer.footer .contact-link { border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: var(--layout-small); letter-spacing: 0.4px; transition: border-color 150ms; }
footer.footer .contact-link:hover { border-color: var(--layout-white); }
footer.footer .contact-arrow { font-size: var(--layout-text-md); line-height: 28px; transition: transform var(--layout-motion); }
footer.footer .contact-link:hover .contact-arrow { transform: translate(4px, -4px); }
footer.footer .contact-label { font-size: 10px; letter-spacing: 0.18em; color: var(--footer-muted); text-transform: uppercase; }
footer.footer .phone-link { display: inline-block; font-size: 28px; line-height: 38px; font-weight: 300; letter-spacing: -0.4px; transition: color 150ms; }
footer.footer .phone-link:hover { color: rgba(255, 255, 255, 0.8); }
footer.footer .business-hours { font-size: 11px; font-weight: 300; color: rgb(110, 110, 120); }
footer.footer .directory-section { padding-block: 48px; border-bottom: 1px solid var(--footer-border); }
footer.footer .company-name { font-size: var(--layout-text-lg); line-height: 30px; letter-spacing: -0.4px; }
footer.footer .company-name-en { font-size: var(--layout-text-xs); line-height: 20px; font-weight: 300; color: var(--footer-muted); }
footer.footer .company-address { font-size: 12px; font-style: normal; line-height: 1.85; font-weight: 300; color: rgb(130, 130, 140); }
footer.footer .address-text { word-break: keep-all; }
footer.footer .meta-label { color: rgb(95, 95, 105); }
footer.footer .text-link, footer.footer .privacy-link, footer.footer .top-link { transition: color 150ms; }
footer.footer .text-link:hover, footer.footer .privacy-link:hover, footer.footer .top-link:hover { color: var(--layout-white); }
footer.footer .directory-heading { font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
footer.footer .directory-list { font-size: var(--layout-small); font-weight: 300; }
footer.footer .explore-list { font-size: var(--layout-small); font-weight: 300; }
footer.footer .bottom-section { padding-block: 32px 40px; font-size: 11px; font-weight: 300; color: rgb(99, 99, 109); }
footer.footer .privacy-link { color: rgba(255, 255, 255, 0.8); }
footer.footer .top-icon { font-size: var(--layout-text-xs); }
header.header .mega-grid { display: grid; align-items: stretch; gap: 32px; }
header.header .menu-intro { padding-right: 24px; }
header.header .menu-rule, header.header .menu-title { margin-top: 20px; }
header.header .menu-description { margin-top: 16px; }
header.header .menu-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
header.header .submenu-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
header.header .submenu-item { min-width: 0px; }
header.header .submenu-link { display: flex; align-items: center; gap: 12px; }
header.header .menu-label { flex: 1 1 0%; min-width: 0px; }
.mobile-menu .menu-list > li + li { margin-top: 8px; }
.mobile-menu .back-button { display: flex; align-items: center; justify-content: center; margin: 0px 0px 12px -12px; }
.mobile-menu .detail-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-block: 8px; }
.mobile-menu .submenu-list { margin-top: 24px; padding-top: 20px; }
.mobile-menu .submenu-list > li + li { margin-top: 4px; }
html.overflow-hidden, body.overflow-hidden { overflow: hidden; }
footer.footer .directory-links { --ui-gap: 24px; }
footer.footer .directory-group { --ui-gap: 14px; }
footer.footer .directory-list { --ui-gap: 10px; }
@media (min-width: 640px) {
footer.footer .vision-title { font-size: 40px; }
footer.footer .phone-link { font-size: 32px; line-height: 42px; }
}
@media (min-width: 768px) {
header.header .mega-menu { width: calc(100% - 32px); max-width: 1600px; }
header.header .surface { width: calc(90% + 64px); max-width: min(1664px, 100% - 32px); border-radius: var(--layout-radius); }
header.header .wordmark { font-size: 20px; }
header.header .mega-menu { display: block; }
.page-content.has-header-space { padding-top: 89px; }
footer.footer .vision-section { padding-block: 96px 80px; }
footer.footer .vision-description { font-size: 15px; }
footer.footer .directory-section { padding-block: 64px; }
footer.footer .company-address { font-size: var(--layout-small); }
}
@media (min-width: 1024px) {
header.header .mega-menu { min-height: 340px; padding-block: 40px; }
header.header .mega-grid { gap: 64px; }
header.header .menu-intro { padding-right: 40px; }
header.header .menu-title { font-size: 38px; }
header.header .submenu-link { min-height: 92px; gap: 16px; }
header.header .menu-label { font-size: var(--layout-text-lg); }
footer.footer .vision-title { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
header.header, header.header .surface, header.header .mega-menu, header.header .menu-column, header.header .submenu-link, header.header .menu-arrow { transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
header.header .wordmark, header.header .logo-dot { transition: transform 500ms ease-out; }
header.header .logo:hover .wordmark, header.header .logo:focus-visible .wordmark { transform: translateY(-1px); }
header.header .logo:hover .logo-dot, header.header .logo:focus-visible .logo-dot { transform: translateY(-2px) scale(1.1); }
}
header.header .submenu-link[data-current="true"]:hover .menu-arrow { background: var(--layout-white); color: rgb(0, 0, 0); }


/* 오른쪽 계정 아이콘과 툴팁: line의 공통 헤더와 동일한 표현. */
header.header .account-link { transition: color 150ms, background-color 150ms; }
.site:has(header.header .account-link[aria-describedby]) > .tooltip {
  --header-tooltip-surface: #fff;
  --header-tooltip-text: #30343b;
  --header-tooltip-border: rgb(25 31 40 / 8%);
  --header-tooltip-shadow: 0 4px 16px rgb(25 31 40 / 8%);
  padding: 6px 10px;
  border: 1px solid var(--header-tooltip-border);
  border-radius: 8px;
  background: var(--header-tooltip-surface);
  color: var(--header-tooltip-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  box-shadow: var(--header-tooltip-shadow);
}

