/* CENTRAS Web Kit — 다국어: 언어 전환 단추 + 기계 번역(Google) 알림 띠
   기본은 어두운 반투명 머리 막대(흰 글자) 위. 밝은 바탕에서는 .cwk-lang--light.
   단추 글자색은 부모 색(currentColor)을 따른다. 목록은 단추 오른쪽 끝에 맞춰 아래로 펼친다.
   스크립트 전(no-JS)에는 마우스 올림·포커스로 목록이 열린다(기계 번역 묶음은 스크립트가 있어야 보인다). 스크립트가 붙으면 .is-ready.
   사이트 조정 변수: --cwk-mt-top (알림 띠 위치 — 고정 머리 막대 높이, 기본 0) */
.cwk-lang{position:relative;flex:none;display:inline-flex;align-items:center;font-family:var(--cwk-font,inherit);
  --cwk-lang-bg:rgba(22,22,23,.985);--cwk-lang-fg:var(--cwk-light,#f5f5f7);--cwk-lang-sub:var(--cwk-grey2,#a1a1a6);
  --cwk-lang-line:rgba(255,255,255,.1);--cwk-lang-hover:rgba(255,255,255,.08);--cwk-lang-btn-hover:rgba(255,255,255,.1)}
.cwk-lang--light{--cwk-lang-bg:rgba(255,255,255,.96);--cwk-lang-fg:var(--cwk-ink,#1d1d1f);--cwk-lang-sub:var(--cwk-grey,#6e6e73);
  --cwk-lang-line:var(--cwk-line,#d2d2d7);--cwk-lang-hover:var(--cwk-light,#f5f5f7);--cwk-lang-btn-hover:rgba(0,0,0,.06)}

.cwk-lang-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 8px 0 9px;margin:0;border:0;border-radius:var(--cwk-r-pill,999px);
  background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s var(--cwk-ease,ease),color .15s var(--cwk-ease,ease)}
.cwk-lang-btn:hover,.cwk-lang.is-open .cwk-lang-btn{background:var(--cwk-lang-btn-hover)}
.cwk-lang-btn:focus{outline:none}
.cwk-lang-btn:focus-visible{box-shadow:var(--cwk-ring,0 0 0 3px rgba(47,140,255,.35)),inset 0 0 0 1px rgba(47,140,255,.8)}
.cwk-lang-btn svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.cwk-lang-ic{width:17px;height:17px;stroke-width:1.6}
.cwk-lang-code{min-width:2ch;text-align:left;font-variant-numeric:tabular-nums}
.cwk-lang-caret{width:12px;height:12px;stroke-width:2.2;opacity:.7;transition:transform .2s var(--cwk-ease,ease)}
.cwk-lang.is-open .cwk-lang-caret{transform:rotate(180deg)}

/* 목록 판: 머리 막대와 같은 어두운 반투명 유리 */
.cwk-lang-list{position:absolute;top:calc(100% + 10px);right:0;z-index:var(--cwk-z-panel,70);width:max-content;min-width:216px;max-height:min(70vh,560px);overflow:auto;
  margin:0;padding:6px;list-style:none;text-align:left;
  background:var(--cwk-lang-bg);color:var(--cwk-lang-fg);border-radius:14px;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55),0 0 0 1px var(--cwk-lang-line);overscroll-behavior:contain;
  display:none}
.cwk-lang-ul{list-style:none;margin:0;padding:0}
.cwk-lang-list li{margin:0;padding:0}
.cwk-lang-item{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;min-height:38px;padding:9px 12px;border-radius:8px;cursor:pointer;
  color:inherit;text-decoration:none;font:inherit;font-size:var(--cwk-fs-sm,14px);font-weight:500;line-height:1.2;white-space:nowrap}
.cwk-lang-item:hover{background:var(--cwk-lang-hover)}
.cwk-lang-item:focus{outline:none}
.cwk-lang-item:focus-visible{background:var(--cwk-lang-hover);box-shadow:inset 0 0 0 2px var(--cwk-g2,#2f8cff)}
.cwk-lang-tag{flex:none;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--cwk-lang-sub);font-variant-numeric:tabular-nums}
.cwk-lang-item[aria-current="true"]{font-weight:700}
.cwk-lang-item[aria-current="true"] .cwk-lang-tag{display:block!important;color:transparent;width:14px;height:14px;overflow:hidden;text-indent:40px;white-space:nowrap;
  background:var(--cwk-grad,linear-gradient(90deg,#34d1a8,#2f8cff));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* 기계 번역 묶음: 구분선 + 작은 머리 + 2열(언어가 많아도 판이 길어지지 않게) + 안내 한 줄 */
.cwk-lang-mtg{margin-top:6px;padding-top:6px;border-top:1px solid var(--cwk-lang-line)}
.cwk-lang-gh{margin:0;padding:8px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--cwk-lang-sub)}
.cwk-lang-mtg .cwk-lang-ul{display:grid;grid-template-columns:1fr 1fr;column-gap:2px}
.cwk-lang-mtg .cwk-lang-item{font-size:13.5px;min-height:36px;padding:8px 12px}
.cwk-lang-mtg .cwk-lang-item:not([aria-current="true"]) .cwk-lang-tag{display:none}
.cwk-lang-hint{margin:2px 0 0;padding:6px 12px 6px;font-size:11.5px;line-height:1.45;color:var(--cwk-lang-sub);white-space:normal;max-width:300px}
.cwk-lang:not(.is-ready) .cwk-lang-mtg{display:none}

/* 열림: 스크립트가 붙은 뒤에는 .is-open(+hidden 해제)으로만, 붙기 전에는 마우스 올림·포커스로 */
.cwk-lang.is-ready.is-open .cwk-lang-list{display:block;animation:cwk-lang-in .18s var(--cwk-ease,ease)}
.cwk-lang:not(.is-ready):hover .cwk-lang-list,.cwk-lang:not(.is-ready):focus-within .cwk-lang-list{display:block}
.cwk-lang-list[hidden]{display:none!important}
/* 단추와 목록 사이 틈을 지나도 no-JS 마우스 올림이 끊기지 않게 */
.cwk-lang:not(.is-ready) .cwk-lang-list::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
@keyframes cwk-lang-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}

/* 좁은 화면: 코드만 남기고 꺾쇠를 뺀다(메뉴 단추 옆에 붙어 있도록). 판은 화면 안에 */
@media (max-width:560px){
  .cwk-lang-btn{padding:0 8px;gap:5px}
  .cwk-lang-btn .cwk-lang-caret{display:none}
  .cwk-lang-list{position:fixed;top:calc(var(--cwk-mt-top,56px) + 8px);left:auto;right:12px;width:calc(100vw - 24px);max-width:340px;max-height:calc(100dvh - var(--cwk-mt-top,56px) - 24px)}
}

/* ---------- 기계 번역 알림 띠 ---------- */
.cwk-mt-bar{position:fixed;left:0;right:0;top:var(--cwk-mt-top,0px);z-index:calc(var(--cwk-z-fab,60) - 1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;min-height:38px;max-width:100vw;box-sizing:border-box;padding:6px max(16px,env(safe-area-inset-left,0px));
  font-family:var(--cwk-font,inherit);font-size:13px;font-weight:500;line-height:1.35;letter-spacing:-.005em;color:#f5f5f7;
  background:rgba(22,22,23,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);animation:cwk-mt-in .25s var(--cwk-ease,ease)}
.cwk-mt-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--cwk-grad,linear-gradient(90deg,#34d1a8,#2f8cff))}
.cwk-mt-bar[data-state="loading"] .cwk-mt-dot{animation:cwk-mt-pulse 1s ease-in-out infinite alternate}
.cwk-mt-bar[data-state="failed"] .cwk-mt-dot{background:#ff9f0a}
.cwk-mt-lang{font-weight:700}
.cwk-mt-lang:empty{display:none}
.cwk-mt-lang::after{content:"·";margin-left:10px;color:var(--cwk-grey2,#a1a1a6);font-weight:500}
.cwk-mt-msg{color:#d2d2d7}
.cwk-mt-orig{all:unset;box-sizing:border-box;flex:none;max-width:100%;cursor:pointer;padding:5px 12px;border-radius:999px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);white-space:nowrap}
/* 번역 문구가 길면 띠가 줄을 나눈다 — 「원문 보기」 단추는 늘 화면 안 (QA N-02) */
.cwk-mt-orig:hover{background:rgba(255,255,255,.2)}
.cwk-mt-o2:not(:empty){margin-left:6px;font-weight:500;color:rgba(255,255,255,.66)}
.cwk-mt-o2:not(:empty)::before{content:"·";margin-right:6px}
.cwk-mt-orig:focus-visible{box-shadow:var(--cwk-ring,0 0 0 3px rgba(47,140,255,.35)),inset 0 0 0 1px rgba(47,140,255,.9)}
@keyframes cwk-mt-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes cwk-mt-pulse{from{opacity:.35}to{opacity:1}}
@media (max-width:560px){.cwk-mt-bar{justify-content:flex-start;font-size:12.5px;gap:6px 8px}.cwk-mt-msg{flex:1 1 8em;min-width:0;overflow-wrap:anywhere}.cwk-mt-orig{margin-left:auto}.cwk-mt-lang::after{margin-left:8px}}

/* ---------- Google 번역 요소의 자체 화면 숨김 (기능은 그대로) ----------
   Google 은 body 에 top:40px 를 주고 위쪽에 배너 iframe 을 넣는다 → 자리 이동을 막고 배너·말풍선·강조를 감춘다.
   (Google 이 클래스 이름을 바꾸면 이 블록만 고친다. 마지막 확인 2026-10.) */
html.cwk-mt body{top:0!important;position:static!important;min-height:0!important}
.cwk-gt{position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important}
.goog-te-banner-frame,iframe.skiptranslate,body>.skiptranslate,iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-ORHb,
#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-yAWNEb-L7lbkb,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-ZVi9od-aZ2wEe-OiiCO{display:none!important;visibility:hidden!important}
.goog-text-highlight,.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{background:none!important;box-shadow:none!important}
html.cwk-mt font{background:none!important;box-shadow:none!important}

@media (prefers-reduced-motion:reduce){.cwk-lang-btn,.cwk-lang-caret{transition:none}.cwk-lang.is-ready.is-open .cwk-lang-list,.cwk-mt-bar,.cwk-mt-bar .cwk-mt-dot{animation:none}}
@media (forced-colors:active){.cwk-lang-list{border:1px solid CanvasText}.cwk-lang-item[aria-current="true"] .cwk-lang-tag{forced-color-adjust:none;background:CanvasText}.cwk-mt-bar{border-bottom:1px solid CanvasText}}
@media print{.cwk-lang,.cwk-mt-bar{display:none!important}}
