@charset "utf-8";
/* ============================================================
   한국법률서비스교육협회 (KLSEA)
   색상·글꼴·모서리 둥글기를 바꾸려면 아래 :root 부분만 고치면
   사이트 전체가 한 번에 바뀝니다.
   ============================================================ */

:root{
  /* 색 */
  --navy:#12335c;          /* 기본 남색 */
  --navy-deep:#0b2138;     /* 진한 남색 (푸터) */
  --navy-soft:#f2f5f9;     /* 아주 연한 남색 배경 */
  --gold:#a8823c;          /* 포인트 (아주 조금만 씁니다) */
  --gold-light:#cfae6f;
  --ink:#16202c;           /* 제목 글자 */
  --body:#4b5766;          /* 본문 글자 */
  --sub:#78838f;           /* 보조 글자 */
  --line:#e7eaee;          /* 경계선 */
  --line-2:#d5dae1;
  --bg:#f7f8fa;
  --white:#fff;

  /* 글꼴 */
  --font:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --head:var(--font);      /* 제목용. 명조로 바꾸려면 'Nanum Myeongjo', serif */

  /* 모양 */
  --r:12px;                /* 카드 모서리 */
  --r-sm:8px;              /* 버튼 모서리 */
  --shadow:0 1px 2px rgba(18,51,92,.04), 0 10px 30px rgba(18,51,92,.06);
  --shadow-up:0 2px 4px rgba(18,51,92,.05), 0 18px 42px rgba(18,51,92,.11);

  --wrap:1180px;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;line-height:1.75;
  color:var(--body);
  background:var(--white);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:700;line-height:1.35;color:var(--ink);letter-spacing:-.03em}
p{margin:0 0 1em}
address{font-style:normal}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
table{border-collapse:collapse;width:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:0;top:-60px;z-index:200;padding:12px 20px;background:var(--navy);color:#fff}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

/* ============================================================
   상단
   ============================================================ */
.utility{border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.utility__links{display:flex;gap:22px}
.utility__links a:hover{color:var(--navy)}

.head{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:border-color .2s}
.head__inner{display:flex;align-items:center;justify-content:space-between;height:78px}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:38px;height:38px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--navy);color:#fff;
  font-weight:800;font-size:15px;letter-spacing:.02em;
}
.brand__text strong{display:block;font-size:18px;color:var(--ink);letter-spacing:-.035em;font-weight:700}
.brand__text em{display:block;font-style:normal;font-size:10.5px;color:var(--sub);letter-spacing:.03em;margin-top:1px}

/* ---------- 주 메뉴 ---------- */
.gnb__list{display:flex;gap:4px}
.gnb__item{position:relative}
.gnb__link{
  display:block;padding:0 20px;line-height:78px;
  font-size:16px;font-weight:500;color:var(--body);
  position:relative;
}
.gnb__link::after{
  content:'';position:absolute;left:20px;right:20px;bottom:26px;height:1.5px;
  background:var(--navy);transform:scaleX(0);transition:transform .22s ease;
}
.gnb__item:hover .gnb__link,
.gnb__item.is-active .gnb__link{color:var(--navy);font-weight:600}
.gnb__item:hover .gnb__link::after,
.gnb__item.is-active .gnb__link::after{transform:scaleX(1)}

.gnb__sub{
  position:absolute;left:50%;top:calc(100% - 8px);transform:translateX(-50%) translateY(6px);
  min-width:184px;padding:8px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-up);
  visibility:hidden;opacity:0;transition:opacity .18s ease, transform .18s ease;
}
.gnb__item:hover .gnb__sub,
.gnb__item:focus-within .gnb__sub{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
.gnb__sub a{display:block;padding:9px 14px;border-radius:var(--r-sm);font-size:15px;color:var(--body);white-space:nowrap}
.gnb__sub a:hover{background:var(--navy-soft);color:var(--navy)}

.navtoggle{display:none;width:44px;height:44px}
.navtoggle span{display:block;height:1.5px;background:var(--ink);margin:6px auto;width:22px;transition:.22s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================================================
   메인 첫 화면 — 가운데 정렬
   사진은 assets/img/hero.jpg 를 넣으면 자동 적용됩니다.
   ============================================================ */
.hero{
  background-color:var(--navy);
  background-image:url(../img/hero.jpg);
  background-size:cover;background-position:center 42%;
  position:relative;
  padding:132px 0 148px;
  text-align:center;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,33,56,.86) 0%,rgba(11,33,56,.78) 55%,rgba(11,33,56,.88) 100%);
}
.hero__inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.hero__rule{width:40px;height:2px;background:var(--gold-light);margin:0 auto 30px}
.hero h1{
  color:#fff;font-weight:800;
  font-size:clamp(30px,4.1vw,50px);line-height:1.32;letter-spacing:-.04em;
  margin-bottom:24px;
}
.hero p{
  font-size:17.5px;line-height:1.85;color:rgba(255,255,255,.76);
  margin:0 auto;max-width:600px;
}
.hero__art{display:none}   /* 정의의 여신 선화 (다시 쓰려면 display:block) */

/* ---------- 바로가기: 히어로 아래에 겹쳐 뜨는 카드 ---------- */
.quick{position:relative;z-index:2;margin-top:-58px}
.quick__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quick__list a{
  display:flex;align-items:flex-start;gap:15px;
  padding:26px 24px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.quick__list a:hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
.quick__list .ic{color:var(--navy);margin-top:2px}
.quick__list a > span{display:block}
.quick__list strong{display:block;font-size:16.5px;color:var(--ink);font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
.quick__list a > span > span{display:block;font-size:14px;color:var(--sub);line-height:1.6}

/* ============================================================
   섹션 공통
   ============================================================ */
.section{padding:100px 0}
.section--gray{background:var(--bg)}
.section__head{margin-bottom:44px;max-width:640px}
.section__head h2{font-size:30px;letter-spacing:-.04em;margin-bottom:12px}
.section__head p{color:var(--sub);margin:0;font-size:16.5px}

/* ---------- 아이콘 ---------- */
.ic{width:26px;height:26px;flex:none;display:block}
.ic .ic-gold{stroke:var(--gold)}

/* ---------- 자격 카드 ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cert-card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-up);border-color:transparent}
.cert-card__photo{
  height:168px;background-color:var(--navy);
  background-size:cover;background-position:center;position:relative;
}
.cert-card__photo::after{
  content:'';position:absolute;inset:0;background:rgba(11,33,56,.28);transition:background .22s ease;
}
.cert-card:hover .cert-card__photo::after{background:rgba(11,33,56,.06)}
.cert-card--1 .cert-card__photo{background-image:url(../img/cert-1.jpg)}
.cert-card--2 .cert-card__photo{background-image:url(../img/cert-2.jpg)}
.cert-card--3 .cert-card__photo{background-image:url(../img/cert-3.jpg)}
.cert-card__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.cert-card__ic{
  width:44px;height:44px;border-radius:11px;margin:-48px 0 18px;
  position:relative;z-index:2;
  background:var(--white);color:var(--navy);
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.cert-card__ic .ic{width:22px;height:22px}
.cert-card__no{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;margin-bottom:7px}
.cert-card h3{font-size:19px;margin-bottom:10px}
.cert-card p{font-size:15px;color:var(--sub);line-height:1.75;flex:1;margin-bottom:16px}
.cert-card__more{font-size:14.5px;color:var(--navy);font-weight:600}
.cert-card:hover .cert-card__more{text-decoration:underline;text-underline-offset:3px}

/* ---------- 핵심 가치 ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 32px}
.value .ic{width:24px;height:24px;color:var(--navy);margin-bottom:16px}
.value h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.025em}
.value p{font-size:15px;color:var(--sub);line-height:1.75;margin:0}

/* ---------- 진위확인 배너 ---------- */
.verify{padding:0 0 100px}
.verify__inner{
  display:flex;align-items:center;gap:26px;
  background:var(--navy);border-radius:var(--r);
  padding:38px 40px;color:#fff;
}
.verify .ic{width:34px;height:34px;color:var(--gold-light);flex:none}
.verify .ic .ic-gold{stroke:#fff}
.verify__txt{flex:1}
.verify__txt strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px;color:#fff}
.verify__txt p{margin:0;font-size:15px;color:rgba(255,255,255,.7);line-height:1.7}

/* ---------- 공지 + 사무국 ---------- */
.board-preview{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start}
.notice-list li + li{border-top:1px solid var(--line)}
.notice-list a{display:flex;justify-content:space-between;gap:20px;padding:16px 2px;align-items:center}
.notice-list a:hover .notice-list__t{color:var(--navy)}
.notice-list__t{font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.notice-list__d{font-size:13.5px;color:var(--sub);flex:none}

.contact-box{background:var(--navy-soft);border-radius:var(--r);padding:32px 30px}
.contact-box h3{font-size:18px;margin-bottom:20px}
.contact-box dl{margin:0;font-size:15px}
.contact-box dt{color:var(--sub);font-size:12.5px;margin-top:15px;letter-spacing:.02em}
.contact-box dd{margin:2px 0 0;color:var(--ink)}
.contact-box .btn{margin-top:26px;width:100%;text-align:center}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;font-size:15.5px;font-weight:600;
  border:1px solid var(--navy);transition:.18s ease;letter-spacing:-.01em;
}
.btn:hover{background:#0e2a4d;border-color:#0e2a4d}
.btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--navy-soft);border-color:var(--navy);color:var(--navy)}

/* ============================================================
   서브페이지
   ============================================================ */
.subhead{
  background-color:var(--navy);
  background-image:url(../img/subhead.jpg);
  background-size:cover;background-position:center 45%;
  position:relative;padding:66px 0;text-align:center;
}
.subhead::before{content:'';position:absolute;inset:0;background:rgba(11,33,56,.84)}
.subhead .wrap{position:relative;z-index:1}
.subhead h1{font-size:34px;color:#fff;letter-spacing:-.04em}
.subhead__path{font-size:13.5px;color:rgba(255,255,255,.6);margin:0 0 12px}
.subhead__path span::after{content:'/';margin:0 9px;color:rgba(255,255,255,.35)}
.subhead__path span:last-child::after{display:none}

.subnav{border-bottom:1px solid var(--line);background:var(--white)}
.subnav ul{display:flex;flex-wrap:wrap;justify-content:center}
.subnav a{display:block;padding:18px 26px;font-size:15.5px;color:var(--sub);border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink)}
.subnav .is-on a{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}

/* ---------- 본문 ---------- */
.content{padding:72px 0 104px;max-width:820px;margin:0 auto}
.content h2{font-size:24px;margin:56px 0 18px}
.content h2:first-child{margin-top:0}
.content h3{font-size:18px;margin:34px 0 12px}
.content p{line-height:1.9}
.content .lead{font-size:19px;line-height:1.85;color:var(--ink);font-weight:500;letter-spacing:-.02em;margin-bottom:28px}
.content ul.dash li{position:relative;padding-left:17px;margin-bottom:10px}
.content ul.dash li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:1.5px;background:var(--gold);border-radius:1px}
.content-photo{height:300px;margin:0 0 40px;border-radius:var(--r);background-color:var(--navy);background-size:cover;background-position:center}
.content-photo--about{background-image:url(../img/about.jpg)}
.sign{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);text-align:right}
.sign strong{font-size:18px;color:var(--ink)}

/* ---------- 표 ---------- */
.table{border-top:1.5px solid var(--ink);font-size:15px}
.table th,.table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{background:var(--bg);color:var(--ink);font-weight:600;width:180px}
.table--center td,.table--center th{text-align:center}
.table--center th{width:auto}

/* ---------- 연혁 ---------- */
.history{border-left:1px solid var(--line);padding-left:34px;margin-left:6px}
.history li{position:relative;padding-bottom:32px}
.history li::before{content:'';position:absolute;left:-39px;top:11px;width:9px;height:9px;background:var(--gold);border-radius:50%}
.history__y{font-size:21px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px;letter-spacing:-.02em}

/* ---------- 조직도 ---------- */
.org{text-align:center}
.org__top{display:inline-block;background:var(--navy);color:#fff;padding:15px 48px;border-radius:var(--r-sm);font-size:17px;font-weight:600}
.org__line{width:1px;height:32px;background:var(--line-2);margin:0 auto}
.org__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.org__box{border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 10px;font-size:15.5px;font-weight:600;color:var(--ink);background:var(--white)}
.org__box span{display:block;font-size:13px;font-weight:400;color:var(--sub);margin-top:4px}

/* ---------- 게시판 ---------- */
.board{border-top:1.5px solid var(--ink);font-size:15px}
.board th{background:var(--bg);padding:14px;font-size:13.5px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.board td{padding:17px 14px;border-bottom:1px solid var(--line);text-align:center;color:var(--sub)}
.board td.subject{text-align:left;color:var(--ink)}
.board tr:hover td{background:var(--bg)}
.board .tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;background:var(--navy-soft);color:var(--navy);font-weight:600;margin-right:9px}

.paging{display:flex;justify-content:center;gap:6px;margin-top:40px}
.paging a,.paging strong{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14px;font-weight:500}
.paging a:hover{border-color:var(--navy);color:var(--navy)}
.paging strong{background:var(--navy);color:#fff;border-color:var(--navy)}

.view__head{border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);padding:28px 4px}
.view__head h2{font-size:21px;margin:0 0 10px}
.view__meta{font-size:14px;color:var(--sub);margin:0}
.view__body{padding:36px 4px;min-height:220px;line-height:1.9;border-bottom:1px solid var(--line)}

/* ---------- 폼 ---------- */
.form{border-top:1.5px solid var(--ink)}
.form__row{display:flex;border-bottom:1px solid var(--line)}
.form__label{width:180px;flex:none;padding:18px 18px;font-weight:600;color:var(--ink);font-size:15px}
.form__label .req{color:#c0392b;margin-left:3px}
.form__field{flex:1;padding:12px 18px 14px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;max-width:440px;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);font-family:inherit;font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.form textarea{max-width:100%;min-height:180px;resize:vertical;line-height:1.7}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(18,51,92,.08);
}
.form__help{font-size:13px;color:var(--sub);margin:7px 0 0}
.agree{margin:26px 0;padding:22px;border-radius:var(--r);background:var(--bg);font-size:14px;line-height:1.75}
.agree p{margin:0}
.agree label{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-weight:600;color:var(--ink)}
.form__submit{text-align:center;margin-top:34px}
.hp{position:absolute;left:-9999px}

.msg{padding:15px 20px;border-radius:var(--r-sm);margin-bottom:26px;font-size:15px}
.msg--ok{background:#eef5ef;color:#2b5c33}
.msg--err{background:#fbeeed;color:#8e2b20}

.result{text-align:center;padding:80px 20px}
.result h2{font-size:26px;margin-bottom:14px}
.result p{color:var(--sub)}

/* ---------- 푸터 ---------- */
.foot{background:var(--navy-deep);color:rgba(255,255,255,.55);padding:52px 0;font-size:14px}
.foot__brand strong{display:block;font-size:17px;color:#fff;letter-spacing:-.035em;font-weight:700}
.foot__brand span{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.03em}
.foot__info{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 24px;line-height:1.6}
.foot__info a:hover{color:#fff}
.foot__copy{margin:24px 0 0;font-size:13px;color:rgba(255,255,255,.3)}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1000px){
  .certs{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr;gap:32px 28px}
  .board-preview{grid-template-columns:1fr;gap:44px}
  .quick__list{grid-template-columns:1fr}
  .quick{margin-top:-40px}
}
@media (max-width:820px){
  .utility{display:none}
  .head__inner{height:62px}
  .navtoggle{display:block}
  .gnb{
    position:absolute;left:0;right:0;top:62px;background:var(--white);
    border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .gnb.is-open{max-height:70vh;overflow-y:auto;box-shadow:var(--shadow-up)}
  .gnb__list{display:block;gap:0}
  .gnb__link{line-height:1.5;padding:16px 24px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
  .gnb__link::after{display:none}
  .gnb__sub{
    position:static;transform:none;visibility:visible;opacity:1;
    background:var(--bg);border:0;border-radius:0;box-shadow:none;padding:6px 0;
  }
  .gnb__sub a{padding:11px 38px;border-radius:0}
  .gnb__sub a:hover{background:none}
  .hero{padding:78px 0 96px}
  .section{padding:64px 0}
  .verify{padding-bottom:64px}
  .verify__inner{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 26px}
  .content{padding:48px 0 76px}
  .content-photo{height:200px}
  .subhead{padding:44px 0}
  .subhead h1{font-size:26px}
  .subnav ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
  .subnav a{padding:15px 18px;font-size:15px;white-space:nowrap}
  .form__row{display:block}
  .form__label{width:auto;padding-bottom:0}
  .table th{width:108px;padding:14px 12px}
  .table td{padding:14px 12px}
  .board .hide-m{display:none}
  .org__row{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .certs{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
}