/* 설하 주식회사 사내 안내
   사내 문서처럼. 장식은 넣지 않고 선과 여백으로만 나눈다. */

:root{
  --ci:#12595c;
  --ink:#1a1f23;
  --ink-2:#4a545c;
  --ink-3:#78838c;
  --line:#d3d9de;
  --line-2:#e6eaee;
  --bg:#eceff2;
  --panel:#fff;
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }   /* .sheet 가 display:flex 라 속성만으론 안 숨는다 */

html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.75 "Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  word-break:keep-all; overflow-wrap:anywhere;
}
a{ color:inherit }
img{ max-width:100% }

/* 고정폭 글꼴은 쓰지 않는다. 한글 글자가 없어서 '사수 나세린' 같은 줄이
   낱자로 벌어진다 — 숫자만 tabular-nums 로 자리를 맞춘다. */

.wrap{ width:min(1080px, 100% - 2.6rem); margin-inline:auto }
.wrap--narrow{ width:min(760px, 100% - 2.6rem) }

/* ── 머리글 ───────────────────────────────────────────── */
.mast{ background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20 }
.mast__in{
  width:min(1080px, 100% - 2.6rem); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem; padding:.95rem 0 .85rem;
}
.mark{
  display:flex; flex-direction:column; line-height:1.3; text-decoration:none;
  border-left:3px solid var(--ci); padding-left:.7rem;
}
.mark__n{ font-size:16.5px; font-weight:700; letter-spacing:-.03em; color:var(--ci) }
.mark__s{ font-size:11.5px; color:var(--ink-3) }
.mast__who{ margin:0 0 0 auto; font-size:12.5px; color:var(--ink-3) }

.tabs{ background:var(--panel); border-bottom:1px solid var(--line) }
.tabs__in{
  width:min(1080px, 100% - 2.6rem); margin-inline:auto;
  display:flex; gap:1.9rem; overflow-x:auto; scrollbar-width:none;
}
.tabs__in::-webkit-scrollbar{ display:none }
.tab{
  flex:none; padding:.72rem 0 .62rem; font-size:14px; color:var(--ink-2);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:hover{ color:var(--ink) }
.tab[aria-current="page"]{ color:var(--ci); font-weight:700; border-bottom-color:var(--ci) }

main{ padding:2.4rem 0 4rem }
.pghd{ margin-bottom:1.6rem }
.pghd__h{ margin:0; font-size:clamp(20px,3.2vw,25px); letter-spacing:-.035em }
.pghd__d{ margin:.45rem 0 0; font-size:13.5px; color:var(--ink-2); max-width:46rem }

/* ── 홈 ───────────────────────────────────────────────── */
.home{ display:grid; grid-template-columns:minmax(0,1fr) 17.5rem; gap:1.6rem; align-items:start }

.board{ background:var(--panel); border:1px solid var(--line); border-radius:4px }
.board__hd{
  display:flex; align-items:baseline; gap:.7rem;
  padding:1.1rem 1.3rem .9rem; border-bottom:1px solid var(--line);
}
.board__h{ margin:0; font-size:16px; letter-spacing:-.025em }
.board__c{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.board__list{ margin:0; padding:0; list-style:none }

.nt{
  display:grid; grid-template-columns:6.2rem minmax(0,1fr) auto;
  gap:.2rem 1.1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line-2);
}
.nt:last-child{ border-bottom:0 }
/* 자리를 전부 못박는다. 하나라도 자동 배치로 두면 grid-row 를 가진 '바로가기'가
   제목 자리를 차지해 버린다 — 실제로 그렇게 밀렸다. */
.nt__d{
  grid-column:1; grid-row:1 / span 2; font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; padding-top:.15rem;
}
.nt__t{ grid-column:2; grid-row:1; font-size:14.5px; font-weight:700; letter-spacing:-.02em }
.nt__b{ grid-column:2; grid-row:2; font-size:13px; color:var(--ink-2); line-height:1.7 }
.nt__go{
  grid-column:3; grid-row:1 / span 2; align-self:center; font-size:12px;
  color:var(--ci); text-decoration:none; border:1px solid rgba(18,89,92,.3);
  border-radius:2px; padding:.22rem .5rem; white-space:nowrap;
}
.nt__go:hover{ background:rgba(18,89,92,.06) }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1.1rem 1.2rem }
.panel + .panel{ margin-top:1rem }
.panel__h{ margin:0 0 .8rem; font-size:13px; letter-spacing:-.02em; color:var(--ink-2) }
.panel__note{ margin:.8rem 0 0; font-size:12px; color:var(--ink-3) }

.kv{ display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:.7rem; padding:.4rem 0; font-size:13.5px }
.kv__k{ color:var(--ink-3); font-size:12.5px }
.kv__v{ font-variant-numeric:tabular-nums }

.emp{ display:flex; align-items:center; gap:.8rem }
.emp__ph{
  width:46px; height:46px; flex:none; border-radius:3px; object-fit:cover;
  object-position:50% 16%; background:var(--line-2); display:block;
}
.emp__t{ display:flex; flex-direction:column; min-width:0 }
.emp__n{ font-size:15px; font-weight:700; letter-spacing:-.02em }
.emp__r{ font-size:12px; color:var(--ink-3) }

/* 홈의 팀 줄 */
.team{ margin-top:1.6rem; background:var(--panel); border:1px solid var(--line); border-radius:4px }
.team__hd{
  display:flex; align-items:baseline; gap:.8rem;
  padding:1.1rem 1.3rem .9rem; border-bottom:1px solid var(--line);
}
.team__h{ margin:0; font-size:16px; letter-spacing:-.025em }
.team__go{
  margin-left:auto; font-size:12px; color:var(--ci); text-decoration:none;
  border:1px solid rgba(18,89,92,.3); border-radius:2px; padding:.22rem .5rem;
}
.team__go:hover{ background:rgba(18,89,92,.06) }
.team__row{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:1px; background:var(--line-2);
}
.mem{
  display:block; background:var(--panel); border:0; width:100%; cursor:pointer;
  padding:1.15rem .9rem 1.05rem; font:inherit; color:inherit; text-align:center;
}
.mem:hover{ background:#f7f9fa }
/* button 안쪽은 span 뿐이라 display:block 을 안 주면 폭·높이가 통째로 무시된다 */
.mem__ph{
  display:block; width:76px; height:76px; margin:0 auto .6rem; border-radius:50%;
  object-fit:cover; object-position:50% 14%; background:var(--line-2);
}
.mem__n{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.02em }
.mem__r{ display:block; font-size:12px; color:var(--ink-3); margin-top:.1rem }

/* ── 사원 ─────────────────────────────────────────────── */
.roster{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden }
.card{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:1.1rem;
  align-items:center; background:var(--panel); border:0; width:100%;
  padding:1rem 1.2rem; font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.card:hover{ background:#f7f9fa }
.card__ph{
  width:64px; height:64px; border-radius:3px; object-fit:cover;
  object-position:50% 16%; background:var(--line-2); display:block;
}
/* button 안쪽은 span 뿐이라 display:block 을 안 주면 폭·높이가 통째로 무시된다 */
.card__t{ display:block; min-width:0 }
.card__top{ display:block; margin-bottom:.15rem }
.card__n{ font-size:16px; font-weight:700; letter-spacing:-.025em }
.card__r{ font-size:12px; color:var(--ci); margin-left:.5rem; font-weight:500 }
.card__d{ display:block; font-size:13px; color:var(--ink-2) }
.card__m{
  display:block; flex:none; font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--ink-3); text-align:right; white-space:nowrap;
}

/* ── 인사 기록 ────────────────────────────────────────── */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1.5rem }
.sheet__bg{ position:absolute; inset:0; background:rgba(16,22,26,.5) }
.sheet__card{
  position:relative; background:var(--panel); border-radius:5px;
  width:min(660px,100%); max-height:88vh; overflow:auto;
}
.sheet__x{
  position:absolute; top:.5rem; right:.6rem; z-index:2; width:32px; height:32px;
  border:0; border-radius:3px; background:rgba(255,255,255,.86); color:var(--ink-2);
  font-size:20px; line-height:1; cursor:pointer;
}
.sheet__x:hover{ background:#eceff2 }

.det__top{ display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:1.4rem; padding:1.4rem }
.det__shot{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px; background:var(--line-2); display:block }
.det__eye{ margin:.15rem 0 .35rem; font-size:11px; letter-spacing:.06em; color:var(--ink-3) }
.det__n{ margin:0; font-size:23px; letter-spacing:-.035em }
.det__r{ margin:.15rem 0 0; font-size:13px; color:var(--ci); font-weight:500 }
.det__rows{ margin:1.05rem 0 0; border-top:1px solid var(--line-2) }
.det__row{ display:grid; grid-template-columns:4.4rem minmax(0,1fr); gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--line-2) }
.det__k{ font-size:12px; color:var(--ink-3) }
.det__v{ font-size:13.5px; line-height:1.7; font-variant-numeric:tabular-nums }

/* ── 사내 규정 ────────────────────────────────────────── */
.doc{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1.5rem 1.7rem 1.3rem }
.doc + .doc{ margin-top:1.1rem }
.doc__h{
  margin:0 0 1.2rem; padding-bottom:.7rem; font-size:14.5px; letter-spacing:-.02em;
  border-bottom:1px solid var(--line-2);
}
.art{ margin:0 0 1.25rem }
.art:last-child{ margin-bottom:0 }
.art__h{ margin:0 0 .35rem; font-size:13.5px; font-weight:700; letter-spacing:-.02em }
.art__p{ margin:0 0 .28rem; font-size:14px; line-height:1.8; padding-left:1.5rem; position:relative }
.art__p:last-child{ margin-bottom:0 }
.art__i{ position:absolute; left:0; color:var(--ink-3) }

.foot{ border-top:1px solid var(--line); padding:1.5rem 0 2.6rem; font-size:12.5px; color:var(--ink-3) }
.foot p{ margin:0 }
.foot__c{ margin-top:.3rem !important; font-size:11.5px }
.foot a{ color:var(--ink-2) }

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width:880px){
  .home{ grid-template-columns:minmax(0,1fr) }
  .home__side{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
  .panel + .panel{ margin-top:0 }
  .team__row{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .det__top{ grid-template-columns:minmax(0,1fr) }
  .det__shot{ width:min(200px,52%) }
}
@media (max-width:640px){
  .mast__in{ flex-direction:column; align-items:flex-start; gap:.4rem }
  .mast__who{ margin:0 }
  .tabs__in{ gap:1.4rem }
  .home__side{ grid-template-columns:minmax(0,1fr) }
  .nt{ grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.9rem 1.05rem }
  .nt__d{ grid-column:1; grid-row:1; padding-top:0 }
  .nt__t{ grid-column:1; grid-row:2 }
  .nt__b{ grid-column:1; grid-row:3 }
  .nt__go{ grid-column:2; grid-row:1 / span 3; align-self:start }
  .card{ grid-template-columns:52px minmax(0,1fr); gap:.85rem; padding:.9rem 1rem }
  .card__ph{ width:52px; height:52px }
  .card__m{ grid-column:2; text-align:left; margin-top:.25rem }
  .doc{ padding:1.3rem 1.2rem 1.1rem }
  .team__row{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mem__ph{ width:62px; height:62px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}