/* 제이씨로고스 공통 스타일. index.html 과 notices/index.html 이 함께 쓴다.
   디자인을 바꾸려면 이 파일 한 곳만 고치면 두 페이지에 모두 반영된다. */
  :root{
    --ink:#0f1c33; --ink-soft:#33405a; --body:#4a5568;
    --gold:#b4914f; --gold-soft:#c9a86a;
    --line:#e4e7ee; --bg:#ffffff; --bg-alt:#f7f8fb;
    --max:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI",Roboto,
                "Noto Sans KR","Malgun Gothic",sans-serif;
    color:var(--body); background:var(--bg);
    line-height:1.75; -webkit-font-smoothing:antialiased; word-break:keep-all;
  }
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  a{color:inherit;text-decoration:none}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{display:flex;align-items:baseline;gap:10px;color:var(--ink)}
  .logo b{font-size:20px;font-weight:800;letter-spacing:-.02em}
  .logo span{font-size:12px;letter-spacing:.22em;color:var(--gold);font-weight:600}
  .nav ul{display:flex;gap:34px;list-style:none;font-size:15px;font-weight:500;color:var(--ink-soft)}
  .nav ul a:hover{color:var(--gold)}
  @media(max-width:760px){.nav ul{display:none}}

  /* ---------- hero ---------- */
  .hero{
    background:linear-gradient(160deg,#0f1c33 0%,#1b2c4c 55%,#24365c 100%);
    color:#fff;position:relative;overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;
    border-radius:50%;background:radial-gradient(circle,rgba(201,168,106,.22),transparent 65%);
  }
  .hero .wrap{padding-top:112px;padding-bottom:112px;position:relative;z-index:1}
  .eyebrow{
    display:inline-block;font-size:12px;letter-spacing:.28em;font-weight:600;
    color:var(--gold-soft);border:1px solid rgba(201,168,106,.4);
    padding:7px 16px;border-radius:999px;margin-bottom:28px;
  }
  .hero h1{
    font-size:clamp(32px,5.4vw,54px);font-weight:800;color:#fff;
    letter-spacing:-.03em;line-height:1.3;margin-bottom:22px;
  }
  .hero p{font-size:clamp(15px,2vw,18px);color:#c3ccdd;max-width:640px}
  .hero .cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-block;padding:14px 30px;border-radius:6px;font-weight:600;font-size:15px;
    transition:.2s;
  }
  .btn-p{background:var(--gold);color:#0f1c33}
  .btn-p:hover{background:var(--gold-soft)}
  .btn-s{border:1px solid rgba(255,255,255,.32);color:#fff}
  .btn-s:hover{background:rgba(255,255,255,.09)}

  /* ---------- sections ---------- */
  section{padding:104px 0}
  .alt{background:var(--bg-alt)}
  .shead{margin-bottom:56px;max-width:720px}
  .shead .tag{
    font-size:12px;letter-spacing:.24em;font-weight:700;color:var(--gold);
    display:block;margin-bottom:16px;
  }
  .shead h2{
    font-size:clamp(26px,3.6vw,36px);font-weight:800;color:var(--ink);
    letter-spacing:-.025em;line-height:1.4;
  }
  .shead p{margin-top:18px;font-size:16px}

  .grid{display:grid;gap:24px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
  @media(max-width:880px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr;gap:40px}}

  .card{
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px 30px;
    transition:.22s;
  }
  .card:hover{border-color:var(--gold-soft);transform:translateY(-3px);
              box-shadow:0 14px 34px rgba(15,28,51,.07)}
  .card .num{
    font-family:Georgia,serif;font-size:13px;font-weight:700;color:var(--gold);
    letter-spacing:.12em;display:block;margin-bottom:14px;
  }
  .card h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
  .card p{font-size:15px}

  .lede{font-size:17px;color:var(--ink-soft);font-weight:500;margin-bottom:22px;line-height:1.85}

  .facts{border-top:1px solid var(--line);margin-top:8px}
  .facts div{display:flex;gap:20px;padding:17px 2px;border-bottom:1px solid var(--line);font-size:15px}
  .facts dt{flex:0 0 108px;color:var(--ink);font-weight:700}
  .facts dd{color:var(--body)}

  /* ---------- footer ---------- */
  footer{background:#0f1c33;color:#9aa6bd;padding:64px 0 44px;font-size:14px}
  .flogo{display:flex;align-items:baseline;gap:10px;margin-bottom:26px}
  .flogo b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em}
  .flogo span{font-size:11px;letter-spacing:.22em;color:var(--gold-soft);font-weight:600}
  .finfo{display:flex;flex-wrap:wrap;gap:8px 26px;line-height:1.9}
  .finfo b{color:#c9d1e0;font-weight:600;margin-right:7px}
  .fbot{
    margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
    font-size:13px;color:#6d7a92;
  }

/* ---------- 공지사항 게시판 (2026-08-27) ---------- */
/* 목록/상세 두 화면을 한 파일에서 해시 라우팅으로 전환한다. 정적 호스팅이라
   서버 라우팅이 없어서, #/notice/1 같은 해시로 딥링크를 만든다. */
.subhero{background:linear-gradient(160deg,#0f1c33 0%,#1b2c4c 100%);color:#fff}
.subhero .wrap{padding:74px 24px 66px}
.subhero .tag{font-size:12px;letter-spacing:.24em;font-weight:700;color:var(--gold-soft);
              display:block;margin-bottom:14px}
.subhero h1{font-size:clamp(26px,4vw,38px);font-weight:800;color:#fff;letter-spacing:-.025em}
.subhero p{margin-top:14px;color:#c3ccdd;font-size:16px}

.tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.tabs button{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:9px 20px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);transition:.18s;
}
.tabs button:hover{border-color:var(--gold-soft);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:4px;white-space:nowrap;
}
.badge.notice{background:#eef1f7;color:#33405a}
.badge.official{background:#f4ecdc;color:#8a6a2b}
.pin{color:var(--gold);font-size:12px;font-weight:700;margin-right:6px}

.board{border-top:2px solid var(--ink)}
.row{
  display:grid;grid-template-columns:84px 1fr 108px;gap:18px;align-items:center;
  padding:20px 6px;border-bottom:1px solid var(--line);transition:.15s;
}
.row:hover{background:var(--bg-alt)}
.row .ttl{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.55}
.row:hover .ttl{color:var(--gold)}
.row .date{font-size:14px;color:#8b95a8;text-align:right;font-variant-numeric:tabular-nums}
.row .clip{font-size:12px;color:#8b95a8;margin-left:8px}
@media(max-width:700px){
  .row{grid-template-columns:1fr;gap:9px;padding:18px 4px}
  .row .date{text-align:left}
}

.empty{padding:70px 0;text-align:center;color:#8b95a8;font-size:15px}

.pager{display:flex;justify-content:center;gap:6px;margin-top:38px;flex-wrap:wrap}
.pager button{
  font:inherit;font-size:14px;min-width:38px;height:38px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:5px;
}
.pager button:hover:not(:disabled){border-color:var(--gold-soft)}
.pager button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.pager button:disabled{opacity:.4;cursor:default}

.post{border-top:2px solid var(--ink)}
.post-head{padding:30px 4px 24px;border-bottom:1px solid var(--line)}
.post-head h2{font-size:clamp(21px,3vw,28px);font-weight:800;color:var(--ink);
              letter-spacing:-.025em;line-height:1.45;margin:14px 0 12px}
.post-meta{font-size:14px;color:#8b95a8}
.post-body{padding:38px 4px 42px;font-size:16px;line-height:1.9;color:var(--body)}
.post-body p{margin-bottom:18px}
.post-body p:last-child{margin-bottom:0}
.post-body h3{font-size:19px;color:var(--ink);font-weight:700;margin:30px 0 12px}
.post-body ul,.post-body ol{margin:0 0 18px 20px}
.post-body li{margin-bottom:8px}
.post-body a{color:var(--gold);text-decoration:underline}
.post-body table{border-collapse:collapse;width:100%;margin-bottom:18px;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.post-body th{background:var(--bg-alt);color:var(--ink);font-weight:700}

.attach{border-top:1px solid var(--line);padding:22px 4px;font-size:15px}
.attach b{color:var(--ink);display:block;margin-bottom:10px;font-size:14px}
.attach a{color:var(--ink-soft);text-decoration:underline;display:block;margin-bottom:7px}
.attach a:hover{color:var(--gold)}

.post-nav{display:flex;justify-content:center;padding:34px 0 0;border-top:1px solid var(--line);margin-top:4px}