/* 차세대 안전교육시스템 화면디자인 — 공통 컴포넌트 v0.1 (c- 접두어, KRDS 컴포넌트 대응은 설계서 '컴포넌트 목록' 참조) */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--fs-b-m);line-height:var(--lh);color:var(--krds-gray-90);background:var(--krds-gray-0);word-break:keep-all}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:calc(var(--content-max) + var(--margin-pc)*2);margin:0 auto;padding:0 var(--margin-pc)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* 건너뛰기 */
.c-skip{position:absolute;left:8px;top:-60px;background:var(--krds-primary-60);color:#fff;padding:8px 16px;border-radius:var(--radius-s);z-index:99}
.c-skip:focus{top:8px}
/* 공식 배너(masthead) */
.c-masthead{background:var(--krds-gray-5);font-size:var(--fs-b-xs);color:var(--krds-gray-70)}
.c-masthead .wrap{display:flex;align-items:center;gap:8px;height:32px}
.c-masthead .flag{width:16px;height:11px;border-radius:2px;background:linear-gradient(90deg,#fff 0 100%);border:1px solid var(--krds-gray-20);position:relative}
.c-masthead .flag:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:5px;border-radius:50%;background:conic-gradient(var(--krds-point-50) 0 50%,var(--krds-primary-60) 0)}
/* 헤더 */
.c-header{border-bottom:1px solid var(--krds-gray-10);background:#fff}
.c-header .top{display:flex;align-items:center;gap:var(--gap-5);height:80px}
.c-logo{display:flex;align-items:center;gap:10px;flex:none}
.c-logo .mark{width:40px;height:40px;border-radius:12px;background:var(--krds-primary-50);position:relative;overflow:hidden}
.c-logo .mark:before{content:"";position:absolute;left:8px;bottom:8px;width:24px;height:14px;border-radius:12px 12px 4px 4px;background:#fff}
.c-logo .mark:after{content:"";position:absolute;left:16px;top:7px;width:8px;height:8px;border-radius:50%;background:#FFD43B}
.c-logo .t1{font-size:13px;color:var(--krds-gray-70);font-weight:500;line-height:1.2}
.c-logo .t2{font-size:20px;font-weight:700;color:var(--krds-secondary-80);line-height:1.25}
.c-search-mini{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;height:44px;border:1px solid var(--krds-gray-20);border-radius:var(--radius-pill);padding:0 8px 0 20px;color:var(--krds-gray-50);font-size:var(--fs-b-s)}
.c-search-mini > span:first-child{flex:1}
.c-search-mini .ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--krds-primary-50);display:grid;place-items:center}
.c-util{display:flex;gap:var(--gap-2);align-items:center;font-size:var(--fs-b-s)}
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--radius-s);font-weight:600;font-size:var(--fs-b-s);white-space:nowrap}
.c-btn.primary{background:var(--krds-primary-50);color:#fff}
.c-btn.secondary{background:var(--krds-primary-5);color:var(--krds-primary-60)}
.c-btn.tertiary{border:1px solid var(--krds-gray-20);color:var(--krds-gray-90);background:#fff}
.c-btn.text{color:var(--krds-gray-70);padding:0 8px}
.c-btn.l{height:48px;font-size:var(--fs-b-m);padding:0 20px}
.c-gnb{display:flex;align-items:center;height:56px;gap:4px}
.c-gnb a{padding:0 18px;height:56px;display:flex;align-items:center;font-size:var(--fs-h-xs);font-weight:600;color:var(--krds-gray-90);position:relative}
.c-gnb a.on{color:var(--krds-primary-60)}
.c-gnb a.on:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--krds-primary-50);border-radius:3px 3px 0 0}
.c-gnb .all{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--fs-b-s);color:var(--krds-gray-70)}
.c-mmenu{display:none;width:40px;height:40px;border-radius:var(--radius-s);border:1px solid var(--krds-gray-20);align-items:center;justify-content:center;color:var(--krds-gray-90)}
.burger{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;display:inline-block}
/* 섹션 공통 */
.sec{padding:var(--gap-8) 0}
.sec.gray{background:var(--krds-gray-5)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--gap-5)}
.sec-h h2{font-size:var(--fs-h-l);font-weight:700;line-height:1.3}
.sec-h p{color:var(--krds-gray-70);font-size:var(--fs-b-m);margin-top:4px}
.more{font-size:var(--fs-b-s);font-weight:600;color:var(--krds-primary-60);white-space:nowrap}
/* 태그·배지 */
.c-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--radius-s);font-size:13px;font-weight:600;white-space:nowrap}
.c-tag.req{background:#FDEBEC;color:#B0252F}
.c-tag.rec{background:var(--krds-primary-5);color:var(--krds-primary-60)}
.c-tag.done{background:#E7F4EA;color:#1D6F30}
.c-tag.gray{background:var(--krds-gray-10);color:var(--krds-gray-70)}
.c-tag.warn{background:#FFF4D6;color:#7A5200}
.c-tag.open{background:#E8F4FF;color:var(--csia-staff)} /* v0.2.1: 대비 4.23→6.35 (Q-056) */
/* 알림 배너 */
.c-alert{display:flex;gap:12px;align-items:center;padding:14px 20px;border-radius:var(--radius-m);background:#FFF8E5;border:1px solid #F2D58A;color:#5C3E00;font-size:var(--fs-b-s)}
.c-alert strong{font-weight:700}
.c-alert .ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--krds-warning-50);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.c-alert a{margin-left:auto;font-weight:700;text-decoration:underline;white-space:nowrap}
/* 카드 */
.card{background:#fff;border:1px solid var(--krds-gray-10);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}
/* 진행 막대 */
.c-progress{height:8px;border-radius:8px;background:var(--krds-gray-10);overflow:hidden}
.c-progress i{display:block;height:100%;background:var(--krds-primary-50);border-radius:8px}
/* 개선요구 메모 */
.c-memo-fab{position:fixed;right:24px;bottom:24px;height:56px;padding:0 20px 0 16px;border-radius:28px;background:var(--krds-secondary-80);color:#fff;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:0 6px 20px rgba(5,43,87,.35);z-index:50;font-size:var(--fs-b-s)}
.c-memo-fab .dot{width:28px;height:28px;border-radius:50%;background:#FFD43B;color:var(--krds-secondary-80);display:grid;place-items:center;font-size:16px}
/* 푸터 */
.c-footer{background:var(--krds-gray-90);color:#C9CDD2;font-size:var(--fs-b-xs);padding:40px 0 56px}
.c-footer .links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;font-size:var(--fs-b-s);color:#fff}
.c-footer .links .pp{color:#A9CF94;font-weight:700}
/* 주석 번호(설계서용) */
[data-area]{position:relative}
body.anno [data-area]:before{content:attr(data-area);position:absolute;left:-6px;top:-10px;z-index:60;width:28px;height:28px;border-radius:50%;background:var(--krds-point-50);color:#fff;font:700 15px/28px var(--font);text-align:center;box-shadow:0 0 0 3px #fff}
body.anno [data-area]{outline:2px dashed rgba(214,61,74,.55);outline-offset:4px}
@media (max-width:767px){
  .wrap{padding:0 var(--margin-m)}
  .c-header .top{height:60px;gap:8px}
  .c-logo .t2{font-size:17px} .c-logo .t1{font-size:12px} .c-logo .mark{width:34px;height:34px}
  .c-search-mini,.c-gnb,.c-util .hide-m{display:none}
  .sec{padding:40px 0}
  .sec-h{flex-direction:column;align-items:flex-start;gap:8px}
  .sec-h h2{font-size:22px}
  .c-mmenu{display:inline-flex}
  .c-memo-fab{right:16px;bottom:16px;height:48px;padding:0 14px 0 10px}
  body.anno [data-area]:before{left:-2px}
}

/* ---- v0.2 공제회 CI(2026-10-27) ---- */
.c-logo .mark{width:46px;height:40px;border-radius:0;background:url(img/csia_mark.png) center/contain no-repeat}
.c-logo .mark:before,.c-logo .mark:after{display:none}
.c-logo .t1{color:var(--krds-primary-70);font-weight:700}
.c-logo .t2{color:var(--krds-gray-90);font-weight:800}
body{background:#fff}
.c-masthead{background:var(--csia-canvas)}