/* ==================================================
   sub.css - 서브 페이지 공통 (시안 02~06)
   ================================================== */

/* 서브 히어로 */
.sub-hero{position:relative;overflow:hidden;color:#fff;background:var(--navy) center/cover no-repeat;display:flex;align-items:center;min-height:300px}
.sub-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,42,91,.78) 0%,rgba(11,42,91,.45) 55%,rgba(11,42,91,.1) 100%)}
.sub-hero .inner{position:relative;z-index:1;width:100%;padding-top:64px;padding-bottom:64px}
.sub-hero .en{display:block;font-size:13px;font-weight:700;color:#9FD0FF;letter-spacing:.14em;margin-bottom:10px}
.sub-hero h2{font-size:38px;line-height:1.3;letter-spacing:-.03em;font-weight:800;max-width:620px}
.sub-hero p{margin-top:14px;font-size:16px;color:rgba(255,255,255,.85);max-width:520px}
.sub-hero.h-company{background-image:var(--img-company)}
.sub-hero.h-business{background-image:var(--img-business)}
.sub-hero.h-contact{background-image:var(--img-contact)}
.sub-hero.h-business::before,.sub-hero.h-contact::before{background:linear-gradient(90deg,rgba(14,22,40,.8) 0%,rgba(14,22,40,.45) 60%,rgba(14,22,40,.15) 100%)}

/* 라이트 히어로 (ONAI / COMMUNITY) */
.sub-hero.light{background:linear-gradient(115deg,#E4EFFF 0%,#CFE2FD 100%);color:var(--navy)}
.sub-hero.light::before{display:none}
.sub-hero.light .en{color:var(--blue)}
.sub-hero.light p{color:var(--ink-2)}
.sub-hero.light .inner{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.sub-hero.light .pic img{width:100%;height:auto;display:block;max-height:340px;object-fit:contain}
.sub-hero.light .btn-group{margin-top:26px}
.sub-hero.low{min-height:220px}
.sub-hero.low .inner{padding-top:48px;padding-bottom:48px}

.sub-sec{padding:72px 0}
.sub-sec.gray{background:var(--bg)}
.sub-sec .sec-head h2{font-size:28px}
.sec-title{font-size:26px;color:var(--navy);letter-spacing:-.02em;font-weight:800;margin-bottom:24px}

/* COMPANY */
.intro{max-width:860px}
.intro p{font-size:16px;color:var(--ink);line-height:1.9}
.intro p+p{margin-top:12px}
.area{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.area li{text-align:center;padding:8px 20px}
.area .ring{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;border:2px solid #CFE0FA;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px #F1F6FE}
.area .ring svg{width:38px;height:38px;stroke:var(--blue)}
.area li strong{display:block;font-size:18px;color:var(--navy);margin-bottom:8px}
.area li span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.banner{position:relative;color:#fff;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--img-kids) center/cover no-repeat}
.banner::before{content:"";position:absolute;inset:0;background:rgba(40,28,20,.35)}
.banner h2{position:relative;font-size:28px;letter-spacing:-.02em;line-height:1.45;padding:0 20px}

/* ONAI 주요 기능 */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat li{background:#fff;border:1px solid #E3EAF5;border-radius:var(--radius);padding:30px 24px;text-align:center;box-shadow:0 6px 20px rgba(11,42,91,.05)}
.feat .fi{width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--sky);border-radius:14px}
.feat .fi svg{width:28px;height:28px;stroke:var(--blue)}
.feat li h3{font-size:17px;color:var(--navy);margin-bottom:8px}
.feat li p{color:var(--ink-2);font-size:14px;line-height:1.65}

/* CTA 밴드 */
.cta-band{background:var(--navy);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{font-size:28px;letter-spacing:-.02em}
.cta-band p{margin-top:10px;font-size:16px;color:rgba(255,255,255,.8)}
.cta-band .btn-group{justify-content:center;margin-top:24px}

/* BUSINESS : 이미지 카드 2x2 */
.biz-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.biz-list li{background:#fff;border:1px solid #E3EAF5;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 20px rgba(11,42,91,.06)}
.biz-list .th{height:170px;background:center/cover no-repeat}
.biz-list li:nth-child(1) .th{background-image:var(--img-biz1)}
.biz-list li:nth-child(2) .th{background-image:var(--img-biz2)}
.biz-list li:nth-child(3) .th{background-image:var(--img-biz3)}
.biz-list li:nth-child(4) .th{background-image:var(--img-biz4)}
.biz-list .tx{padding:20px 22px 24px}
.biz-list h3{font-size:19px;color:var(--navy);margin-bottom:6px}
.biz-list p{color:var(--ink-2);font-size:14.5px}
.biz-list .go{display:none}

/* CONTACT : 좌 오시는길 / 우 문의 폼 */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info dl{display:grid;grid-template-columns:24px 1fr;row-gap:12px;column-gap:10px;font-size:15px;margin-top:20px}
.contact-info dl dt{color:var(--blue);padding-top:2px}
.contact-info dl dt svg{width:18px;height:18px;stroke:var(--blue)}
.contact-info dl dd{min-width:0;word-break:break-all}
.contact-info dd a:hover{color:var(--blue);text-decoration:underline}
.contact-info .btn{margin-top:20px}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:260px;background:var(--bg)}
.map iframe{width:100%;height:100%;border:0}
.inq-form .fld{margin-bottom:14px}
.inq-form label.lb{display:block;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.inq-form label.lb .req{color:#E5484D;margin-left:3px}
.inq-form .inp,.inq-form .sel{height:44px}
.inq-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inq-form .txa{min-height:130px}
.inq-form .btn{width:100%;margin-top:8px}

/* COMMUNITY 탭 (밑줄형, 2분할) */
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:28px;border-bottom:1px solid var(--line)}
.tabs a{text-align:center;padding:14px 8px;font-weight:700;color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on,.tabs a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.paging a,.paging strong{border-radius:6px}
.paging strong{background:var(--blue);border-color:var(--blue)}
.list-tbl th{border-top:1px solid var(--navy);background:#fff}

/* 비밀번호 확인 박스 */
.pw-box{max-width:420px;margin:40px auto;background:var(--bg);border-radius:var(--radius);padding:40px;text-align:center}
.pw-box p{color:var(--ink-2);margin-bottom:18px}
.pw-box .inp{margin-bottom:12px;text-align:center}

/* 개인정보처리방침 */
.policy h3{margin-top:32px;font-size:20px;color:var(--navy)}
.policy p,.policy li{margin-top:10px;color:var(--ink);line-height:1.8}
.policy ul li{padding-left:14px;position:relative}
.policy ul li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}

/* ---------- 사진 적용 시 (data-photo 이미지가 있을 때 JS가 .has-photo 부여) ---------- */
.sub-hero.has-photo{background-image:var(--photo);color:#fff}
.sub-hero.has-photo::before{display:block;background:linear-gradient(90deg,rgba(11,42,91,.78) 0%,rgba(11,42,91,.45) 55%,rgba(11,42,91,.12) 100%)}
.sub-hero.h-business.has-photo::before,.sub-hero.h-contact.has-photo::before{background:linear-gradient(90deg,rgba(14,22,40,.8) 0%,rgba(14,22,40,.45) 60%,rgba(14,22,40,.15) 100%)}
/* 밝은 사진(온아이·커뮤니티) : 왼쪽을 흰색으로 흐리고 글자는 네이비 유지 */
.sub-hero.light.has-photo{color:var(--navy);background-repeat:no-repeat;background-size:cover;background-position:center right}
@media (min-width:768px){.sub-hero.light.has-photo.h-wide{background-size:118% auto;background-position:0% 35%}}
.sub-hero.light.has-photo::before{display:block;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 40%,rgba(255,255,255,0) 75%)}
.sub-hero.light.has-photo .en{color:var(--blue)}
.sub-hero.light.has-photo p{color:var(--ink-2)}
.sub-hero.light.has-photo .pic{display:none}
.sub-hero.light.has-photo .inner{grid-template-columns:1fr}
.banner.has-photo{background-image:var(--photo);background-position:center 30%}
.biz-list li:nth-child(n) .th.has-photo,.biz .card:nth-child(n) .th.has-photo{background-image:var(--photo)}
.biz-list .th.has-photo,.biz .card .th.has-photo{background-position:center 62%}
.biz-list li:nth-child(3) .th.has-photo,.biz .card:nth-child(3) .th.has-photo{background-position:center 30%}