:root {
    --kotda-blue: #245ea9;
    --kotda-blue-dark: #163f78;
    --kotda-sky: #55a9d9;
    --kotda-green: #3b8c73;
    --kotda-orange: #f47b50;
    --kotda-ink: #17252f;
    --kotda-muted: #66747e;
    --kotda-line: #dde6eb;
    --kotda-soft: #f4f8fa;
    --kotda-white: #fff;
    --kotda-shadow: 0 18px 55px rgba(24, 63, 89, .12);
}

html { scroll-behavior: smooth; }
body { color: var(--kotda-ink); background: #fff; word-break: keep-all; }
body.kotda-nav-open { overflow: hidden; }
body, button, input, select, textarea { font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; }
* { box-sizing: border-box; }
.kotda-skip { position: fixed; left: 16px; top: -80px; z-index: 9999; padding: 12px 18px; color: #fff; background: #111; border-radius: 6px; }
.kotda-skip:focus { top: 12px; }
#container-box { width: 100%; min-height: 50vh; overflow: hidden; }
.kotda-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.kotda-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--kotda-blue); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.kotda-eyebrow::before { width: 26px; height: 2px; background: var(--kotda-orange); content: ""; }
.kotda-section { padding: 110px 0; }
.kotda-section--soft { background: var(--kotda-soft); }
.kotda-section-head { max-width: 760px; margin-bottom: 50px; }
.kotda-section-head h2 { margin: 0 0 18px; color: var(--kotda-ink); font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -.045em; }
.kotda-section-head p { margin: 0; color: var(--kotda-muted); font-size: 17px; line-height: 1.85; }

/* header */
#header-wrap.kotda-header { position: fixed; inset: 0 0 auto; z-index: 1000; width: 100%; height: 86px; border-bottom: 1px solid rgba(255,255,255,.25); background: transparent; transition: .25s ease; }
.kotda-header__inner { display: flex; align-items: center; width: min(1500px, calc(100% - 48px)); height: 100%; margin: 0 auto; }
.kotda-header .kotda-brand { flex: 0 0 310px; width: 310px; height: auto; margin: 0; padding: 0; float: none; text-align: left; }
.kotda-header .kotda-brand a { position: relative; display: block; width: 300px; height: 59px; line-height: 1; background: none !important; }
.kotda-header .kotda-brand img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); }
.kotda-brand__color { display: none; }
.kotda-brand__white { display: block; }
.kotda-header.is-sub, body.scrolled .kotda-header { border-bottom-color: var(--kotda-line); background: rgba(255,255,255,.97); box-shadow: 0 6px 28px rgba(19,48,69,.07); backdrop-filter: blur(14px); }
.kotda-header.is-sub .kotda-brand__color, body.scrolled .kotda-brand__color { display: block; }
.kotda-header.is-sub .kotda-brand__white, body.scrolled .kotda-brand__white { display: none; }
.kotda-gnb { flex: 1; height: 100%; float: none; }
.kotda-gnb > ul { display: flex; justify-content: center; height: 100%; margin: 0; padding: 0; }
.kotda-gnb > ul > li { position: relative; display: flex; align-items: center; height: 100%; padding: 0 20px; line-height: normal; float: none; margin: 0; }
.kotda-gnb > ul > li:nth-child(1) { width: auto; }
.kotda-gnb > ul > li > a { display: flex; align-items: center; width: auto; height: 100%; padding: 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; transition: color .2s; }
.kotda-header.is-sub .kotda-gnb > ul > li > a, body.scrolled .kotda-gnb > ul > li > a { color: var(--kotda-ink); }
.kotda-gnb > ul > li:hover > a, .kotda-gnb > ul > li.is-current > a { color: #d9effc; }
.kotda-header.is-sub .kotda-gnb > ul > li:hover > a, .kotda-header.is-sub .kotda-gnb > ul > li.is-current > a, body.scrolled .kotda-gnb > ul > li:hover > a, body.scrolled .kotda-gnb > ul > li.is-current > a { color: var(--kotda-blue); }
.kotda-gnb > ul > li > a::after { position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--kotda-orange); transform: scaleX(0); transition: transform .2s; content: ""; }
.kotda-gnb > ul > li:hover > a::after, .kotda-gnb > ul > li.is-current > a::after { transform: scaleX(1); }
.kotda-gnb .depth2 { position: absolute; display: block; visibility: hidden; opacity: 0; top: 82px; left: 50%; width: 230px; padding: 12px; margin: 0; border: 1px solid rgba(33,78,108,.08); border-radius: 12px; background: #fff; box-shadow: var(--kotda-shadow); transform: translate(-50%, 8px); transition: .2s; }
.kotda-gnb li:hover > .depth2, .kotda-gnb li:focus-within > .depth2 { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.kotda-gnb .depth2 li { height: auto; margin: 0; padding: 0; border: 0; background: transparent; line-height: 1.4; }
.kotda-gnb .depth2 a { display: block; padding: 11px 13px; border-radius: 7px; color: #3b4a54 !important; font-size: 14px; font-weight: 600; }
.kotda-gnb .depth2 a:hover, .kotda-gnb .depth2 .is-current a { padding: 11px 13px; color: var(--kotda-blue) !important; background: #edf5fb; }
.kotda-account { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.kotda-account a { padding: 8px 5px; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; }
.kotda-account__join { padding: 9px 14px !important; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; }
.kotda-header.is-sub .kotda-account a, body.scrolled .kotda-account a { color: #465762; }
.kotda-header.is-sub .kotda-account__join, body.scrolled .kotda-account__join { border-color: var(--kotda-blue); color: var(--kotda-blue) !important; }
.kotda-menu-button { display: none; }

/* mobile navigation */
.kotda-mobile-nav { position: fixed; top: 0; right: -430px; z-index: 1200; width: min(430px, 92vw); height: 100dvh; padding: 0 24px 30px; overflow-y: auto; background: #102b43; transition: right .3s ease; }
.kotda-mobile-nav.is-open { right: 0; }
.kotda-mobile-nav__backdrop { position: fixed; inset: 0; z-index: 1150; background: rgba(2,15,25,.58); }
.kotda-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid rgba(255,255,255,.14); }
.kotda-mobile-nav__head img { width: 260px; max-width: calc(100% - 54px); }
.kotda-mobile-nav__close { border: 0; color: #fff; background: transparent; font-size: 38px; line-height: 1; }
.kotda-mobile-nav .depth1 { margin: 16px 0 0; padding: 0; }
.kotda-mobile-nav .depth1 > li { border-bottom: 1px solid rgba(255,255,255,.12); }
.kotda-mobile-nav__title { display: flex; align-items: center; min-height: 58px; }
.kotda-mobile-nav__title > a { flex: 1; color: #fff; font-size: 17px; font-weight: 750; }
.kotda-mobile-nav__toggle { width: 44px; height: 44px; border: 0; color: #fff; background: transparent; font-size: 20px; transition: transform .2s; }
.kotda-mobile-nav li.is-open .kotda-mobile-nav__toggle { transform: rotate(180deg); }
.kotda-mobile-nav .depth2 { display: none; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.07); }
.kotda-mobile-nav li.is-open > .depth2 { display: block; }
.kotda-mobile-nav .depth2 a { display: block; padding: 9px 6px; color: #d9e9f4; font-size: 14px; }
.kotda-mobile-nav__account { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.kotda-mobile-nav__account a { padding: 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; text-align: center; font-weight: 700; }

/* home */
.kotda-hero { position: relative; display: flex; align-items: center; min-height: 790px; padding: 150px 0 80px; color: #fff; background: url('/images/hero_environment_2026.webp') center / cover no-repeat; }
.kotda-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,35,52,.74) 0%, rgba(12,53,71,.48) 44%, rgba(12,53,71,.08) 78%), linear-gradient(0deg, rgba(4,32,40,.34), transparent 55%); content: ""; }
.kotda-hero__content { position: relative; z-index: 1; max-width: 870px; }
.kotda-hero__kicker { display: block; margin-bottom: 22px; color: #d7f4ff; font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.kotda-hero h1 { margin: 0 0 28px; font-size: clamp(42px, 5.4vw, 74px); line-height: 1.16; letter-spacing: -.055em; text-shadow: 0 5px 25px rgba(0,0,0,.18); }
.kotda-hero h1 em { color: #e8f8ff; font-style: normal; }
.kotda-hero__lead { max-width: 720px; margin: 0; color: rgba(255,255,255,.9); font-size: 19px; line-height: 1.8; }
.kotda-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.kotda-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 25px; border: 1px solid var(--kotda-blue); border-radius: 8px; color: #fff; background: var(--kotda-blue); font-size: 15px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.kotda-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,77,125,.22); }
.kotda-button--light { border-color: rgba(255,255,255,.75); color: #fff; background: rgba(255,255,255,.10); backdrop-filter: blur(8px); }
.kotda-button--outline { color: var(--kotda-blue); background: #fff; }
.kotda-quick { position: relative; z-index: 2; margin-top: -54px; }
.kotda-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--kotda-shadow); }
.kotda-quick a { position: relative; display: flex; align-items: center; min-height: 108px; padding: 22px 28px; border-right: 1px solid var(--kotda-line); color: var(--kotda-ink); }
.kotda-quick a:last-child { border-right: 0; }
.kotda-quick a:hover { color: var(--kotda-blue); background: #f7fbfe; }
.kotda-quick__icon { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; margin-right: 15px; border-radius: 15px; color: var(--kotda-blue); background: #eaf4fb; font-size: 22px; font-weight: 900; }
.kotda-quick strong { display: block; margin-bottom: 4px; font-size: 16px; }
.kotda-quick small { color: #7b8991; font-size: 12px; }
.kotda-about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.kotda-about-image { position: relative; min-height: 510px; border-radius: 28px; overflow: hidden; box-shadow: var(--kotda-shadow); }
.kotda-about-image img { width: 100%; height: 100%; min-height: 510px; object-fit: cover; }
.kotda-about-image__badge { position: absolute; right: 22px; bottom: 22px; max-width: 230px; padding: 22px; border-radius: 16px; color: #fff; background: rgba(20,76,111,.88); backdrop-filter: blur(10px); }
.kotda-about-image__badge strong { display: block; margin-bottom: 8px; font-size: 19px; }
.kotda-about-copy h2 { margin: 0 0 24px; font-size: clamp(34px, 4vw, 54px); line-height: 1.24; letter-spacing: -.05em; }
.kotda-about-copy > p { margin: 0 0 18px; color: var(--kotda-muted); font-size: 17px; line-height: 1.88; }
.kotda-about-list { display: grid; gap: 12px; margin: 30px 0 36px; padding: 0; }
.kotda-about-list li { position: relative; padding-left: 28px; color: #344852; font-weight: 700; }
.kotda-about-list li::before { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--kotda-green); content: "✓"; font-size: 11px; }
.kotda-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kotda-role-card { min-height: 290px; padding: 34px 28px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; transition: .25s; }
.kotda-role-card:hover { transform: translateY(-7px); box-shadow: var(--kotda-shadow); }
.kotda-role-card__no { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 52px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--kotda-blue), var(--kotda-sky)); font-size: 13px; font-weight: 800; }
.kotda-role-card h3 { margin: 0 0 13px; font-size: 21px; letter-spacing: -.025em; }
.kotda-role-card p { margin: 0; color: var(--kotda-muted); line-height: 1.75; }
.kotda-service-band { position: relative; padding: 100px 0; color: #fff; background: linear-gradient(110deg, rgba(14,62,84,.95), rgba(34,108,127,.82)), url('/images/member_service_background_2026.jpg') center / cover no-repeat; }
.kotda-service-band .kotda-section-head h2, .kotda-service-band .kotda-section-head p { color: #fff; }
.kotda-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kotda-service-card { display: flex; min-height: 220px; padding: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; color: #fff; background: rgba(255,255,255,.10); backdrop-filter: blur(9px); flex-direction: column; }
.kotda-service-card:hover { color: #fff; background: rgba(255,255,255,.17); }
.kotda-service-card span { margin-bottom: auto; color: #bfeafa; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.kotda-service-card h3 { margin: 20px 0 10px; font-size: 23px; }
.kotda-service-card p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.65; }
.kotda-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.kotda-news-box { padding: 32px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; }
.kotda-news-box__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.kotda-news-box h3 { margin: 0; font-size: 22px; }
.kotda-news-box__head a { color: var(--kotda-blue); font-size: 13px; font-weight: 800; }
.kotda-news-placeholder { display: grid; min-height: 150px; place-items: center; color: #7c8991; border-top: 1px solid var(--kotda-line); text-align: center; line-height: 1.7; }

/* subpage */
.kotda-sub-visual { position: relative; display: grid; min-height: 350px; padding-top: 86px; color: #fff; background-position: center; background-size: cover; place-items: center; text-align: center; }
.kotda-sub-visual::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,59,77,.66), rgba(31,106,126,.36)); content: ""; }
.kotda-sub-visual__content { position: relative; z-index: 1; padding: 45px 24px; }
.kotda-sub-visual__content p { margin: 0 0 10px; color: #d4eef7; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.kotda-sub-visual__content h1 { margin: 0 0 15px; font-size: clamp(36px, 5vw, 55px); letter-spacing: -.045em; }
.kotda-sub-visual__content span { color: rgba(255,255,255,.86); font-size: 16px; }
.kotda-sub-nav { border-bottom: 1px solid var(--kotda-line); background: #fff; }
.kotda-sub-nav__inner { display: flex; width: min(1240px, 100%); margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.kotda-sub-nav__home { display: grid; flex: 0 0 62px; min-height: 62px; color: #fff; background: var(--kotda-blue); place-items: center; }
.kotda-sub-nav__links { display: flex; flex: 1; }
.kotda-sub-nav__links a { display: flex; align-items: center; justify-content: center; min-width: 150px; min-height: 62px; padding: 0 22px; border-right: 1px solid var(--kotda-line); color: #60717a; font-size: 14px; font-weight: 700; white-space: nowrap; }
.kotda-sub-nav__links a.is-current { color: var(--kotda-blue); box-shadow: inset 0 -3px var(--kotda-blue); }
.kotda-page { padding: 90px 0 120px; }
.kotda-page-title { margin-bottom: 55px; text-align: center; }
.kotda-page-title h2 { margin: 0 0 14px; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.04em; }
.kotda-page-title p { margin: 0; color: var(--kotda-muted); font-size: 16px; }
.kotda-content-lead { max-width: 880px; margin: 0 auto 55px; color: #334852; font-size: 20px; font-weight: 650; line-height: 1.8; text-align: center; }
.kotda-prose { color: #4f626c; font-size: 16px; line-height: 1.95; }
.kotda-prose p { margin: 0 0 20px; }
.kotda-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.kotda-media-card { border-radius: 20px; overflow: hidden; background: #eef4f6; box-shadow: var(--kotda-shadow); }
.kotda-media-card img, .kotda-media-card video { display: block; width: 100%; height: auto; }
.kotda-president-photo { width: 50%; margin-left: auto; }
.kotda-president-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.kotda-greeting-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 24px; }
.kotda-greeting-layout .kotda-president-photo { width: 100%; margin: 0; }
.kotda-greeting-layout .kotda-president-photo img { aspect-ratio: 836 / 1280; object-fit: cover; object-position: center top; }
.kotda-promo-video { width: 50%; margin: 0 auto; }
.kotda-promo-video video { aspect-ratio: 16 / 9; object-fit: cover; }
.kotda-map-section { margin-top: 90px; }
.kotda-map-section .kotda-section-head { margin-bottom: 28px; }
.kotda-google-map { width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 20px; background: #eef4f6; box-shadow: var(--kotda-shadow); }
.kotda-google-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.kotda-info-card { padding: 34px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; }
.kotda-info-card h3 { margin: 0 0 15px; font-size: 23px; }
.kotda-info-card p { margin: 0; color: var(--kotda-muted); line-height: 1.8; }
.kotda-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kotda-timeline { position: relative; max-width: 960px; margin: 0 auto; padding-left: 115px; }
.kotda-timeline::before { position: absolute; left: 85px; top: 6px; bottom: 6px; width: 2px; background: #cbdde6; content: ""; }
.kotda-timeline__item { position: relative; display: grid; grid-template-columns: 110px 1fr; min-height: 70px; padding-bottom: 26px; }
.kotda-timeline__item::before { position: absolute; left: -36px; top: 7px; width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: var(--kotda-blue); box-shadow: 0 0 0 2px var(--kotda-blue); content: ""; }
.kotda-timeline__year { color: var(--kotda-blue); font-size: 19px; font-weight: 850; }
.kotda-timeline__text { color: #43555f; line-height: 1.75; }
.kotda-download-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 35px; padding: 28px 32px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, var(--kotda-blue-dark), var(--kotda-blue)); }
.kotda-download-box h3, .kotda-download-box strong { margin: 0 0 7px; color: #fff !important; font-size: 21px; }
.kotda-download-box p { margin: 0; color: rgba(255,255,255,.75); }
.kotda-download-box a { flex: 0 0 auto; padding: 13px 20px; border-radius: 8px; color: var(--kotda-blue); background: #fff; font-weight: 800; }
.kotda-org { display: grid; gap: 24px; max-width: 1000px; margin: 0 auto; text-align: center; }
.kotda-org__top, .kotda-org__second { display: flex; justify-content: center; gap: 20px; }
.kotda-org__box { min-width: 200px; padding: 20px; border: 1px solid var(--kotda-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(23,70,100,.08); }
.kotda-org__top .kotda-org__box { color: #fff; border: 0; background: var(--kotda-blue); }
.kotda-org__branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kotda-org__branches .kotda-org__box { min-width: 0; }
.kotda-ci-box { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kotda-ci-sample { display: grid; min-height: 270px; padding: 36px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; place-items: center; }
.kotda-ci-sample--dark { background: #183141; }
.kotda-ci-sample img { max-width: 100%; }
.kotda-ci-section { margin-top: 76px; }
.kotda-ci-section:first-of-type { margin-top: 0; }
.kotda-ci-section-title { margin-bottom: 25px; }
.kotda-ci-section-title h2 { margin: 0; color: var(--kotda-ink); font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.kotda-ci-lockup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kotda-ci-lockup, .kotda-ci-system-item { display: flex; min-height: 150px; align-items: center; gap: 18px; padding: 28px; border: 1px solid var(--kotda-line); border-radius: 16px; background: #fff; }
.kotda-ci-lockup--wide { grid-column: span 2; }
.kotda-ci-symbol { display: block; flex: 0 0 105px; width: 105px; height: 112px; background: url('/images/logo_b_2026.png') left center / auto 112px no-repeat; }
.kotda-ci-wording { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.kotda-ci-wording strong { color: var(--kotda-ink); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.06em; white-space: nowrap; }
.kotda-ci-wording small { color: #53656e; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.35; }
.kotda-ci-description { max-width: 1050px; margin: 0 0 32px; color: #4f626c; font-size: 17px; line-height: 1.9; }
.kotda-ci-symbol-guide { position: relative; display: grid; grid-template-columns: 1fr 240px 1fr; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 360px; padding: 45px 55px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; align-items: center; }
.kotda-ci-symbol-large { grid-column: 2; grid-row: 1 / span 2; width: 190px; height: 205px; margin: auto; background: url('/images/logo_b_2026.png') left center / auto 205px no-repeat; }
.kotda-ci-guide-copy { position: relative; z-index: 1; }
.kotda-ci-guide-copy strong { display: block; margin-bottom: 8px; font-family: Arial, sans-serif; font-size: 21px; letter-spacing: .03em; }
.kotda-ci-guide-copy p { margin: 0; color: #53656e; font-size: 16px; line-height: 1.6; }
.kotda-ci-guide-copy--shape { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.kotda-ci-guide-copy--shape strong { color: #287d73; }
.kotda-ci-guide-copy--blue { grid-column: 3; grid-row: 1; }
.kotda-ci-guide-copy--blue strong { color: #365fb9; }
.kotda-ci-guide-copy--yellow { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.kotda-ci-guide-copy--yellow strong { color: #ef912a; }
.kotda-ci-system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kotda-ci-system-item { min-height: 125px; padding: 22px; }
.kotda-ci-symbol--small { flex-basis: 70px; width: 70px; height: 76px; background-size: auto 76px; }
.kotda-ci-system-item .kotda-ci-wording strong { font-size: 24px; }
.kotda-ci-system-item .kotda-ci-wording small { font-size: 10px; }
.kotda-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kotda-contact-card { padding: 30px; border: 1px solid var(--kotda-line); border-radius: 16px; }
.kotda-contact-card span { display: block; margin-bottom: 12px; color: var(--kotda-blue); font-size: 13px; font-weight: 850; }
.kotda-contact-card strong, .kotda-contact-card a { color: var(--kotda-ink); font-size: 18px; line-height: 1.55; }
.kotda-member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kotda-member-card { display: flex; min-height: 180px; padding: 24px; border: 1px solid var(--kotda-line); border-radius: 16px; background: #fff; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.kotda-member-card__logo { display: grid; width: 100%; height: 90px; margin-bottom: 14px; place-items: center; }
.kotda-member-card img { max-width: 92%; max-height: 82px; object-fit: contain; }
.kotda-member-card strong { color: #344953; font-size: 15px; }
.kotda-table-wrap { width: 100%; overflow-x: auto; border-top: 2px solid var(--kotda-blue); }
.kotda-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.kotda-table th, .kotda-table td { padding: 18px 15px; border-bottom: 1px solid var(--kotda-line); line-height: 1.65; text-align: left; }
.kotda-table th { color: #334852; background: #f4f8fa; font-weight: 800; }
.kotda-table td { color: #53656e; }
.kotda-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: process; }
.kotda-process--four { grid-template-columns: repeat(4, 1fr); }
.kotda-process__item { position: relative; min-height: 190px; padding: 28px 22px; border: 1px solid var(--kotda-line); border-radius: 16px; background: #fff; counter-increment: process; }
.kotda-process__item::before { display: block; margin-bottom: 30px; color: var(--kotda-blue); content: "0" counter(process); font-size: 14px; font-weight: 900; letter-spacing: .08em; }
.kotda-process__item h3 { margin: 0 0 10px; font-size: 18px; }
.kotda-process__item p { margin: 0; color: var(--kotda-muted); line-height: 1.6; }
.kotda-law-list { display: grid; gap: 14px; }
.kotda-law-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border: 1px solid var(--kotda-line); border-radius: 14px; color: var(--kotda-ink); background: #fff; font-weight: 800; }
.kotda-law-list a:hover { border-color: var(--kotda-blue); color: var(--kotda-blue); }
.kotda-notice { padding: 20px 24px; border-left: 4px solid var(--kotda-sky); color: #50636d; background: #eef7fb; line-height: 1.75; }

/* member work system */
.kotda-system-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-bottom: 35px; }
.kotda-status-card { padding: 28px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--kotda-blue-dark), var(--kotda-blue)); }
.kotda-status-card small { display: block; margin-bottom: 15px; color: #cce9fa; }
.kotda-status-card strong { display: block; margin-bottom: 8px; font-size: 27px; }
.kotda-status-card p { margin: 0; color: rgba(255,255,255,.78); }
.kotda-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kotda-stat { display: flex; min-height: 132px; padding: 22px; border: 1px solid var(--kotda-line); border-radius: 16px; background: #fff; flex-direction: column; justify-content: center; }
.kotda-stat span { color: var(--kotda-muted); font-size: 13px; }
.kotda-stat strong { margin-top: 8px; color: var(--kotda-blue); font-size: 30px; }
.kotda-panel { margin-top: 28px; padding: 30px; border: 1px solid var(--kotda-line); border-radius: 18px; background: #fff; }
.kotda-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 24px; }
.kotda-panel__head h3 { margin: 0; font-size: 23px; }
.kotda-purchase-panel { max-width: 980px; margin-right: auto; margin-left: auto; }
.kotda-purchase-agree { display: flex; gap: 8px; align-items: center; margin-top: 24px; color: #53656e; font-size: 14px; line-height: 1.5; }
.kotda-purchase-agree input { flex: 0 0 auto; width: 17px; height: 17px; }
.kotda-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kotda-field--full { grid-column: 1 / -1; }
.kotda-field label { display: block; margin-bottom: 8px; color: #3c505b; font-size: 13px; font-weight: 800; }
.kotda-field input, .kotda-field select, .kotda-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cedbe2; border-radius: 8px; color: var(--kotda-ink); background: #fff; }
.kotda-field textarea { min-height: 110px; resize: vertical; }
.kotda-field input:focus, .kotda-field select:focus, .kotda-field textarea:focus { outline: 2px solid rgba(36,94,169,.16); border-color: var(--kotda-blue); }
.kotda-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.kotda-actions button, .kotda-actions a, .kotda-mini-button { min-height: 42px; padding: 0 17px; border: 1px solid var(--kotda-blue); border-radius: 8px; color: #fff; background: var(--kotda-blue); font-weight: 800; }
.kotda-mini-button--light { color: var(--kotda-blue); background: #fff; }
.kotda-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 999px; color: #805d07; background: #fff3cf; font-size: 12px; font-weight: 800; }
.kotda-badge--approved, .kotda-badge--issued { color: #1f7259; background: #dcf5ec; }
.kotda-badge--rejected, .kotda-badge--cancelled { color: #9b3e36; background: #fde4e1; }
.kotda-empty { padding: 50px 20px; color: #7a8991; text-align: center; }
.kotda-login-guide { max-width: 640px; margin: 0 auto; padding: 46px 32px; border: 1px solid var(--kotda-line); border-radius: 20px; text-align: center; }
.kotda-login-guide h3 { margin: 0 0 13px; font-size: 26px; }
.kotda-login-guide p { margin: 0 0 25px; color: var(--kotda-muted); line-height: 1.7; }

/* GNUBOARD member screens */
.kotda-header ~ #container-box .register, .kotda-header ~ #container-box #mb_login, .kotda-header ~ #container-box #fregister { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding-top: 140px; padding-bottom: 100px; }
.kotda-company-register { margin-bottom: 30px; padding: 28px; border: 1px solid var(--kotda-line); border-radius: 14px; background: #f7fafb; }
.kotda-company-register h2 { margin: 0 0 8px; }
.kotda-company-register__help { margin: 0 0 20px; color: var(--kotda-muted); line-height: 1.6; }
.kotda-company-register .kotda-field { margin-top: 14px; }
.kotda-membership-readonly { display: flex; min-height: 48px; padding: 10px 14px; border: 1px solid #cedbe2; border-radius: 8px; background: #f4f8fa; flex-direction: column; justify-content: center; }
.kotda-membership-readonly strong { color: var(--kotda-blue); font-size: 16px; }
.kotda-membership-readonly small { margin-top: 4px; color: #66747e; line-height: 1.5; }

/* footer */
#footer.kotda-footer { padding: 66px 24px 0; color: #d5e0e5; background: #152a36; }
.kotda-footer__inner { display: grid; grid-template-columns: 1.15fr 1.5fr .65fr; gap: 55px; width: min(1240px, 100%); margin: 0 auto; }
.kotda-footer__brand img { width: 340px; max-width: 100%; }
.kotda-footer__brand p { margin: 18px 0 0; color: #aebec6; }
.kotda-footer__info p { margin: 0 0 9px; color: #b9c7ce; line-height: 1.6; }
.kotda-footer__info strong { display: inline-block; min-width: 68px; color: #fff; }
.kotda-footer__info a { color: #d5e0e5; }
.kotda-footer__links { display: flex; gap: 13px; align-items: flex-start; flex-direction: column; }
.kotda-footer__links a { color: #d5e0e5; }
.kotda-footer__bottom { display: flex; align-items: center; justify-content: space-between; width: min(1240px, 100%); min-height: 80px; margin: 40px auto 0; border-top: 1px solid rgba(255,255,255,.12); color: #8fa3ad; font-size: 12px; }
.kotda-top { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: transparent; font-size: 11px; font-weight: 800; }

@media (max-width: 1320px) {
    .kotda-header .kotda-brand { flex-basis: 270px; width: 270px; }
    .kotda-header .kotda-brand a { width: 260px; }
    .kotda-gnb > ul > li { padding: 0 13px; }
    .kotda-gnb > ul > li > a { font-size: 15px; }
    .kotda-account { display: none; }
}

@media (max-width: 1080px) {
    #header-wrap.kotda-header { height: 72px; }
    .kotda-header__inner { width: calc(100% - 32px); }
    .kotda-header .kotda-brand { flex: 0 0 auto; width: 265px; }
    .kotda-header .kotda-brand a { width: 255px; height: 50px; }
    .kotda-gnb { display: none; }
    .kotda-menu-button { position: relative; display: block; width: 40px; height: 40px; margin-left: auto; padding: 8px 5px; border: 0; background: transparent; }
    .kotda-menu-button span { position: absolute; left: 5px; width: 30px; height: 2px; background: #fff; transition: .2s; }
    .kotda-menu-button span:nth-child(1) { top: 10px; }
    .kotda-menu-button span:nth-child(2) { top: 19px; }
    .kotda-menu-button span:nth-child(3) { top: 28px; }
    .kotda-header.is-sub .kotda-menu-button span, body.scrolled .kotda-menu-button span { background: var(--kotda-ink); }
    .kotda-hero { min-height: 700px; padding-top: 120px; }
    .kotda-quick__grid { grid-template-columns: repeat(2, 1fr); }
    .kotda-quick a:nth-child(2) { border-right: 0; }
    .kotda-quick a:nth-child(-n+2) { border-bottom: 1px solid var(--kotda-line); }
    .kotda-about-grid { gap: 45px; }
    .kotda-card-grid { grid-template-columns: repeat(2, 1fr); }
    .kotda-process { grid-template-columns: repeat(3, 1fr); }
    .kotda-process--four { grid-template-columns: repeat(2, 1fr); }
    .kotda-member-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .kotda-shell { width: min(100% - 32px, 1240px); }
    .kotda-section { padding: 78px 0; }
    .kotda-section-head { margin-bottom: 34px; }
    .kotda-section-head p { font-size: 15px; }
    .kotda-header .kotda-brand { width: min(270px, calc(100vw - 90px)); }
    .kotda-header .kotda-brand a { width: 100%; }
    .kotda-hero { min-height: 650px; padding: 110px 0 100px; background-position: 62% center; }
    .kotda-hero::before { background: linear-gradient(90deg, rgba(8,35,52,.80), rgba(12,53,71,.45)); }
    .kotda-hero h1 { font-size: 42px; }
    .kotda-hero__lead { font-size: 16px; }
    .kotda-hero__buttons { align-items: stretch; flex-direction: column; }
    .kotda-quick { margin-top: -40px; }
    .kotda-quick__grid { grid-template-columns: 1fr 1fr; }
    .kotda-quick a { min-height: 95px; padding: 18px 15px; }
    .kotda-quick__icon { flex-basis: 42px; width: 42px; height: 42px; margin-right: 10px; }
    .kotda-quick small { display: none; }
    .kotda-about-grid, .kotda-split, .kotda-system-intro { grid-template-columns: 1fr; }
    .kotda-about-image, .kotda-about-image img { min-height: 370px; }
    .kotda-about-copy h2 { font-size: 37px; }
    .kotda-card-grid, .kotda-info-grid, .kotda-service-grid, .kotda-news-grid, .kotda-ci-box, .kotda-contact-grid { grid-template-columns: 1fr; }
    .kotda-president-photo, .kotda-promo-video { width: 100%; }
    .kotda-greeting-layout { gap: 28px; }
    .kotda-greeting-layout .kotda-president-photo { width: min(100%, 420px); margin: 0 auto; }
    .kotda-map-section { margin-top: 62px; }
    .kotda-google-map { aspect-ratio: 4 / 3; border-radius: 14px; }
    .kotda-ci-lockup-grid, .kotda-ci-system-grid { grid-template-columns: 1fr; }
    .kotda-ci-lockup--wide { grid-column: auto; }
    .kotda-ci-lockup, .kotda-ci-system-item { min-height: 125px; padding: 20px; }
    .kotda-ci-symbol { flex-basis: 80px; width: 80px; height: 86px; background-size: auto 86px; }
    .kotda-ci-wording strong { font-size: 23px; white-space: normal; }
    .kotda-ci-wording small { font-size: 11px; }
    .kotda-ci-symbol-guide { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; min-height: 0; padding: 28px 22px; }
    .kotda-ci-symbol-large { grid-column: 1 / span 2; grid-row: 1; width: 150px; height: 162px; background-size: auto 162px; }
    .kotda-ci-guide-copy--shape, .kotda-ci-guide-copy--blue, .kotda-ci-guide-copy--yellow { grid-row: auto; justify-self: start; text-align: left; }
    .kotda-ci-guide-copy--shape { grid-column: 1; }
    .kotda-ci-guide-copy--blue { grid-column: 2; }
    .kotda-ci-guide-copy--yellow { grid-column: 1 / span 2; }
    .kotda-ci-system-item .kotda-ci-wording strong { font-size: 21px; }
    .kotda-role-card { min-height: auto; }
    .kotda-role-card__no { margin-bottom: 30px; }
    .kotda-sub-visual { min-height: 290px; padding-top: 72px; }
    .kotda-sub-visual__content span { font-size: 14px; }
    .kotda-sub-nav__home { flex-basis: 52px; min-height: 56px; }
    .kotda-sub-nav__links a { min-height: 56px; min-width: auto; padding: 0 17px; }
    .kotda-page { padding: 65px 0 85px; }
    .kotda-page-title { margin-bottom: 38px; }
    .kotda-timeline { padding-left: 32px; }
    .kotda-timeline::before { left: 8px; }
    .kotda-timeline__item { grid-template-columns: 92px 1fr; }
    .kotda-timeline__item::before { left: -31px; }
    .kotda-download-box { align-items: flex-start; flex-direction: column; }
    .kotda-org__second, .kotda-org__branches { grid-template-columns: 1fr; flex-direction: column; }
    .kotda-org__box { width: 100%; min-width: 0; }
    .kotda-member-grid { grid-template-columns: repeat(2, 1fr); }
    .kotda-process { grid-template-columns: 1fr 1fr; }
    .kotda-stat-grid { grid-template-columns: 1fr; }
    .kotda-form-grid { grid-template-columns: 1fr; }
    .kotda-field--full { grid-column: auto; }
    .kotda-panel { padding: 22px 16px; }
    .kotda-panel__head { align-items: flex-start; flex-direction: column; }
    .kotda-footer__inner { grid-template-columns: 1fr; gap: 30px; }
    .kotda-footer__links { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .kotda-header .kotda-brand { width: calc(100vw - 88px); }
    .kotda-hero h1 { font-size: 36px; }
    .kotda-quick__grid, .kotda-member-grid, .kotda-process { grid-template-columns: 1fr; }
    .kotda-quick a { border-right: 0; border-bottom: 1px solid var(--kotda-line); }
    .kotda-quick a:last-child { border-bottom: 0; }
    .kotda-about-image, .kotda-about-image img { min-height: 300px; }
    .kotda-about-image__badge { right: 14px; bottom: 14px; left: 14px; max-width: none; }
    .kotda-timeline__item { grid-template-columns: 1fr; gap: 4px; }
    .kotda-law-list a { align-items: flex-start; flex-direction: column; }
    .kotda-footer__brand img { width: 300px; }
    .kotda-footer__bottom { align-items: flex-start; padding: 22px 0; flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
