/* AiNex 사이버연수원 — component kit (design step 2). Loaded on every page after yw-shell.css, before the page sheets.
   Generic yw- classes for the screens rebuilt in step 3; the 메인 (.yw-home) and sub page (.yw-page) classes that used to be
   copied in yw-main.css / yw-pages.css share the same rules here. Tokens only (tokens.css), radius 4/6, no shadows. */

/* focus ring — keyboard only */
:where(.yw-btn,.yw-mt,.yw-lg,.yw-gnb a,.yw-mnav a,.yw-sn a,.yw-banner a,.yw-tabs a,.yw-pager a,.yw-home a,.yw-page a,.yw-page summary,.yw-field :is(input,select,textarea)):focus-visible{outline:2px solid var(--a);outline-offset:2px}
.yw-ft a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* accessibility (design step 4): skip link, focus fallback for every control, reduced motion */
.yw-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:4px;background:var(--p);color:#fff;font-weight:800;font-size:14px;text-decoration:none}
.yw-skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
#main:focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--a);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* buttons (base .yw-btn / --pr / --sm live in yw-shell.css) */
.yw-btn--lg{height:48px;padding:0 22px;font-size:15px}
.yw-btn--block{display:flex;width:100%}
.yw-btn--warn{border-color:var(--warn);color:var(--warn)}
.yw-btn[aria-disabled="true"],.yw-btn:disabled{opacity:.45;pointer-events:none}

/* tag (구분·상태) */
.yw-tag,.yw-home .cat,.yw-page .cat{display:inline-block;font-size:11px;font-weight:800;color:var(--a);border:1px solid var(--a);padding:0 6px;border-radius:3px;white-space:nowrap;line-height:1.6}
.yw-tag--warn{color:var(--warn);border-color:var(--warn)}
.yw-tag--ok{color:var(--ok);border-color:var(--ok)}
.yw-tag--mute{color:var(--off);border-color:var(--line)}
.yw-tag--solid{background:var(--p);border-color:var(--p);color:#fff}

/* card */
.yw-card{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px}
.yw-card > h3{margin:0 0 6px;font-size:18px;color:var(--ink);font-weight:800}
.yw-card > p{margin:0 0 10px;font-size:14px;color:var(--text)}
.yw-grid{display:grid;gap:20px;grid-template-columns:repeat(var(--cols,3),1fr)}

/* table (일정·목록) */
.yw-table,.yw-home .sched,.yw-page .sched{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:14px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.yw-table th,.yw-home .sched th,.yw-page .sched th{background:var(--surface);text-align:left;padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
.yw-table td,.yw-home .sched td,.yw-page .sched td{padding:12px 14px;border-bottom:1px solid var(--line)}
.yw-table tr:last-child td,.yw-home .sched tr:last-child td,.yw-page .sched tr:last-child td{border-bottom:0}
.yw-table td a,.yw-home .sched td a,.yw-page .sched td a{font-weight:700;color:var(--p);text-decoration:none}
.yw-table td a:hover,.yw-home .sched td a:hover,.yw-page .sched td a:hover{text-decoration:underline}
:is(.yw-table,.yw-home .sched,.yw-page .sched) .dd{font-weight:900;white-space:nowrap}
:is(.yw-table,.yw-home .sched,.yw-page .sched) tr.soon .dd{color:var(--warn)}
:is(.yw-table,.yw-home .sched,.yw-page .sched) tr.end,:is(.yw-table,.yw-home .sched,.yw-page .sched) tr.end td a{color:var(--off)}

/* table wrapper: a wide table scrolls inside it instead of widening the page */
.yw-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px}

/* numbered steps (훈련 진행 절차) */
.yw-steps,.yw-home .steps,.yw-page .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.yw-step,.yw-home .step,.yw-page .step{border:1px solid var(--line);border-radius:6px;background:#fff;padding:18px}
:is(.yw-step,.yw-home .step,.yw-page .step) .n{display:inline-block;background:var(--p);color:#fff;font-size:11px;font-weight:900;padding:2px 8px;border-radius:3px;margin-bottom:10px}
:is(.yw-step,.yw-home .step,.yw-page .step) b{display:block;font-size:15px;margin-bottom:4px;color:var(--ink)}
:is(.yw-step,.yw-home .step,.yw-page .step) span:not(.n){font-size:13px;color:var(--mute)}

/* note box (유의사항·원칙) */
.yw-note,.yw-home .note,.yw-page .note{border:1px solid var(--line);border-radius:6px;background:#fff;padding:16px 18px;font-size:13.5px}
:is(.yw-note,.yw-home .note,.yw-page .note) b{display:block;color:var(--p);margin-bottom:5px}

/* key / value rows */
.yw-kv,.yw-page .kv{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:16px 0}
:is(.yw-kv,.yw-page .kv) > div{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--line)}
:is(.yw-kv,.yw-page .kv) > div:last-child{border-bottom:0}
:is(.yw-kv,.yw-page .kv) b{background:var(--surface);padding:12px 16px;font-size:14.5px}
:is(.yw-kv,.yw-page .kv) span{padding:12px 16px;font-size:14.5px}
:is(.yw-kv,.yw-page .kv) span a{color:var(--a);font-weight:700;text-decoration:none}

/* form field */
.yw-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.yw-field > label{font-size:14px;font-weight:700;color:var(--ink)}
.yw-field :is(input,select,textarea){width:100%;height:44px;padding:0 12px;border:1px solid #c9d0d9;border-radius:4px;background:#fff;color:var(--text);font:inherit;font-size:15px}
.yw-field textarea{height:auto;min-height:120px;padding:10px 12px;line-height:1.6}
.yw-field :is(input,select,textarea):focus{border-color:var(--p)}
.yw-field .yw-hint{font-size:13px;color:var(--mute)}
.yw-field.is-error :is(input,select,textarea){border-color:var(--warn)}
.yw-field.is-error .yw-hint{color:var(--warn)}

/* pagination */
.yw-pager{display:flex;justify-content:center;gap:4px;margin:28px 0 0;flex-wrap:wrap}
.yw-pager :is(a,span){display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:4px;font-size:14px;font-weight:700;color:var(--text);text-decoration:none;background:#fff}
.yw-pager a:hover{border-color:var(--p);color:var(--p)}
.yw-pager [aria-current="page"]{background:var(--p);border-color:var(--p);color:#fff}

/* tabs (in-page switch, same look as the section nav) */
.yw-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:24px}
.yw-tabs a{padding:12px 0;font-weight:700;font-size:15px;white-space:nowrap;border-bottom:3px solid transparent;text-decoration:none;color:var(--text)}
.yw-tabs a:hover,.yw-tabs a[aria-current="page"]{color:var(--p);border-color:var(--p)}

/* section nav: current section (set by yw-shell.js while scrolling) */
.yw-sn a[aria-current="true"]{color:var(--p);border-color:var(--p)}

/* alert / info box */
.yw-alert{border:1px solid var(--line);border-left:4px solid var(--a);border-radius:4px;background:var(--surface);padding:14px 16px;font-size:14px;color:var(--text)}
.yw-alert b{color:var(--ink)}
.yw-alert--warn{border-left-color:var(--warn);background:#fdf3f3}

/* breadcrumb */
.yw-crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mute);margin:0 0 10px}
.yw-crumb a{color:var(--mute);text-decoration:none}
.yw-crumb a:hover{color:var(--p)}
.yw-crumb a + *::before{content:"›";margin-right:6px}

@media (max-width:1023px){
  .yw-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:599px){
  .yw-grid{grid-template-columns:1fr}
  .yw-steps,.yw-home .steps,.yw-page .steps{grid-template-columns:1fr 1fr}
  :is(.yw-kv,.yw-page .kv) > div{grid-template-columns:1fr}
  :is(.yw-kv,.yw-page .kv) b{padding:9px 14px 2px}
  :is(.yw-kv,.yw-page .kv) span{padding:4px 14px 12px}
  /* 일정표: 대상 · 수강신청 columns are dropped on phones */
  :is(.yw-home,.yw-page) .sched :is(th,td):is(:nth-child(3),:nth-child(5)){display:none}
  .yw-pager :is(a,span){min-width:44px;height:44px}
  /* 44px tap targets: section nav, tabs, footer links */
  .yw-sn a,.yw-tabs a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
  .yw-ft .yw-mods a{padding:11px 0}
  .yw-ft .yw-bot a{display:inline-flex;align-items:center;min-height:44px}
}