/* oodot.top 새 홈 — 'oodot 리디자인' 시안의 공통 CSS (2026-10-09)
 * 화면 대부분의 꾸밈은 시안 그대로 style="" 속성에 있다. 여기에는 반응형·hover·포커스처럼
 * 속성으로 쓸 수 없는 것만 둔다. 화면별 규칙은 아래쪽에 화면 이름으로 묶었다. */

[hidden]{display:none!important}
body{margin:0;background:#ffffff}
a{color:#1c4fd8}a:hover{color:#1740ad}
.od{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;color:#1d1d1f;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
.od *{box-sizing:border-box}
.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.ln{color:inherit;text-decoration:none}
.ln:hover{color:#1d1d1f;text-decoration:underline;text-underline-offset:3px}
.od a:focus-visible,.od button:focus-visible,.od input:focus-visible{outline:2px solid #2a64f6;outline-offset:2px}
.btn-pri:hover{filter:brightness(.92)}
.acct-sc:hover{color:#1d1d1f;background:#f5f5f7}.acct-sc:hover>span:first-child{background:#ebebef}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:10px;background:#1d1d1f;color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}
main{display:block}

/* 상단바 · 바닥 */
.nav-links{display:flex}
.menu-btn{display:none}
.drawer{display:none}
.foot-cols{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:32px}
.hide-sm{}
@media (max-width:1080px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.nav-links{display:none}.menu-btn{display:inline-flex}.drawer{display:flex}}
.site-head a,.site-head button{white-space:nowrap}
@media (max-width:760px){.hub-link{display:none!important}.head-logout{display:none!important}}

/* 목록 줄 · 글 링크 */
.row-link{color:#1d1d1f;text-decoration:none}
.row-link:hover .row-title{text-decoration:underline;text-underline-offset:3px}
.post{color:#1d1d1f;text-decoration:none}
.post:hover .post-title{text-decoration:underline;text-underline-offset:3px}
.pill{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 18px;border-radius:999px;border:1px solid #e1e1e6;background:#ffffff;color:#3a3a40;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.pill:hover{color:#1d1d1f;border-color:#cfcfd6}
.pill[aria-selected="true"],.pill[aria-pressed="true"],.pill[aria-current="page"]{border-color:#1d1d1f;background:#1d1d1f;color:#ffffff;font-weight:600}
.pill .cnt{color:#8a8a90;font-variant-numeric:tabular-nums}
.pill[aria-selected="true"] .cnt,.pill[aria-current="page"] .cnt{color:inherit;opacity:.7}
.pill--sm{height:36px;padding:0 16px}
.search:focus-within{border-color:#1d1d1f!important}
.search input:focus{outline:none}
.search input::-webkit-search-cancel-button{cursor:pointer}

/* 홈 */
.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
/* 배너 — 1200 × 300 대지를 그림처럼 그대로 줄인다(2026-10-09 사용자 요청, 10-10 600 → 300). 폭이 바뀌어도 배치는 같고
 * 글자·여백·그림·버튼이 모두 배너 폭에 비례한다. 1cqw = 대지의 12px. 폭마다 다른 규칙을 두지 않는다.
 * 제목은 36px — 휴대폰(배너 폭 358)에서는 약 11px 이 된다(10-10 사용자가 PC 쪽 균형을 골랐다). */
.promo-frame{aspect-ratio:4/1;container-type:inline-size;border-radius:1.67cqw!important}
.promo-frame .slide{position:absolute;inset:0;padding:2.67cqw 4.67cqw}
.promo-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.33cqw;align-items:center;height:100%}
.promo-art{max-height:100%;overflow:hidden}
/* 넘김 — 배너 폭만큼 옆으로 밀어 바꾼다. 쉬는 배너는 보이지 않게 둔다(site.js 가 is-off 를 붙였다 뗀다) */
.promo-frame .slide{transition:transform .6s cubic-bezier(.32,.72,0,1);will-change:transform}
.promo-frame .slide.is-off{visibility:hidden}
@media (prefers-reduced-motion:reduce){.promo-frame .slide{transition:none}}
/* 그림 한 장·HTML 배너 — 여백 없이 대지 전체를 쓴다. HTML 은 1200 × 300 대지에 짠 것을 배너 폭에 맞춰 줄인다(site.js 가 --bn-scale) */
.promo-frame .slide.slide--bare{padding:0;overflow:hidden}
.bn-img{position:absolute;inset:0;display:block}
.bn-html{position:absolute;left:0;top:0;width:1200px;height:300px;overflow:hidden;transform-origin:0 0;transform:scale(var(--bn-scale,0))}
.bn-cover{position:absolute;inset:0}
.pt-eb{font-size:1.17cqw}
/* 제목은 슬로건(64px)보다 한참 작게 — 배너가 첫 화면의 슬로건·계정 카드를 묻지 않게(2026-10-10 52 → 36) */
.pt-h{font-size:3cqw!important;line-height:1.22!important;margin:.83cqw 0 0}
.pt-btn{height:3.33cqw;padding:0 1.5cqw;margin-top:1.83cqw;font-size:1.17cqw;gap:.67cqw!important}
.pt-btn svg{width:1cqw;height:1cqw}
/* 짜임 rise·split — 올린 실제 화면을 휴대폰 화면처럼 놓고 배너 아래 끝에서 자른다(2026-10-10) */
.pt-shot{position:absolute;overflow:hidden;border-radius:2cqw 2cqw 0 0;background:#ffffff;box-shadow:0 1.33cqw 3.33cqw rgba(0,0,0,.2)}
.pt-shot img{display:block;width:100%}
.slide--rise .pt-shot{right:4.67cqw;top:3.33cqw;bottom:-2cqw;width:25cqw;border:.5cqw solid #ffffff;border-bottom:0}
.promo-frame .slide.slide--split{padding:0}
.slide--split .promo-slide{grid-template-columns:minmax(0,1fr) 43.33cqw;gap:0}
.slide--split .pt-text{padding:0 4.67cqw}
.pt-panel{position:relative;height:100%;overflow:hidden}
.pt-panel .pt-shot{left:50%;transform:translateX(-50%);top:3cqw;bottom:-2cqw;width:20.83cqw;box-shadow:0 1.33cqw 3.33cqw rgba(0,0,0,.12)}
/* 넘김 단추 — 배너 밖 오른쪽 아래(2026-10-10). 대지와 같이 줄지 않는다 */
.pt-ctrl button{position:relative}
.pt-ctrl button::after{content:"";position:absolute;inset:-4px}
.pt-ctrl button:hover{background:#ededf0!important}
.pt-art-gap{gap:.83cqw!important}
.pt-art-card{padding:1cqw 1.67cqw!important;border-radius:1.33cqw!important}
.pt-art-card b{font-size:1.5cqw!important}
.pt-art-card i{font-size:1.33cqw!important;font-style:normal}
.pt-art-tile{aspect-ratio:auto!important;height:6.67cqw;border-radius:1.33cqw!important;padding:1.17cqw!important;font-size:1.25cqw!important}
.pt-art-tile .dot{width:.83cqw!important;height:.83cqw!important}
.pt-art-sw{border-radius:1.5cqw!important;padding:1.17cqw!important;font-size:1cqw!important}
.pt-art-sw.h1{height:15cqw!important}.pt-art-sw.h2{height:11.67cqw!important}.pt-art-sw.h3{height:8.33cqw!important}
.pt-art-sw big{font-size:3.5cqw!important}
.pt-art-sw span{font-size:1cqw!important}
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
@media (max-width:960px){.hero{grid-template-columns:minmax(0,1fr);gap:40px}.board{grid-template-columns:minmax(0,1fr);gap:64px}}
@media (max-width:760px){.hide-sm{display:none!important}}

/* 홈 — 휴대폰(2026-10-10 사용자 요청 "PC보다 적은 정보를 보여줘도 괜찮다"). 순서는 PC 와 같고 덜어 낸다.
 * 슬로건만 작게 · 소개 글·브랜드 소개 링크·두 번째부터의 소식 뺌 · 공지 3개.
 * 배너는 건드리지 않는다 — 휴대폰에서도 대지를 그림처럼 줄여 관리 화면 미리 보기와 같게(사용자 규칙, 10-10 어겼다가 되돌림). */
@media (max-width:640px){
.home .home-m-hide{display:none!important}
.home-top{padding-top:20px!important;padding-bottom:28px!important}
.home-h1{font-size:30px!important;line-height:1.2!important;margin-bottom:20px!important}
.home .hero{gap:0}
.home .hero>aside{padding:18px 20px!important;border-radius:18px!important}
.home section[data-promo]{padding-bottom:8px!important}
.home-board{padding-top:28px!important;padding-bottom:40px!important}
.home .board{gap:32px}
.home-board h2{font-size:20px!important}
.home-board ul{margin-top:8px!important;border-top-color:#e1e1e6!important}
.home [data-home-notices] li:not([data-empty]):nth-child(n+4){display:none}
.home [data-home-notices] .row-link{min-height:52px!important;padding:12px 0!important;gap:10px!important}
.home [data-home-notices] .row-title{font-size:15px!important}
.od:has(main.home) footer>.wrap{padding-top:28px!important;padding-bottom:28px!important}
.od:has(main.home) .foot-cols>div:not(:first-child),.od:has(main.home) .foot-cols p{display:none}
.od:has(main.home) footer .foot-cols+div{margin-top:20px!important;padding-top:16px!important}
}

/* 브랜드 소개 */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.logo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.side{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:960px){.side{grid-template-columns:minmax(0,1fr);gap:24px}.side>div:empty{display:none}.logo-grid{grid-template-columns:minmax(0,1fr)}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div{padding:28px 16px!important}.stats>div:nth-child(odd){padding-left:0!important;border-left:0!important}.stats>div:nth-child(n+3){border-top:1px solid #e1e1e6}}
@media (max-width:640px){.principles{grid-template-columns:minmax(0,1fr)}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-grid>div:first-child{min-height:300px!important}}

/* 공지 · 고객지원 */
.narrow{max-width:960px;margin:0 auto}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qk{color:#1d1d1f;text-decoration:none}
.qk:hover{border-color:#cfcfd6!important;background:#fbfbfd!important}
.faq-q{width:100%;text-align:left;border:0;background:transparent;font:inherit;cursor:pointer;color:#1d1d1f}
.faq-q:hover .faq-t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.quick{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.n-no{display:none!important}.faq-a{padding:0 0 22px 0!important}.faq-q .faq-c{width:auto!important}}

/* 글 본문(공지·소식) — 본문은 관리자가 쓴 HTML 이라 꾸밈을 여기서 준다 */
.article{max-width:760px;margin:0 auto}
.article--post{max-width:720px}
.prose{display:grid;gap:22px;font-size:17px;line-height:1.8;color:#2e2e33}
.prose p,.prose ul,.prose ol{margin:0}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose h2{margin:20px 0 0;font-size:21px;line-height:1.4;letter-spacing:-0.02em;font-weight:700;color:#1d1d1f}
.prose .tbl{overflow-x:auto;border:1px solid #e1e1e6;border-radius:14px}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose thead{background:#f5f5f7;text-align:left}
.prose th{padding:14px 18px;font-weight:650}
.prose td{padding:14px 18px;border-top:1px solid #e1e1e6}
.prose td.old{color:#6e6e73}
.prose td.new{font-weight:600}
.prose .note{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:14px;background:#eef3ff;color:#163683;font-size:15px;line-height:1.65}
.prose .note::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.prose .note-gray{padding:22px 24px;border-radius:16px;background:#f5f5f7;font-size:16px;line-height:1.7;color:#3a3a40}
.prose--post{gap:24px;font-size:18px;line-height:1.85}
.prose--post h2{margin-top:16px;font-size:24px}
.btn-blue{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;background:#2a64f6;color:#ffffff!important;font-size:15px;font-weight:650;text-decoration:none}
.btn-blue::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-blue:hover{filter:brightness(.92)}

/* 소식 */
.lead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
@media (max-width:960px){.lead{grid-template-columns:minmax(0,1fr);gap:20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}}

/* 약관 */
.toc a{color:#5a5a61;text-decoration:none}
.toc a:hover{color:#1d1d1f;background:#f5f5f7}
@media (max-width:960px){.toc{display:none!important}}

/* 알림(복사했습니다) */
@keyframes toast-in{0%{opacity:0;transform:translate(-50%,16px)}12%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
.toast.is-on{animation:toast-in 2.4s cubic-bezier(.2,.8,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.toast.is-on{animation:none;transform:translate(-50%,0)}}