/* 제목용 공고딕. 한글 전 영역 + 라틴을 담은 서브셋이다.
   베트남어 성조 부호(ế, ự …)가 없어 vi 에서는 본문 폰트를 그대로 쓴다. */
@font-face{
  font-family:"Gong Gothic";
  src:url("gong-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gong Gothic";
  src:url("gong-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
    --ground:#E3DCCD;
    --surface:#F3EFE6;
    --surface-2:#EAE4D6;
    --ink:#231D17;
    --ink-2:#5E554A;
    --ink-3:#877D6F;
    --rule:#CCC2AE;
    --rule-soft:#D9D1BF;
    --brass:#8E7220;
    --sq-a:#2E7A4E;
    --sq-b:#AC3830;
    --sq-c:#2A5B99;
    --sq-d:#B96820;
    --sq-a-wash:#DCE8DF;
    --sq-b-wash:#EFDDDA;
    --sq-c-wash:#DBE3EE;
    --sq-d-wash:#F0E1D2;
    --shadow:0 1px 2px rgba(35,29,23,.07), 0 8px 22px -14px rgba(35,29,23,.30);

    --display:"Gong Gothic",var(--sans);
    --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"D2Coding","Noto Sans Mono",monospace;

    --step--1:clamp(.75rem,.73rem + .1vw,.8rem);
    --step-0:clamp(.94rem,.91rem + .16vw,1rem);
    --step-1:clamp(1.05rem,1rem + .26vw,1.19rem);
    --step-2:clamp(1.24rem,1.13rem + .5vw,1.6rem);
    --step-4:clamp(1.85rem,1.35rem + 2.3vw,3.4rem);

    --gut:clamp(1rem,4vw,2.5rem);
    --tap:2.75rem;
  }

  @media (prefers-color-scheme:dark){
    :root{
      --ground:#17130F; --surface:#211C17; --surface-2:#2A241D;
      --ink:#EDE6D8; --ink-2:#A79C8B; --ink-3:#847A6C;
      --rule:#3A322A; --rule-soft:#2F2820; --brass:#D3AD4C;
      --sq-a:#63B287; --sq-b:#E2766C; --sq-c:#77A3D9; --sq-d:#E09A52;
      --sq-a-wash:#1E2B23; --sq-b-wash:#31201D; --sq-c-wash:#1D2733; --sq-d-wash:#312417;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ground:#17130F; --surface:#211C17; --surface-2:#2A241D;
    --ink:#EDE6D8; --ink-2:#A79C8B; --ink-3:#847A6C;
    --rule:#3A322A; --rule-soft:#2F2820; --brass:#D3AD4C;
    --sq-a:#63B287; --sq-b:#E2766C; --sq-c:#77A3D9; --sq-d:#E09A52;
    --sq-a-wash:#1E2B23; --sq-b-wash:#31201D; --sq-c-wash:#1D2733; --sq-d-wash:#312417;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  }
  :root[data-theme="light"]{
    --ground:#E3DCCD; --surface:#F3EFE6; --surface-2:#EAE4D6;
    --ink:#231D17; --ink-2:#5E554A; --ink-3:#877D6F;
    --rule:#CCC2AE; --rule-soft:#D9D1BF; --brass:#8E7220;
    --sq-a:#2E7A4E; --sq-b:#AC3830; --sq-c:#2A5B99; --sq-d:#B96820;
    --sq-a-wash:#DCE8DF; --sq-b-wash:#EFDDDA; --sq-c-wash:#DBE3EE; --sq-d-wash:#F0E1D2;
    --shadow:0 1px 2px rgba(35,29,23,.07), 0 8px 22px -14px rgba(35,29,23,.30);
  }

  html[lang="vi"]{ --display:var(--sans); }   /* 성조 부호가 빠져 섞여 보인다 */

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--sans);
    font-size:var(--step-0);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
  }
  button{font:inherit;-webkit-tap-highlight-color:transparent}

  .wrap{
    width:100%;
    max-width:64rem;
    margin:0 auto;
    padding-left:max(var(--gut), env(safe-area-inset-left));
    padding-right:max(var(--gut), env(safe-area-inset-right));
  }

  /* ---------- masthead ---------- */
  .masthead{
    padding:clamp(1.5rem,5vw,3.25rem) 0 clamp(1.35rem,4vw,2.25rem);
    border-bottom:2px solid var(--ink);
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:var(--step--1);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0 0 .85rem;
  }
  .eyebrow .clock{color:var(--ink-3);margin-left:.6rem}
  @media (max-width:30rem){.eyebrow .clock{display:block;margin:.2rem 0 0}}
  .masthead h1{
    font-family:var(--display);
    font-size:var(--step-4);
    line-height:1.04;
    letter-spacing:-.03em;
    font-weight:800;
    margin:0;
    text-wrap:balance;
  }
  .masthead h1 .sub{
    display:block;
    font-size:var(--step-2);
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--ink-2);
    margin-top:.45rem;
  }
  .dossier{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
    gap:.8rem 1.5rem;
    margin:clamp(1.4rem,4vw,2.5rem) 0 0;
  }
  .dossier div{border-top:1px solid var(--rule);padding-top:.5rem}
  .dossier dt{
    font-family:var(--mono);
    font-size:var(--step--1);
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3);
  }
  .dossier dd{margin:.15rem 0 0;font-weight:600;font-variant-numeric:tabular-nums}

  /* ---------- sticky control bar ---------- */
  .picker{
    position:sticky;
    top:0;
    z-index:30;
    background:var(--ground);
    background:color-mix(in srgb, var(--ground) 94%, transparent);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--rule);
  }
  .picker-inner{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    padding:.5rem 0 .55rem;
  }
  .pick-row{display:flex;align-items:center;gap:.5rem}
  .picker-label{
    font-family:var(--mono);
    font-size:var(--step--1);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-3);
    white-space:nowrap;
    flex:0 0 3.1rem;
  }
  .chipset{display:flex;gap:.3rem;flex:1;min-width:0}
  .chip{
    flex:1 1 0;
    min-width:0;
    min-height:var(--tap);
    font-family:var(--mono);
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    padding:.5rem .25rem;
    border:1.5px solid var(--rule);
    border-radius:4px;
    background:var(--surface);
    color:var(--ink-2);
    cursor:pointer;
    transition:background .13s ease,color .13s ease,border-color .13s ease;
  }
  .chip:hover{border-color:var(--ink-3);color:var(--ink)}
  .chip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .chip.on{background:var(--c);border-color:var(--c);color:var(--surface)}
  .chip.on:hover{color:var(--surface)}

  .lang{
    display:flex;
    flex:0 0 auto;
    border:1.5px solid var(--rule);
    border-radius:4px;
    overflow:hidden;
    background:var(--surface);
  }
  .lang button{
    min-height:var(--tap);
    padding:.5rem .55rem;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    border:none;
    background:transparent;
    color:var(--ink-3);
    cursor:pointer;
  }
  .lang button + button{border-left:1.5px solid var(--rule)}
  .lang button.on{background:var(--ink);color:var(--ground)}
  .lang button:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}

  .reset{
    flex:0 0 auto;
    min-height:var(--tap);
    padding:.5rem .6rem;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.06em;
    background:var(--surface);
    border:1.5px solid var(--rule);
    border-radius:4px;
    color:var(--ink-3);
    cursor:pointer;
  }
  .reset:hover{color:var(--ink);border-color:var(--ink-3)}
  .reset:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

  @media (min-width:40rem){
    .picker-inner{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;padding:.7rem 0}
    .pick-row{flex:0 0 auto}
    .picker-label{flex:0 0 auto}
    .chipset{flex:0 0 auto}
    .chip{flex:0 0 auto;min-width:2.9rem;padding:.5rem .85rem}
    .lang{margin-left:auto}
  }

  /* ---------- sections ---------- */
  .section{padding:clamp(2.25rem,6vw,4.25rem) 0}
  .section + .section{border-top:1px solid var(--rule-soft)}
  .sec-head{margin-bottom:clamp(1.2rem,3vw,1.9rem)}
  .sec-num{
    font-family:var(--mono);
    font-size:var(--step--1);
    letter-spacing:.14em;
    color:var(--brass);
    display:block;
    margin-bottom:.4rem;
  }
  .sec-head h2{font-family:var(--display);font-size:var(--step-2);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
  .sec-head p,.sec-head .sec-desc{display:block;font-family:var(--display);margin:.5rem 0 0;color:var(--ink-2);max-width:62ch}

  /* ---------- 접는 섹션 (details) ---------- */
  /* summary 안에는 p 를 못 넣어 설명은 .sec-desc 로 둔다 */
  .fold > summary{position:relative;list-style:none;cursor:pointer;padding-right:5rem}
  .fold > summary::-webkit-details-marker{display:none}
  .fold > summary:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px}
  .fold[open] > summary{margin-bottom:clamp(1.2rem,3vw,1.9rem)}
  .fold:not([open]) > summary{margin-bottom:0}
  .fold-btn{
    position:absolute;right:0;top:1.35rem;
    padding:.32rem .8rem;
    font-size:var(--step--1);font-weight:600;
    color:var(--ink-2);background:var(--surface);
    border:1px solid var(--rule);border-radius:999px;
    white-space:nowrap;
  }
  .fold > summary:hover .fold-btn{color:var(--ink);border-color:var(--ink-3)}
  /* 화살표는 글꼴에 없는 글자 대신 테두리로 그린다 */
  .fold-btn::before{
    content:"";display:inline-block;width:.42em;height:.42em;margin:0 .45rem .2em 0;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .15s;
  }
  .fold[open] .fold-btn::before{transform:rotate(225deg);margin-bottom:-.1em}
  .fold-close,.fold[open] .fold-open{display:none}
  .fold[open] .fold-close{display:inline}

  /* ---------- orders ---------- */
  .empty{
    border:1.5px dashed var(--rule);
    border-radius:5px;
    padding:clamp(1.35rem,5vw,2.25rem) 1rem;
    text-align:center;
    color:var(--ink-2);
    background:var(--surface);
  }
  .empty strong{display:block;color:var(--ink);font-size:var(--step-1);margin-bottom:.3rem}

  .idcard{
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:.9rem 1rem;
    border-radius:5px;
    background:var(--wash);
    border:1px solid var(--rule);
    border-left:5px solid var(--c);
    margin-bottom:1.15rem;
  }
  .idcard .glyph{
    font-family:var(--mono);
    font-size:clamp(1.5rem,6vw,2.1rem);
    font-weight:800;
    line-height:1;
    color:var(--c);
    letter-spacing:-.04em;
    flex:0 0 auto;
  }
  .idcard .who{font-weight:700;font-size:var(--step-0);display:block}
  .idcard .role{color:var(--ink-2);font-size:var(--step--1);display:block;line-height:1.4}

  .orders{display:flex;flex-direction:column;gap:.9rem}
  .order{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:5px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .order-head{
    display:flex;
    align-items:baseline;
    gap:.55rem;
    flex-wrap:wrap;
    padding:.7rem .9rem;
    background:var(--surface-2);
    border-bottom:1px solid var(--rule);
  }
  .order-code{
    font-family:var(--mono);
    font-size:var(--step--1);
    font-weight:700;
    letter-spacing:.12em;
    color:var(--brass);
  }
  .order-name{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
  .order-clock{
    flex-basis:100%;
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  @media (min-width:34rem){
    .order-clock{flex-basis:auto;margin-left:auto;white-space:nowrap}
  }
  .order ul{list-style:none;margin:0;padding:.35rem .3rem .55rem}
  .task{
    display:flex;
    gap:.65rem;
    align-items:flex-start;
    padding:.55rem .65rem;
    border-radius:4px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .task:active{background:var(--surface-2)}
  @media (hover:hover){.task:hover{background:var(--surface-2)}}
  .task input{
    appearance:none;
    -webkit-appearance:none;
    flex:0 0 auto;
    width:1.15rem;height:1.15rem;
    margin:.26rem 0 0;
    border:1.5px solid var(--ink-3);
    border-radius:3px;
    background:transparent;
    cursor:pointer;
    position:relative;
  }
  .task input:checked{background:var(--c,var(--brass));border-color:var(--c,var(--brass))}
  .task input:checked::after{
    content:"";
    position:absolute;
    left:.33rem;top:.09rem;
    width:.3rem;height:.6rem;
    border:solid var(--surface);
    border-width:0 2px 2px 0;
    transform:rotate(42deg);
  }
  .task input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .task input:checked ~ .task-body{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
  .task-body{flex:1;min-width:0}
  .tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.08rem .38rem;
    border-radius:3px;
    margin-right:.4rem;
    vertical-align:.1em;
    white-space:nowrap;
    background:var(--surface-2);
    color:var(--ink-3);
    border:1px solid var(--rule);
  }
  .tag.key{background:var(--c);color:var(--surface);border-color:var(--c)}
  .tag.warn{background:transparent;color:var(--brass);border-color:var(--brass)}

  .order.unknown{
    background:repeating-linear-gradient(135deg,transparent 0 9px,var(--surface-2) 9px 10px),var(--surface);
    border-style:dashed;
  }
  .order.unknown .order-head{background:transparent}

  /* ---------- role cards ---------- */
  .roles{display:grid;gap:.65rem;grid-template-columns:1fr}
  @media (min-width:48rem){.roles{grid-template-columns:repeat(3,1fr)}}
  .role-card{
    background:var(--surface);
    border:1px solid var(--rule);
    border-top:3px solid var(--brass);
    border-radius:5px;
    padding:.9rem 1rem 1rem;
    display:flex;
    flex-direction:column;
    gap:.45rem;
  }
  .role-card .n{
    font-family:var(--mono);
    font-size:var(--step-1);
    font-weight:800;
    color:var(--brass);
    letter-spacing:.02em;
  }
  .role-card .duty{font-weight:500}
  .role-card .orig{
    font-family:var(--mono);
    font-size:.7rem;
    line-height:1.5;
    color:var(--ink-3);
    border-top:1px dashed var(--rule);
    padding-top:.5rem;
    margin-top:auto;
    word-break:break-word;
  }

  /* ---------- timeline ---------- */
  .phase{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.75rem;
    padding:1.15rem 0;
    border-top:1px solid var(--rule-soft);
  }
  .phase:first-of-type{border-top:2px solid var(--ink)}
  @media (min-width:52rem){
    .phase{grid-template-columns:12.5rem minmax(0,1fr);gap:2rem;padding:1.35rem 0}
  }
  .phase-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem}
  @media (min-width:52rem){.phase-meta{display:block}}
  .phase-meta .code{
    font-family:var(--mono);
    font-weight:800;
    font-size:var(--step-1);
    color:var(--brass);
  }
  .phase-meta .title{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
  .phase-meta .when{
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
    flex-basis:100%;
  }
  @media (min-width:52rem){
    .phase-meta .code,.phase-meta .title,.phase-meta .when{display:block}
    .phase-meta .title{margin-top:.1rem}
    .phase-meta .when{margin-top:.35rem}
  }
  .phase-body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
  .lane{
    display:flex;
    gap:.7rem;
    padding:.65rem .8rem;
    background:var(--surface);
    border:1px solid var(--rule);
    border-left:4px solid var(--c);
    border-radius:4px;
    min-width:0;
  }
  .lane.all{--c:var(--brass)}
  .lane.gap{border-style:dashed;background:transparent;color:var(--ink-2)}
  .lane-tag{
    font-family:var(--mono);
    font-weight:800;
    font-size:.82rem;
    color:var(--c);
    flex:0 0 3.1rem;
    letter-spacing:-.01em;
    padding-top:.12rem;
  }
  .lane div{min-width:0}
  .lane p{margin:0;overflow-wrap:anywhere}
  .lane p + p{margin-top:.3rem}
  .fine{color:var(--ink-2);font-size:var(--step--1)}

  /* ---------- roster ---------- */
  /* 폰에서도 한 줄에 두 장. 좁아진 만큼 카드 안쪽을 함께 조인다 */
  .roster{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:37.99rem){
    .rcard{border-left-width:4px}
    .rcard header{padding:.45rem .55rem;gap:.35rem}
    .rcard .lbl{font-size:.7rem;line-height:1.35}
    .rcard ol{padding:.2rem .3rem .4rem}
    .rcard li{padding:.24rem .25rem;gap:.4rem}
    .rcard .slot{flex:0 0 1.35rem;font-size:.68rem}
  }
  @media (min-width:38rem){.roster{gap:.65rem}}
  .rcard{
    background:var(--surface);
    border:1px solid var(--rule);
    border-left:5px solid var(--c);
    border-radius:5px;
    overflow:hidden;
  }
  .rcard header{
    display:flex;
    align-items:baseline;
    gap:.5rem;
    padding:.6rem .85rem;
    background:var(--wash);
    border-bottom:1px solid var(--rule);
  }
  .rcard .sq{font-family:var(--mono);font-weight:800;font-size:var(--step-1);color:var(--c)}
  .rcard .lbl{font-size:var(--step--1);color:var(--ink-2)}
  .rcard .pow{
    margin-left:auto;
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  .rcard ol{list-style:none;margin:0;padding:.3rem .5rem .5rem}
  .rcard li{display:flex;gap:.6rem;align-items:baseline;padding:.28rem .35rem}
  .rcard li + li{border-top:1px solid var(--rule-soft)}
  .rcard .slot{
    font-family:var(--mono);
    font-size:.75rem;
    font-weight:700;
    color:var(--ink-3);
    flex:0 0 1.5rem;
  }
  .rcard .nm{overflow-wrap:anywhere;color:var(--c)}
  .rcard .nm.vacant{color:var(--ink-3)}
  .rcard.reserve .nm{color:var(--ink)}  /* 예비는 조가 없어 기본색 */
  .vacant{color:var(--ink-3);font-style:italic}

  /* 예비는 조가 없다 — 색 대신 점선 테두리로 구분한다 */
  .rcard.reserve{ --c:var(--ink-3); --wash:var(--surface-2); border-left-style:dashed; }
  .rcard.reserve .sq{ font-size:var(--step-0); letter-spacing:.02em; }

  /* ---------- notes ---------- */
  .notes{display:flex;flex-direction:column;gap:.8rem}
  .note{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:5px;
    padding:.95rem 1rem 1.05rem;
  }
  .note h3{margin:0;font-size:var(--step-0);font-weight:700;letter-spacing:-.01em}
  .note .src{
    display:block;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--ink-3);
    margin-top:.15rem;
  }
  .note ul{margin:.65rem 0 0;padding-left:1.05rem;color:var(--ink-2)}
  .note li{margin:.3rem 0}
  .note > p{margin:.5rem 0 0;color:var(--ink-2)}
  .note.adopted{border-left:4px solid var(--sq-a)}
  .verdict{
    display:inline-block;
    margin-top:.7rem;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.06em;
    color:var(--sq-a);
    border:1px solid var(--sq-a);
    border-radius:3px;
    padding:.15rem .45rem;
  }
  blockquote{
    margin:.65rem 0 0;
    padding-left:.85rem;
    border-left:2px solid var(--brass);
    font-size:var(--step--1);
    line-height:1.6;
    overflow-wrap:anywhere;
  }
  blockquote cite{
    display:block;
    font-style:normal;
    font-family:var(--mono);
    color:var(--ink-3);
    margin-top:.3rem;
    font-size:.7rem;
    letter-spacing:.04em;
    line-height:1.5;
  }

  /* ---------- gaps ---------- */
  .gaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
  .gaps li{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    padding:.65rem .85rem;
    border:1px dashed var(--rule);
    border-radius:4px;
    background:repeating-linear-gradient(135deg,transparent 0 9px,var(--surface-2) 9px 10px);
  }
  @media (min-width:34rem){
    .gaps li{flex-direction:row;gap:.85rem}
  }
  .gaps .when{
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--brass);
    flex:0 0 auto;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  footer{
    border-top:2px solid var(--ink);
    padding:1.5rem 0 calc(2.5rem + env(safe-area-inset-bottom));
    color:var(--ink-3);
    font-family:var(--mono);
    font-size:var(--step--1);
    letter-spacing:.03em;
    display:flex;
    flex-wrap:wrap;
    gap:.35rem 1.5rem;
  }

  @media (prefers-reduced-motion:no-preference){
    .orders{animation:rise .28s ease both}
    @keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  }

/* ---------- 서버 렌더 추가분 ---------- */
.topbar{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.topbar a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.1rem}
.topbar a:hover{color:var(--ink);border-color:var(--ink)}
.topbar .spacer{margin-left:auto}
.saved{color:var(--sq-a)}
.flash{padding:.7rem .9rem;border-radius:4px;margin-bottom:1rem;border:1px solid var(--rule);background:var(--surface)}
.flash.err{border-left:4px solid var(--sq-b);color:var(--sq-b)}
.flash.ok{border-left:4px solid var(--sq-a);color:var(--sq-a)}
.flash .hint{display:inline-block;margin-top:.35rem;color:var(--ink-2);font-size:var(--step--1);line-height:1.5}
noscript .empty{border-style:solid}

/* ---------- 서버 렌더: 칩·언어토글·리셋이 <button>이 아닌 <a> ---------- */
a.chip, a.reset, .lang a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.lang a{
  min-height:var(--tap);
  padding:.5rem .55rem;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-3);
  background:transparent;
}
.lang a + a{border-left:1.5px solid var(--rule)}
.lang a.on{background:var(--ink);color:var(--ground)}
a.chip:focus-visible, a.reset:focus-visible, .lang a:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}
footer .spacer{margin-left:auto}
footer a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- 마스트헤드 상단 편집 링크 ---------- */
.topline{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.85rem;
}
.topline .eyebrow{margin:0}
.topline .editlink{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:2.25rem;
  padding:.35rem .7rem;
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.08em;
  color:var(--ink-3);
  background:var(--surface);
  border:1.5px solid var(--rule);
  border-radius:4px;
  text-decoration:none;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.topline .editlink:hover{color:var(--ink);border-color:var(--ink-3)}
.topline .editlink:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.topline .editlink.on{color:var(--brass);border-color:var(--brass)}

/* ---------- 언어 드롭다운 ---------- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.langpick{
  display:flex;
  gap:.3rem;
  flex:0 0 auto;
  margin-left:auto;
}
.langpick select{
  min-height:var(--tap);
  max-width:9rem;
  padding:.5rem 1.6rem .5rem .6rem;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--ink-2);
  background-color:var(--surface);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  border:1.5px solid var(--rule);
  border-radius:4px;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  text-overflow:ellipsis;
}
.langpick select:hover{border-color:var(--ink-3);color:var(--ink)}
.langpick select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.langgo{
  min-height:var(--tap);
  padding:.5rem .6rem;
  font-family:var(--mono);
  background:var(--surface);
  color:var(--ink-2);
  border:1.5px solid var(--rule);
  border-radius:4px;
  cursor:pointer;
}
@media (min-width:40rem){
  .langpick select{max-width:12rem}
}

/* =========================================================
   데스크탑 레이어

   여기까지의 규칙은 전부 좁은 화면 기준이다. 넓은 화면에서는
   여백만 늘어나 "폰 화면을 늘려놓은 것"처럼 보이므로, 남는 가로 폭을
   실제 레이아웃으로 쓴다 — 개인 임무는 신분증(고정) + 지시 다단,
   편성·범례는 단 수를 늘리고, 타이포 크기도 한 단계 올린다.
   ========================================================= */
@media (min-width:64rem){
  :root{ --gut:3rem; }

  body{ font-size:1.02rem; line-height:1.66; }
  .wrap{ max-width:74rem; }

  .masthead{ padding:3.5rem 0 2.5rem; }
  .topline{ margin-bottom:1.1rem; }

  .picker-inner{ padding:.8rem 0; gap:.5rem 2rem; }
  .chip{ min-width:3.1rem; padding:.55rem 1rem; font-size:1rem; }
  .picker-label{ font-size:.76rem; }

  .section{ padding:4.5rem 0; }
  .sec-head{ margin-bottom:2rem; }
  .sec-head h2{ font-size:1.75rem; }
  .sec-head p{ font-size:1.02rem; }

  /* 개인 임무 — 신분증은 왼쪽에 고정, 지시는 2단으로 */
  #mine-out{
    display:grid;
    grid-template-columns:15rem minmax(0,1fr);
    gap:1.75rem;
    align-items:start;
  }
  #mine-out > .empty{ grid-column:1 / -1; }
  .idcard{
    margin-bottom:0;
    position:sticky;
    top:5.5rem;
    flex-direction:column;
    align-items:flex-start;
    gap:.6rem;
    padding:1.15rem 1.1rem 1.25rem;
  }
  .idcard .glyph{ font-size:2.6rem; }
  .idcard .who{ font-size:1.05rem; }
  .idcard .role{ line-height:1.5; }

  .orders{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    align-items:start;
  }

  .roles{ gap:1rem; }
  .role-card{ padding:1.1rem 1.2rem 1.25rem; }

  .phase{ grid-template-columns:14rem minmax(0,1fr); gap:2.5rem; padding:1.6rem 0; }
  .lane{ padding:.8rem 1rem; }
  .lane-tag{ flex-basis:3.6rem; }

  .roster{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
  .rcard li{ padding:.34rem .35rem; }

  .notes{ gap:1rem; }
  .note{ padding:1.2rem 1.35rem 1.3rem; }
  .note h3{ font-size:1.08rem; }

  .gaps li{ padding:.85rem 1.1rem; }

  footer{ padding:2rem 0 4rem; }
}

/* 아주 넓은 화면 — 지시를 3단까지 */
@media (min-width:100rem){
  .wrap{ max-width:88rem; }
  #mine-out{ grid-template-columns:16rem minmax(0,1fr); gap:2.25rem; }
  .orders{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .phase{ grid-template-columns:16rem minmax(0,1fr); }
}

/* =========================================================
   컨트롤 바 격자 정렬

   두 줄(조 / 번호)이 세로로 쌓일 때, 오른쪽 끝 요소의 폭이 서로 달라
   칩 크기가 줄마다 달라지는 문제가 있었다. 언어 드롭다운은 선택된
   언어 이름 길이에 따라 폭이 변해 칩 위치까지 흔들렸다.
   오른쪽 끝을 고정 폭 한 칸으로 못박고, 그 칸에 1행은 드롭다운을,
   2행은 [5번 + 해제]를 넣어 칩 4개가 정확히 겹치도록 한다.
   ========================================================= */
@media (max-width:39.999rem){
  :root{ --pk-side:clamp(6.75rem, 31vw, 9rem); }

  .pick-row{
    display:grid;
    grid-template-columns:2.6rem repeat(4, minmax(0,1fr)) var(--pk-side);
    gap:.35rem;
    align-items:center;
  }
  .chipset{ display:contents; }        /* 칩이 부모 격자에 직접 배치되도록 */
  .picker-label{ flex:none; font-size:.68rem; overflow:hidden; }

  .tail{ display:flex; gap:.35rem; min-width:0; }
  .tail .chip{ flex:0 0 2.6rem; }
  .tail .reset{ flex:1 1 auto; min-width:0; padding:.5rem .3rem; text-align:center; }

  .langpick{ margin-left:0; min-width:0; }
  .langpick select{ width:100%; max-width:none; }
}

/* 넓은 화면에서는 두 줄이 한 줄로 합쳐지므로 격자 정렬이 필요 없다 */
@media (min-width:40rem){
  .chipset{ display:flex; }
  .tail{ display:flex; gap:.35rem; align-items:center; }
  .langpick select{ width:11rem; }     /* 언어를 바꿔도 폭이 흔들리지 않게 고정 */
}

/* ---------- 맵 이미지 ---------- */
/* 진영이 배틀마다 바뀌어 맵을 두 벌 넣는다. 스크립트 없이 라디오로 전환한다. */
.mapwrap{ position:relative; }
.sidesw{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.sidetabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin:0 0 1rem;
}
.sidetabs .sidelab{ color:var(--ink-2); font-size:var(--step--1); margin-right:.2rem; }
.sidetabs label{
  padding:.32rem .8rem;
  font-size:var(--step--1);
  font-weight:600;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:999px;
  cursor:pointer;
}
.sidetabs label:hover{ color:var(--ink); border-color:var(--ink-3); }
#side-nw:checked ~ .sidetabs label[for="side-nw"],
#side-se:checked ~ .sidetabs label[for="side-se"]{
  color:var(--surface); background:var(--ink); border-color:var(--ink);
}
.sidesw:focus-visible ~ .sidetabs label[for="side-nw"],
.sidesw:focus-visible ~ .sidetabs label[for="side-se"]{ outline:2px solid var(--brass); outline-offset:2px; }
.mapset{ display:none; }
/* 전체 맵과 확대도를 같은 폭으로 세로로 쌓는다 */
#side-nw:checked ~ .mapset-nw,
#side-se:checked ~ .mapset-se{ display:grid; gap:1.6rem; justify-items:start; }
.mapfig{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:flex-start;
}
.mapfig img{
  display:block;
  width:100%;
  max-width:34rem;
  height:auto;
  border:1px solid var(--rule);
  border-radius:5px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.mapfig figcaption{
  color:var(--ink-2);
  font-size:var(--step--1);
  line-height:1.5;
  max-width:44ch;
}
@media (min-width:60rem){
  #side-nw:checked ~ .mapset-nw,
  #side-se:checked ~ .mapset-se{ gap:2rem; }
  .mapfig img{ max-width:38rem; }
}

/* ---------- 명단 선별 목록 ---------- */
.picklist{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:.35rem;
}
.pick{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:var(--tap);
  padding:.4rem .55rem;
  background:var(--surface);
  border:1.5px solid var(--rule);
  border-radius:4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pick:hover{border-color:var(--ink-3)}
.pick.on{border-color:var(--brass);background:var(--surface-2)}
.pick input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:1.05rem;height:1.05rem;
  border:1.5px solid var(--ink-3);
  border-radius:3px;
  background:transparent;
  position:relative;
  cursor:pointer;
}
.pick input[type="checkbox"]:checked{background:var(--brass);border-color:var(--brass)}
.pick input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:.3rem;top:.06rem;
  width:.28rem;height:.55rem;
  border:solid var(--surface);
  border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.pick input[type="checkbox"]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pick .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.pick .x{
  flex:0 0 auto;
  width:1.4rem;height:1.4rem;
  line-height:1;
  font-size:1rem;
  color:var(--ink-3);
  background:transparent;
  border:none;
  border-radius:3px;
  cursor:pointer;
}
.pick .x:hover{color:var(--sq-b);background:var(--ground)}