/* (주)오렌지디자인 새 홈페이지 v9 — 정적 사이트 스타일 (큰 화면은 1440 설계를 그대로, 휴대폰은 아래 규칙으로 접음) */
@font-face{font-family:'Paperlogy';font-weight:300;src:url(../fonts/Paperlogy-3Light.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:400;src:url(../fonts/Paperlogy-4Regular.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:600;src:url(../fonts/Paperlogy-6SemiBold.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:800;src:url(../fonts/Paperlogy-8ExtraBold.woff2) format('woff2')}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;font-family:'Paperlogy',sans-serif}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
.root-wrap{width:100%;overflow-x:clip}
.mo{display:none}
.m-menu{display:none}
.mbar{display:none}
.dot{display:block;width:71px;padding:0 0 10px;box-sizing:border-box;border:0;border-bottom:1px solid rgba(255,255,255,0.45);background:transparent;font-size:14px;letter-spacing:1px;text-align:left;color:rgba(255,255,255,0.75);cursor:pointer}
.dot.on{font-size:19px;border-bottom:3px solid #FFFFFF;color:#FFFFFF}
.dm{min-width:32px;padding:10px 2px;font-size:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #C2410C;outline-offset:2px}

/* v10z3 머리·메가 메뉴 — 신세계 방식: 머리 선에 붙은 화면 폭 흰 판이 커튼처럼 0.6초에 펼쳐짐, 메뉴 사이는 높이만 늘고 줄며, 메뉴 밑 선이 0.5초로 따라감 */
.nav-a{transition:color .3s ease}
.nav-a:hover,.nav-a.on{color:#C2410C!important}
.navline{position:absolute;left:0;bottom:0;height:2px;width:0;background:#C2410C;opacity:0;pointer-events:none;transition:left .5s cubic-bezier(.215,.61,.355,1),width .5s cubic-bezier(.215,.61,.355,1),opacity .3s ease}
.mega{position:absolute;left:0;top:100%;width:100%;height:0;overflow:hidden;background:#FFFFFF;z-index:45;visibility:hidden;transition:height .6s cubic-bezier(.215,.61,.355,1),visibility 0s linear .6s}
.mega.open{visibility:visible;transition:height .6s cubic-bezier(.215,.61,.355,1),visibility 0s}
/* v13 서브메뉴 — 신세계 실측(2026-10-24, 1440): 묶음 전체가 판의 좌우 가운데(화면 중앙 720), 묶음은 붙어 놓이고 좌우 25px씩 → 글 사이 50px, 위아래 40px, 제목 14px/600/#222 줄 15px 아래 20px, 항목 13px/400/#666 줄 13px 사이 20px, 항목 transition opacity .3s */
.mega-in{text-align:center}
.mega-row{display:inline-flex;gap:0;padding:0;white-space:nowrap;text-align:left;vertical-align:top}
.mega-col{display:block;padding:40px 25px}
.mega-t{font-size:14px;font-weight:600;line-height:15px;margin-bottom:20px;color:#222222}
.mega-i{display:block;font-size:13px;line-height:13px;margin-top:20px;color:#666666;transition:opacity .3s}
.mega-t + .mega-i{margin-top:0}
.mega-i:hover{color:#C2410C}
@media (prefers-reduced-motion:reduce){.mega,.mega.open,.navline,.nav-a,.mega-i{transition:none}}
/* v10z7: 첫 화면(히어로)은 모니터 아래까지 꽉 — 높이 = 화면 높이 − 머리 113 (최소 560). --hh 는 site.js가 넣음 */
@media (min-width:901px){
  .hero-wrap{height:var(--hh,788px)!important}
  .hero-wrap .fbb{height:100%!important}
  .hero-wrap .fbb > div[style*="linear-gradient(90deg"]{height:100%!important}
}
/* v10z4 큰 화면(1441px~): 확대 없이 1배 — 내용은 1440 고정 가운데, 배경·머리 선·히어로 그림 띠만 화면 끝까지. --vw 는 site.js가 스크롤바 뺀 폭으로 넣음 */
@media (min-width:1441px){
  .shell{margin-left:auto;margin-right:auto}
  .fbb,.fbw,.gs{width:var(--vw,100vw)!important;margin-left:calc(50% - var(--vw,100vw) / 2)}
  .fbb[style*="position:absolute"]{margin-left:0;left:0}
  .gs{box-sizing:border-box;padding-left:calc((var(--vw,100vw) - 1280px) / 2)!important;padding-right:calc((var(--vw,100vw) - 1280px) / 2)!important}
  .fbb > [style*="position:absolute"]:not(.fbo){margin-left:calc((var(--vw,100vw) - 1440px) / 2)}
  .fbb > .fbo{width:100%!important;margin-left:0!important}
  .fbb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc((var(--vw,100vw) - 1440px) / 2);background:var(--lp,transparent);pointer-events:none}
  .fbw > .gl{margin-left:calc((var(--vw,100vw) - 1440px) / 2)}
  .fbw > .gr{margin-right:calc((var(--vw,100vw) - 1440px) / 2)}
}
@media (max-width:900px){.mega{display:none!important}.hw{position:static!important}}
@media (max-width:900px){
  .cert-box{align-self:center!important;width:calc(100vw - 40px)!important;max-width:none!important;box-sizing:border-box;text-align:center!important}

  .mo div.grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .mag-cols{flex-direction:row!important;flex-wrap:wrap!important;padding:24px 20px 40px!important;gap:0 12px!important}
  .mag-cols>div{display:contents!important}
  .mag-cols a{width:calc(50% - 6px)!important;box-sizing:border-box}
  .mag-cols a>div:first-child{width:100%!important;height:auto!important;aspect-ratio:1/1}
  .mag-cols a{margin-bottom:30px!important}

  body{padding-bottom:56px}
  .pc{display:none}
  .mo{display:block}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:80;background:#2B2B2B}
  .mbar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:14px}
  .mbar a svg{flex:none}
  /* 공통 틀 */
  [style*="width:1440px"]{width:100%!important}
  [style*="width:1280px"],[style*="width:960px"],[style*="width:760px"]{width:100%!important}
  section,footer{padding-left:20px!important;padding-right:20px!important}
  header#top{padding:0 20px!important;height:56px!important}
  header#top > div:first-child{gap:0!important}
  header#top a[style*="font-size:28px"]{font-size:22px!important}
  header#top nav{display:none!important}
  header#top .hamb{display:block!important}
  header#top span[style*="width:1px"]{display:none!important}
  header#top button[data-act="searchToggle"]{display:none!important}
  header#top button[data-act="applyToggle"]{display:none!important}
  div[style*="height:36px"][style*="border-bottom:1px solid #E5E5E5"]{padding:0 20px!important}
  div[style*="height:36px"][style*="border-bottom:1px solid #E5E5E5"] > div:last-child{display:none!important}
  /* 열리는 층 */
  [data-leave="menuLeave"]:not(header){display:none!important}
  div[style*="position:absolute;left:0;top:100px;width:1440px"]{top:92px!important;padding:20px!important}
  div[style*="position:absolute;right:80px;top:112px;width:400px"]{right:12px!important;left:12px!important;width:auto!important;top:100px!important}
  .m-menu{display:block;position:absolute;left:0;top:92px;width:100%;box-sizing:border-box;background:#FFFFFF;border-top:1px solid #222222;box-shadow:0 18px 30px rgba(0,0,0,0.16);padding:8px 20px 20px;z-index:40;font-size:16px}
  .m-menu a{display:block;padding:14px 0;border-bottom:1px solid #EEEEEE}
  /* 떠 있는 단추: 휴대폰은 아래 한 줄 */
  div[style*="position:sticky;top:0;height:0"]{display:none!important}
  /* 서브 큰 사진 */
  section[style*="height:340px"]{height:220px!important}
  section[style*="height:340px"] h1{font-size:34px!important}
  section[style*="height:340px"] > div[style*="left:80px"]{left:20px!important;bottom:26px!important;right:20px!important}
  section[style*="height:340px"] > div[style*="right:80px"]{display:none!important}
  /* 탭 바 */
  nav[style*="display:flex;background:#2B2B2B"]{overflow-x:auto}
  nav[style*="display:flex;background:#2B2B2B"] a{flex:0 0 auto!important;padding:0 22px!important;white-space:nowrap;height:52px!important}
  /* 격자 */
  [style*="grid-template-columns"]:not([style*="repeat(7,1fr)"]){grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  [style*="repeat(4,minmax"]:not([style*="repeat(7,1fr)"]){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important}
  /* 가로 줄 → 세로 */
  [style*="display:flex;gap:70px"],[style*="display:flex;gap:40px;align-items:flex-start"],[style*="display:flex;gap:56px"]{flex-direction:column!important;gap:24px!important;align-items:stretch!important}
  [style*="display:flex;gap:60px"],[style*="display:flex;gap:50px"]{flex-direction:column!important;gap:10px!important;align-items:flex-start!important}
  [style*="flex:0 0 560px"],[style*="flex:0 0 800px"],[style*="flex:0 0 640px"],[style*="flex:0 0 520px"],[style*="flex:0 0 480px"],[style*="flex:0 0 720px"]{flex:none!important;width:100%!important;height:auto!important;aspect-ratio:16/9}
  [style*="flex:0 0 520px"][style*="height:580px"]{aspect-ratio:auto;height:auto!important}
  [style*="flex:0 0 330px"]{flex:none!important;width:62%!important;height:auto!important;aspect-ratio:9/16;margin:0 auto}
  [style*="flex:0 0 160px"],[style*="flex:0 0 150px"]{flex:none!important}
  [style*="justify-content:space-between"][style*="padding:64px 80px"],section[style*="justify-content:space-between"]{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
  footer > div[style*="display:flex"]{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  /* 글자 */
  footer a[style*="font-size:26px"]{white-space:nowrap}
  footer div[style*="gap:58px"]{flex-direction:column!important;gap:18px!important}
  footer div[style*="flex-direction:column"] > div{flex-wrap:wrap}
  footer div[style*="flex-direction:column"]{gap:6px!important}
  [style*="margin:0 152px;height:1px"]{display:none!important}
  [style*="grid-template-columns"][style*="height:28px"]{display:none!important}
  h2{font-size:30px!important}
  h2[style*="font-size:40px"],h3[style*="font-size:40px"]{font-size:28px!important}
}

.cta-side{position:fixed;right:20px;bottom:34px;z-index:250;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cta-pill{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-end;height:44px;border-radius:999px;font-family:'Paperlogy',sans-serif;white-space:nowrap;box-shadow:0 10px 26px rgba(35,35,35,.22);transition:transform .15s ease,box-shadow .15s ease;overflow:hidden;text-decoration:none}
.cta-label{display:inline-block;max-width:0;opacity:0;padding-left:0;overflow:hidden;font-size:13px;font-weight:600;letter-spacing:-.2px;transition:max-width .28s ease,padding-left .28s ease,opacity .2s ease}
.cta-pill:hover .cta-label,.cta-pill:focus-visible .cta-label{max-width:240px;opacity:1;padding-left:16px}
.cta-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none}
.cta-ico svg{width:20px;height:20px}
.cta-tel,.cta-tel:hover,.cta-tel:visited{background:#F26A1B;border:1px solid #F26A1B;color:#fff!important}
.cta-kakao,.cta-kakao:hover,.cta-kakao:visited{background:#FEE500;border:1px solid #FEE500;color:#191919!important}
.cta-talk,.cta-talk:hover,.cta-talk:visited{background:#03C75A;border:1px solid #03C75A;color:#fff!important}
.cta-pill:hover,.cta-pill:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(35,35,35,.28)}
.cta-pill:focus-visible{outline:2px solid #C2410C;outline-offset:2px}
@media(max-width:820px){.cta-side{display:none}}
@media print{.cta-side{display:none}}

/* v20: 머리글(PC 70px·휴대폰 56px)에 구역 제목이 가려지지 않게 */
[id]{scroll-margin-top:90px}
@media (max-width:900px){[id]{scroll-margin-top:76px}}
@media (max-width:900px){#cats{padding:16px 20px 0!important} #catnote{margin:14px 20px 0!important}}

/* v20 하는 일 큰 사진(휴대폰): 글 묶음과 탭 알약을 위아래로 차례로 놓는다 (스크립트가 height 글자를 auto로 바꾸므로 안쪽 칸 모양으로 찾는다) */
@media (max-width:900px){
  .fbb:has(> div[style*="left:120px;top:110px"]){height:auto!important;aspect-ratio:auto!important;padding:0!important}
  .fbb > div[style*="linear-gradient(90deg"]{height:100%!important;background:linear-gradient(180deg,rgba(14,9,6,0.6),rgba(14,9,6,0.78))!important}
  .fbb > div[style*="left:120px;top:110px"]{position:relative!important;left:auto!important;top:auto!important;width:auto!important;padding:44px 20px 16px;box-sizing:border-box}
  .fbb > div[style*="left:120px;top:110px"] h1{font-size:34px!important;margin-top:14px!important}
  .fbb > div[style*="left:120px;top:110px"] > div[style*="font-size:18px"]{font-size:16px!important;margin-top:18px!important}
  .fbb > div[style*="left:120px;top:110px"] a{height:48px!important;min-width:0!important;font-size:16px!important}
  .fbb > div[style*="left:120px;bottom:34px"]{position:relative!important;left:auto!important;bottom:auto!important;padding:4px 20px 26px;flex-wrap:wrap;box-sizing:border-box}
  .fbb > div[style*="left:120px;bottom:34px"] a{padding:8px 16px!important;font-size:13px!important}
}