/* ── ALLO KOREA 3단 셸 (웹리뉴얼 10-3col-shell.html 이관 · W3) ──────────────────
 *
 * 원본: C:/Users/user/Desktop/웹리뉴얼/10-3col-shell.html 의 <style> 블록 **그대로**.
 * 치수·클래스명을 바꾸지 말 것 — 웹리뉴얼 01~09 본문의 body.akw-3col 규칙 114개가 이 이름에 의존한다.
 *
 * 그리는 주체가 바뀌었다: 엘리멘터 HTML 위젯(수동) → 플러그인 자동 주입
 *   includes/site-chrome.php · allo_sc_3col_render() 가 wp_footer 에서 좌/우 aside 를 출력하고,
 *   assets/site-3col.js 가 폭을 재서 body.akw-3col 을 켠다.
 *
 * 적용 범위는 PHP 게이트가 정한다 (옵션 allo_crm_3col: '0' 꺼짐 / 'home' 홈만 / '1' 전체).
 */
  /* 3단이 켜진 페이지의 전체 배경 — 사장님 색 지정(2026-08-14 "#FBF6F0 이걸로 먹이자").
     엘리멘터 페이지 배경 설정과 무관하게 플러그인이 보장한다(테마·페이지별 편차 제거).
     모바일·1단은 body 클래스가 없어 영향 없음 — 그쪽은 엘리멘터 페이지 배경으로 맞춘다(가이드 참고). */
  body.akw-3col{background:#FBF6F0 !important}

  /* ── 레일 공통 ──────────────────────────────────────────────
     기본은 완전히 숨김. body.akw-3col 이 붙었을 때만(=데스크톱 판정 통과) 보인다.
     좌표(top/left/height)는 JS 가 인라인으로 넣는다. */
  .akw-rail{display:none}
  .akw-rail,.akw-rail *,.akw-rail *::before,.akw-rail *::after{box-sizing:border-box}
  body.akw-3col .akw-rail{
    display:flex;flex-direction:column;gap:10px;position:fixed;z-index:20;
    /* B-2(2026-08-14): 내부 스크롤 제거 — height 는 JS 가 깎지 않고 **내용 자연 높이** 그대로,
       레일이 화면보다 길면 스크롤에 따라 top 을 밀어 올린다(site-3col.js place() 참고).
       overflow 가 visible 이라 카드 링/글로우 클리핑도 원천적으로 없다. */
    overflow:visible;
    /* 좌우 3px·상하 2px 숨쉼 — overflow:visible 이 된 지금은 클리핑 방지 용도는 아니지만,
       카드 실폭 254/274 산술(웹리뉴얼 실측)이 이 패딩을 전제하므로 유지한다.
       box-sizing:border-box 라 폭 260/280 은 그대로다 — JS 3단 산술에 무영향. */
    padding:2px 3px;
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;color:#1A1710}
  /* 카드는 절대 눌리지 않는다 — B-2 전엔 레일 height 가 JS 고정이라 shrink:1 이면 카드가
     찌그러져 잘렸다(실측: 현황판 하단 'No payment…' + 별점 줄 통째 소실 — 2026-08-13).
     지금은 자연 높이라 눌릴 일이 없지만, 어떤 경로로든 height 가 다시 고정되면 같은 사고가
     재발하므로 벨트+멜빵으로 유지한다. */
  body.akw-3col .akw-rail > *{flex:0 0 auto}
  body.akw-3col .akw-rail-l{width:260px}
  body.akw-3col .akw-rail-r{width:280px}
  /* JS 가 멈춰 클래스가 남아도 좁은 화면에선 레일이 뜨지 않게 (벨트+멜빵)
     경계값은 JS 실효 임계(1232px)와 같은 선이다 — 1231 이하 = 3단 OFF 구간. */
  @media (max-width:1231px){ body.akw-3col .akw-rail{display:none} }

  .akw-rail a{text-decoration:none}
  /* 라운드 20 = 마이페이지 디자인 실측 (design/mypage isDesk — 흰 카드 전부 20. W4 에서 18→20) */
  .akw-rc{border-radius:20px;background:#fff;box-shadow:0 0 0 .5px rgba(26,23,16,.07)}
  /* 상태 4변형은 hidden 토글로 전환한다 — 어떤 카드든 hidden 이면 확실히 죽는다 (W4) */
  .akw-rc[hidden]{display:none}
  @keyframes akw3Breath{0%,100%{opacity:1}50%{opacity:.35}}

  /* ── 중복 방지 ──────────────────────────────────────────────
     3단에서는 현황판(02)·겨울학기 배너(03)가 좌/우 컬럼으로 이사한다.
     원본 위젯은 DOM 에 그대로 두고(제목 구조·FAQ 스키마 보존) 화면에서만 감춘다.
     ※ 02/03 파일 자체는 건드리지 않는다 — 되돌리려면 아래 두 줄만 지우면 된다. */
  body.akw-3col .akw-board{display:none}
  body.akw-3col .akw-banner{display:none}
  /* 되살리기 안전판 — 레일이 안 뜨는 폭(위 벨트+멜빵 미디어쿼리와 같은 조건)에서는
     위 두 줄을 무효화한다. JS 가 멈춰 클래스가 남아 있으면 레일도 없고 원본도 숨겨져
     현황판·배너가 통째로 사라지기 때문이다(실측 재현: resize 이벤트가 씹혀 클래스가 남은 채
     1180px 로 좁혔더니 두 섹션 높이 0 + 레일 없음 — 2026-08-13).
     ※ 반드시 위 두 줄 **뒤**에 와야 한다(같은 특정도 → 나중 규칙이 이긴다).
     ※ .akw-board/.akw-banner 는 <section> 이라 원래 display 가 block 이다. */
  @media (max-width:1231px){
    body.akw-3col .akw-board{display:block}
    body.akw-3col .akw-banner{display:block}
  }
  /* ── 사이트 크롬 중복 방지 · 2차 안전망 (akw- 스코프 밖 유일한 예외 · 사유는 파일 상단 주석) ──
     1차는 JS: site-chrome.js updateRails() 가 body.akw-3col 이면 레일/필을 아예 켜지 않는다.
     이 한 줄은 그 JS 가 실패했을 때만 일한다(CSS 로드 순서에 의존하지 않게 특정도를 높여 둔다).
     사이트 크롬 레일을 다시 쓰려면 이 줄을 지운다. */
  body.akw-3col #allo-sc .allo-sc-rails{display:none}

  /* ═══ ① 로그인 카드 ═══════════════════════════════════════
     ※ 폭 260 · 세로 예산 — 아래 치수는 좌 레일 총높이 ≤800px 을 맞추려고 한 단씩 줄인 값이다
       (세로 900 이하 노트북에서 메뉴 하단 'My page' 가 잘렸다 — 2026-08-13). */
  .akw-rl-auth{padding:17px}
  .akw-rl-auth[hidden]{display:none}
  .akw-rl-t{font-size:15px;font-weight:800;letter-spacing:-.03em;color:#1A1710;line-height:1.25}
  .akw-rl-s{font-size:12.5px;line-height:1.5;color:#8C857A;margin-top:6px}
  .akw-rl-g{margin-top:13px;height:44px;border-radius:14px;background:#fff;
    display:flex;align-items:center;justify-content:center;gap:9px;
    font-size:13.5px;font-weight:700;color:#1A1710;
    box-shadow:0 0 0 .5px rgba(26,23,16,.11),0 6px 16px -8px rgba(0,0,0,.22);
    transition:transform .16s cubic-bezier(.32,.72,0,1)}
  .akw-rl-g:hover{color:#1A1710;transform:translateY(-1px)}
  .akw-rl-g:active{transform:scale(.98)}
  /* 로그인 후 변형 */
  .akw-rl-me{padding:13px 14px;display:flex;align-items:center;gap:11px}
  .akw-rl-me[hidden]{display:none}
  .akw-rl-av{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
    background:repeating-linear-gradient(135deg,#E7E2D8 0 5px,#F0ECE3 5px 10px);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;color:#8C857A}
  .akw-rl-av img{width:100%;height:100%;object-fit:cover;display:block}
  .akw-rl-mi{flex:1;min-width:0;display:block}
  .akw-rl-mn{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.025em;color:#1A1710;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .akw-rl-mm{display:block;font-size:11.5px;color:#8C857A;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ═══ ② 신청 현황판 (02-status-board 이식 · 좁은 폭 세로형)
     = 상태 4변형의 B(noapp) — 치수는 W4 에서 디자인 isLoggedNoApp.html 실측으로 보정 ═══ */
  .akw-3b{overflow:hidden}
  .akw-3b-in{padding:17px 17px 0}
  .akw-3b-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .akw-3b-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#E2600F}
  .akw-3b-chip{height:19px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;
    font-size:9.5px;font-weight:800;background:rgba(242,117,26,.12);color:#D0530A}
  .akw-3b-chip[hidden]{display:none}
  .akw-3b-title{font-size:16px;font-weight:800;letter-spacing:-.033em;color:#1A1710;margin-top:8px;line-height:1.2}
  .akw-3b-sub{font-size:12px;line-height:1.45;color:#8C857A;margin-top:4px}
  /* 4단계 — 좁은 컬럼이라 가로 4칸 대신 세로 리스트 (세로 예산: 4×22 + 3×9 = 115px) */
  .akw-3b-stages{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .akw-3b-stage{display:flex;align-items:center;gap:10px}
  .akw-3b-mark{width:22px;height:22px;border-radius:8px;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;
    background:rgba(26,23,16,.06);color:#B0A99C;box-shadow:inset 0 0 0 .5px rgba(26,23,16,.08)}
  .akw-3b-label{flex:1;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:#A39C8F;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .akw-3b-stage[data-state="active"] .akw-3b-mark{background:#F2751A;color:#fff;
    box-shadow:0 8px 18px -8px rgba(242,117,26,.7)}
  .akw-3b-stage[data-state="active"] .akw-3b-label{color:#1A1710}
  .akw-3b-stage[data-state="done"] .akw-3b-mark{background:#146259;color:#fff;box-shadow:none}
  .akw-3b-stage[data-state="done"] .akw-3b-label{color:#1A1710}
  /* 진행 바 + 다음 할 일 (B상태) */
  .akw-3b-progress{margin-top:11px}
  .akw-3b-progress[hidden]{display:none}
  .akw-3b-track{height:5px;border-radius:3px;background:rgba(26,23,16,.09);overflow:hidden}
  .akw-3b-fill{display:block;height:5px;width:0;border-radius:3px;
    background:linear-gradient(90deg,#F2751A,#DE5B0B);transition:width .45s cubic-bezier(.32,.72,0,1)}
  .akw-3b-plabel{font-size:11.5px;font-weight:700;color:#D0530A;margin-top:6px;font-variant-numeric:tabular-nums}
  .akw-3b-next{margin-top:10px;border-radius:12px;background:rgba(242,117,26,.08);
    padding:9px 11px;display:flex;align-items:center;gap:8px;
    box-shadow:inset 0 0 0 .5px rgba(242,117,26,.2)}
  .akw-3b-next[hidden]{display:none}
  .akw-3b-dot{width:6px;height:6px;border-radius:50%;background:#F2751A;flex:none;
    animation:akw3Breath 2.4s ease-in-out infinite}
  .akw-3b-nexttext{flex:1;min-width:0;font-size:12px;font-weight:700;line-height:1.4;color:#B14705}
  /* 액션 — CTA 44/14 + 한 줄 안내 (디자인 B 실측. 별점 행은 W4 에서 제거) */
  .akw-3b-act{padding:15px 17px 17px}
  .akw-3b-cta{height:44px;border-radius:14px;background:linear-gradient(180deg,#F2751A,#DE5B0B);
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14px;font-weight:700;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -9px rgba(242,117,26,.6);
    transition:transform .16s cubic-bezier(.32,.72,0,1)}
  .akw-3b-cta:hover{color:#fff;transform:translateY(-1px)}
  .akw-3b-cta:active{transform:scale(.978)}
  .akw-3b-takes{margin-top:9px;text-align:center;font-size:11px;color:#A39C8F;line-height:1.4}

  /* ═══ ③ 상태 카드 C — applying (isApplying.html 실측 이식 · W4) ═══
     주황 링 + 글로우가 '지금 이어서 하라'는 신호다. 진행바 6px·라벨은 JS 가 채운다. */
  .akw-stc{padding:17px;
    box-shadow:0 0 0 1.5px rgba(242,117,26,.3),0 12px 30px -18px rgba(242,117,26,.4)}
  .akw-stc-t{font-size:16px;font-weight:800;letter-spacing:-.033em;color:#1A1710;margin-top:8px;line-height:1.25}
  .akw-stc-bar{margin-top:13px}
  .akw-stc-track{height:6px;border-radius:4px;background:rgba(26,23,16,.09);overflow:hidden}
  .akw-stc-fill{display:block;height:6px;width:0;border-radius:4px;
    background:linear-gradient(90deg,#F2751A,#DE5B0B);transition:width .45s cubic-bezier(.32,.72,0,1)}
  .akw-stc-pl{font-size:11.5px;font-weight:700;color:#D0530A;margin-top:7px;font-variant-numeric:tabular-nums}
  .akw-stc-pl:empty{display:none}
  .akw-stc .akw-3b-next{margin-top:12px;border-radius:13px;padding:11px 12px}
  .akw-stc-cta{margin-top:13px}

  /* ═══ ④ 상태 카드 D — done (isDone.html 실측 이식 · W4) — 카드 전체가 my-page/ 링크 ═══ */
  .akw-std{display:block;padding:17px;color:#fff;
    background:linear-gradient(160deg,#1C5A52,#123F3A);
    box-shadow:0 16px 36px -20px rgba(18,63,58,.75)}
  .akw-std-head{display:flex;align-items:center;gap:9px}
  .akw-std-ck{width:26px;height:26px;border-radius:9px;flex:none;
    background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
  .akw-std-head b{font-size:15.5px;font-weight:800;letter-spacing:-.03em;color:#fff}
  .akw-std-s{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:9px}
  .akw-std-cta{margin-top:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.26)}
  .akw-std:hover .akw-std-cta{transform:translateY(-1px)}

  /* ═══ ③ 메뉴 리스트 ═══════════════════════════════════════ */
  /* 7행 × 36 + 행간 4×6 + 패딩 12 = 288px — 42px 행이면 세로 900 노트북에서 마지막 'My page' 가 잘렸다.
     세로 900 기준 레일 가용 높이 = 900 - (헤더바닥 80) - (아래 여백 16) ≈ 804px 이라
     좌 레일 총합을 780 아래로 두어야 스크롤 없이 다 보인다.
     행간 4px(2026-08-14 ⓑ): hover 배경(라운드 11)이 붙어 보여 행 구분이 안 됐다.
     6px 대신 4px 인 이유 = 위 세로 예산(+24px 만 소비). hover 색·활성 주황은 그대로. */
  .akw-rnav{padding:6px;display:flex;flex-direction:column;gap:4px}
  .akw-rnav-row{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;
    border-radius:11px;transition:background .18s}
  .akw-rnav-row:hover{background:rgba(26,23,16,.045)}
  .akw-rnav-row[aria-current="page"]{background:rgba(242,117,26,.09)}
  .akw-rnav-ic{width:24px;height:24px;border-radius:8px;flex:none;
    display:flex;align-items:center;justify-content:center}
  .akw-rnav-lb{flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:-.02em;color:#1A1710;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .akw-rnav-row[aria-current="page"] .akw-rnav-lb{color:#D0530A;font-weight:700}
  .akw-rnav-row:hover .akw-rnav-lb{color:#1A1710}
  .akw-tint-orange{background:rgba(242,117,26,.12)}
  .akw-tint-teal{background:rgba(20,98,90,.11)}
  .akw-tint-indigo{background:rgba(46,58,140,.11)}
  .akw-tint-wine{background:rgba(140,47,57,.11)}
  .akw-tint-olive{background:rgba(95,107,47,.13)}
  .akw-tint-ink{background:rgba(26,23,16,.06)}

  /* ═══ 우 ① 앱 QR 카드 ═════════════════════════════════════
     앱 출시 전이라 감춰둔다 (사장님 2026-08-13).
     ▶ 출시 후 아래 .akw-rqr{display:none} 한 줄만 삭제하면 그대로 살아난다. */
  .akw-rqr{display:none}
  .akw-rqr{padding:18px}
  .akw-rqr-head{display:flex;align-items:center;gap:11px}
  .akw-rqr-mark{width:38px;height:38px;border-radius:12px;flex:none;
    background:linear-gradient(180deg,#F2751A,#DE5B0B);
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
  .akw-rqr-ti{flex:1;min-width:0;display:block}
  .akw-rqr-t{display:block;font-size:15px;font-weight:800;letter-spacing:-.03em;color:#1A1710}
  .akw-rqr-s{display:block;font-size:11.5px;color:#8C857A;margin-top:2px}
  .akw-rqr-box{display:flex;justify-content:center;margin-top:15px}
  .akw-rqr-img{width:132px;height:132px;border-radius:16px;background:#FAF8F5;
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 .5px rgba(26,23,16,.08)}
  .akw-rqr-note{font-size:12px;line-height:1.5;color:#8C857A;margin-top:13px;text-align:center}

  /* ═══ 우 ② 겨울학기 배너 (03-banner 이식 · 세로 카드형) ═══ */
  .akw-rban{border-radius:18px;padding:19px;color:#fff;position:relative;overflow:hidden;
    background:linear-gradient(150deg,#F2751A,#DE5B0B);
    box-shadow:0 18px 40px -20px rgba(242,117,26,.75)}
  .akw-rban::before{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(118deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px)}
  .akw-rban-in{position:relative}
  .akw-rban-headrow{display:flex;align-items:center;gap:8px}
  .akw-rban-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9);flex:none;
    animation:akw3Breath 2.2s ease-in-out infinite}
  .akw-rban-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.8)}
  .akw-rban-t{font-size:20px;font-weight:800;letter-spacing:-.038em;margin-top:10px;line-height:1.2;color:#fff}
  .akw-rban-count{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
    border-radius:10px;background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    margin-top:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.26)}
  .akw-rban-count[hidden]{display:none}
  .akw-rban-count-k{font-size:11.5px;color:rgba(255,255,255,.84)}
  .akw-rban-count-v{font-size:13px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
  .akw-rban-s{font-size:12px;line-height:1.5;color:rgba(255,255,255,.76);margin-top:11px}
  .akw-rban-cta{margin-top:14px;height:46px;border-radius:14px;background:#fff;
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14.5px;font-weight:800;color:#C24F0A;
    box-shadow:0 10px 24px -12px rgba(0,0,0,.4);
    transition:transform .16s cubic-bezier(.32,.72,0,1)}
  .akw-rban-cta:hover{color:#C24F0A;transform:translateY(-1px)}
  .akw-rban-cta:active{transform:scale(.978)}
  .akw-rban-foot{text-align:center;font-size:11px;color:rgba(255,255,255,.7);margin-top:9px}

  @media (prefers-reduced-motion:reduce){
    .akw-3b-dot,.akw-rban-dot{animation:none}
    .akw-3b-cta,.akw-rban-cta,.akw-rl-g{transition:none}
    .akw-3b-fill,.akw-stc-fill{transition:none}
  }