@charset "utf-8"; /* common layout */ /*** focus ***/ @supports selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 2px var(--focus-ring-contrast); } :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) { outline: none; box-shadow: none; } } @supports not selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 2px var(--focus-ring-contrast); } } /*** 누리집 ***/ .toggle-wrap { position: fixed; top: 0; z-index: 41; width: 100%; max-width: var(--app-max-width); background: #edf1f5; } body.has-nuri .toggle-wrap { transition: transform 0.2s ease, opacity 0.2s ease; transform: translateY(0); opacity: 1; } body.has-nuri.is-nuri-hidden .toggle-wrap { pointer-events: none; transform: translateY(-100%); opacity: 0; } .toggle-wrap .toggle-inner { display: flex; gap: 4px; margin: 0 auto; padding: 6px 30px; width: 100%; font-size: 14.5px; font-weight: 300; color: #000; box-sizing: border-box; } .toggle-wrap .toggle-inner span { position: relative; letter-spacing: -1px; } /*** header ***/ :root { --header-offset: 106px; } body.has-nuri.is-nuri-hidden { --header-offset: 74px; } html { scroll-padding-top: var(--header-offset); } :where([id]) { scroll-margin-top: var(--header-offset); } .page-shell { margin: 0 auto; padding-top: 106px; box-shadow: var(--shadow); overflow-x: hidden; position: relative; width: min(100%, var(--app-max-width)); min-height: 100vh; background: var(--bg); transition: padding-top 0.2s ease; } body.has-nuri.is-nuri-hidden .page-shell { padding-top: 74px; } .site-header { position: fixed; top: 32px; left: 50%; z-index: 40; width: min(100%, var(--app-max-width)); background: transparent; transition: top 0.2s ease, background 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease; transform: translateX(-50%); backdrop-filter: none; -webkit-backdrop-filter: none; } body.has-nuri.is-nuri-hidden .site-header { top: 0; } body.is-header-scrolled .site-header { background: rgb(243 246 251 / 72%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 74px; } .header-actions { display: flex; align-items: center; column-gap: 16px; } .search-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; width: 28px; height: 28px; background: transparent; cursor: pointer; } .search-toggle::before { display: block; width: 22px; height: 22px; background-image: url(/images/common/i-search.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; content: ""; } .brand { display: flex; gap: 2px; flex-direction: column; } .brand-mark { display: block; width: 178px; height: auto; } .brand-text { font-size: 1.152rem; color: #4f5e6d; } /* Mobile Header Menu */ .menu-toggle { display: flex; gap: 6px; flex-direction: column; padding: 0; width: 28px; } .menu-toggle span { height: 2px; background: #111; border-radius: 999px; } body.is-menu-open, body.is-modal-open, body.is-search-open { overflow: hidden; } .search-layer { margin: 0 auto; padding: 32px 24px 24px; overflow: auto; position: fixed; top: 0; right: 0; left: 0; z-index: 65; width: min(100%, var(--app-max-width)); height: 18dvh; max-height: 100vh; background: var(--bg); -webkit-overflow-scrolling: touch; } .search-layer[hidden] { display: none !important; } .search-layer__inner { position: relative; } .search-close { padding: 0; border: 0; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: transparent; cursor: pointer; } .search-close::before, .search-close::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: #111; content: ""; border-radius: 999px; transform-origin: center; } .search-close::before { transform: translate(-50%, -50%) rotate(45deg); } .search-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .search-title { margin: 0 0 18px; font-size: 2.2rem; font-weight: 600; color: #111; letter-spacing: -0.04em; } .search-field { position: relative; } .search-input { padding: 0 52px 0 18px; border: 1px solid var(--border); width: 100%; height: 5.6rem; background: var(--surface); font-size: 1.7rem; color: #111; border-radius: 14px; } .search-input::placeholder { color: #7a8694; } .search-submit { padding: 0; border: 0; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; background-color: transparent; background-image: url(/images/common/i-search.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; cursor: pointer; transform: translateY(-50%); } .menu-overlay { margin: 0 auto; position: fixed; top: 0; right: 0; left: 0; z-index: 45; width: min(100%, var(--app-max-width)); height: 100dvh; max-height: 100vh; background: rgba(0, 0, 0, 0.42); } .mobile-menu { display: flex; flex-direction: column; margin: 0 auto; box-shadow: var(--shadow); overflow: hidden; position: fixed; top: 0; right: 0; left: 0; z-index: 50; width: min(100%, var(--app-max-width)); height: 100dvh; max-height: 100vh; visibility: hidden; background: #fff; transition: transform 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s; pointer-events: none; transform: translateX(100%); opacity: 0; } body.is-menu-open .mobile-menu { visibility: visible; transition: transform 0.28s ease, opacity 0.2s ease, visibility 0s; pointer-events: auto; transform: translateX(0); opacity: 1; } .mobile-menu__header, .mobile-menu__footer { flex-shrink: 0; padding: 20px 24px; } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; } .menu-close { position: relative; width: 24px; height: 24px; } .menu-close::before, .menu-close::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: #111; content: ""; border-radius: 999px; transform-origin: center; } .menu-close::before { transform: translate(-50%, -50%) rotate(45deg); } .menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-menu__nav { flex: 1; padding: 0px 24px 16px 24px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-menu details { border-bottom: 1px solid #edf1f5; } .mobile-menu__nav>.mobile-menu__depth1-link { display: block; padding: 16px 0; padding-right: 24px; border-bottom: 1px solid #edf1f5; position: relative; font-weight: 600; color: #111; } .mobile-menu summary { padding: 16px 0; padding-right: 24px; position: relative; font-weight: 600; list-style: none; cursor: pointer; } .mobile-menu summary::after { display: block; position: absolute; top: 50%; right: 0; width: 24px; height: 24px; background-image: url(/images/common/i-plus-toggle.svg); background-repeat: no-repeat; background-position: center center; background-size: 12px; color: #6b7785; content: ""; transform: translateY(-50%); } .mobile-menu details[open]>summary::after { background-image: url(/images/common/i-minus-toggle.svg); } .mobile-menu summary::-webkit-details-marker { display: none; } .mobile-menu ul { padding: 10px 0 0 12px; } /* 2depth group */ .mobile-menu__nav>details>ul { margin: 0 0 12px; padding: 0px 12px; background: #f6f8fb; border-radius: 10px; } .mobile-menu__nav>details>ul>li:not(:last-child) { border-bottom: 1px solid #e8ecf3; } .mobile-menu__nav>details>ul>li { margin: 0; padding: 10px 0; } /* .mobile-menu li + li { margin-top: 10px; } */ .mobile-menu__nav>details>ul>li+li { margin-top: 0; } .mobile-menu a { display: block; padding: 4px 0; font-weight: 500; color: #3b4a5a; } .mobile-menu a.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .mobile-menu a.is-external::after { flex: 0 0 auto; width: 24px; height: 24px; background: url(/images/common/i-blank.svg) no-repeat center/12px; content: ""; } .mobile-menu__nav>.mobile-menu__depth1-link.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding-right: 0; } .mobile-menu__nav>.mobile-menu__depth1-link.is-external::after { width: 24px; height: 24px; background-size: 12px; } .mobile-menu details details { border-bottom: 0; } .mobile-menu details details[open]>ul { padding-bottom: 10px; } .mobile-menu ul>li:last-child>details[open]>ul { padding-bottom: 0; } .mobile-menu details details summary { padding: 4px 0; font-weight: 500; color: #243140; } /* .mobile-menu details details ul { margin: 0 0 10px; padding-left: 10px; } */ /* depth markers (3rd depth only) */ .mobile-menu .mobile-menu__nav>details>ul>li>details>ul>li>a, .mobile-menu .mobile-menu__nav>details>ul>li>details>ul>li>details>summary { padding-left: 4px; position: relative; } .mobile-menu .mobile-menu__nav>details>ul>li>details>ul>li>a::before, .mobile-menu .mobile-menu__nav>details>ul>li>details>ul>li>details>summary::before { position: absolute; top: 50%; left: -10px; width: 4px; height: 4px; background-color: #6a7786; content: ''; border-radius: 4px; transform: translateY(-50%); } .mobile-menu details details details>ul>li>a, .mobile-menu details details details>ul>li>details>summary { padding-left: 10px; position: relative; } .mobile-menu details details details>ul>li>a::before, .mobile-menu details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: -8px; font-size: 1.8rem; color: #7f8b99; content: "-"; transform: translateY(-50%); } /* 4~5depth spacing (supports up to 5th menu) */ .mobile-menu details details details details>ul>li>a, .mobile-menu details details details details>ul>li>details>summary { padding-left: 16px; position: relative; } .mobile-menu details details details details>ul>li>a::before, .mobile-menu details details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: 0; font-size: 1.5rem; color: #8a96a5; content: "·"; transform: translateY(-50%); } .mobile-menu details details details details details>ul>li>a, .mobile-menu details details details details details>ul>li>details>summary { padding-left: 5px; position: relative; } .mobile-menu details details details details details>ul>li>a::before, .mobile-menu details details details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: 0; font-size: 1rem; color: #98a3b2; content: ""; transform: translateY(-50%); } /* Header menu: 5depth ul bottom padding +10px */ .mobile-menu details details details details details>ul { padding-bottom: 10px; } .mobile-menu__footer { display: flex; gap: 14px; border-top: 1px solid #edf1f5; } .mobile-menu__footer a { display: inline-flex; align-items: center; justify-content: center; padding: 6px 6px; border: 1px solid var(--border); font-size: 1.504rem; color: var(--muted); border-radius: 999px; } .mobile-menu__footer a img { width: 25px; height: 25px; } /* Sitemap menu (synced with header mobile menu structure) */ .sitemap-menu { display: grid; } .sitemap-menu details { overflow: hidden; } .sitemap-menu>details[open] { box-shadow: var(--shadow-sm); border-radius: 10px; } .sitemap-menu details:not(:last-child) { border-bottom: 1px solid #d9d9d9; } .sitemap-menu>.mobile-menu__depth1-link { display: block; padding: 20px 18px; border-bottom: 1px solid #d9d9d9; position: relative; font-weight: 600; color: #111; } .sitemap-menu summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px; position: relative; font-weight: 600; list-style: none; cursor: pointer; } .sitemap-menu summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring-contrast), inset 0 0 0 6px var(--focus-ring); border-radius: 10px; } .sitemap-menu summary::-webkit-details-marker { display: none; } .sitemap-menu summary::after { display: block; flex: 0 0 auto; width: 18px; height: 18px; background-image: url(/images/common/i-toggle-off.svg); background-repeat: no-repeat; background-position: center center; content: ""; } .sitemap-menu details[open]>summary::after { background-image: url(/images/common/i-toggle-off.svg); } .sitemap-menu>details[open]>summary { background: var(--surface); } .sitemap-menu>details>ul { padding: 0px 18px; border-top: 1px solid #e8ecf3; background: var(--surface); } .sitemap-menu ul { margin: 0; padding: 0; } .sitemap-menu>details>ul>li+li { border-top: 1px solid #e8ecf3; } .sitemap-menu>details>ul>li { padding: 10px 0; } /* 3~5depth menu spacing */ .sitemap-menu details details>ul>li { padding: 5px 0; } .sitemap-menu a { display: block; padding: 6px 0; font-weight: 500; color: #3b4a5a; } .sitemap-menu a.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .sitemap-menu a.is-external::after { flex: 0 0 auto; width: 24px; height: 24px; background: url(/images/common/i-blank.svg) no-repeat center/12px; content: ""; } .sitemap-menu>.mobile-menu__depth1-link.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .sitemap-menu>.mobile-menu__depth1-link.is-external::after { width: 18px; height: 18px; background-size: 12px; } .sitemap-menu a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring-contrast), inset 0 0 0 6px var(--focus-ring); border-radius: 8px; } .sitemap-menu details details { margin: 0; box-shadow: none; overflow: visible; background: transparent; border-radius: 0; } .sitemap-menu details details[open]>ul { padding-bottom: 10px; } .sitemap-menu ul>li:last-child>details[open]>ul { padding-bottom: 0; } .sitemap-menu details details summary { padding: 4px 0; font-weight: 500; color: #243140; } /* depth markers (supports up to 5th menu) */ .sitemap-menu details details>ul { padding: 8px 0 0 10px; } .sitemap-menu details details details details details>ul { padding: 12px 0 6px 10px; } .sitemap-menu details details details details details>ul>li { padding: unset; } .sitemap-menu details details>ul>li>a, .sitemap-menu details details>ul>li>details>summary { padding-left: 5px; position: relative; } .sitemap-menu details details>ul>li>a::before, .sitemap-menu details details>ul>li>details>summary::before { position: absolute; top: 50%; left: -8px; font-size: 1.152rem; color: #6a7786; content: "?"; transform: translateY(-50%); } .sitemap-menu details details details>ul>li>a, .sitemap-menu details details details>ul>li>details>summary { padding-left: 8px; position: relative; } .sitemap-menu details details details>ul>li>a::before, .sitemap-menu details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: -5px; font-size: 1.088rem; color: #7f8b99; content: "-"; transform: translateY(-50%); } .sitemap-menu details details details details>ul>li>a, .sitemap-menu details details details details>ul>li>details>summary { padding-left: 15px; position: relative; } .sitemap-menu details details details details>ul>li>a::before, .sitemap-menu details details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: 0; font-size: 1.04rem; color: #8a96a5; content: "·"; transform: translateY(-50%); } .sitemap-menu details details details details details>ul>li>a, .sitemap-menu details details details details details>ul>li>details>summary { padding-left: 6px; position: relative; } .sitemap-menu details details details details details>ul>li>a::before, .sitemap-menu details details details details details>ul>li>details>summary::before { position: absolute; top: 50%; left: 0; font-size: 1rem; color: #98a3b2; content: ""; transform: translateY(-50%); } .lang-switch { display: flex; gap: 8px; } .lang-switch a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--border); background: white; border-radius: 999px; } /*** container ***/ /*** footer ***/ .site-footer { margin-top: 70px; padding: 60px 24px 50px; background: #222; color: #ccc; } .is-sub .site-footer { margin-top: 40px; } .footer-brand { margin-bottom: 22px; font-size: 3.2rem; font-weight: 800; color: white; } .footer-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .footer-links a { font-size: 1.44rem; color: #aaa; } .footer-links a.is-strong { color: white; text-decoration: underline; } address { font-size: 1.248rem; font-style: normal; line-height: 1.6; color: #8f8f8f; } address p { margin: 0; } .copyright { margin: 20px 0 0; font-size: 1.248rem; line-height: 1.5; color: #777; }