/* 다크 고정 — 패시브 색(게임 원색 계열)이 밝은 배경에서 읽히지 않는다 */
:root{--bg:#0f1216;--fg:#e6e9ef;--mut:#8b94a3;--card:#171c23;--line:#2a313b;--acc:#5b9df5;
 --ok:#35c48d;--warn:#e0a33a;--chip:#1f252e;color-scheme:dark}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;padding:24px 18px 60px;background:var(--bg);color:var(--fg);
 font-family:"Pretendard","Segoe UI",system-ui,sans-serif;line-height:1.5}
.wrap{max-width:1640px;margin:0 auto}
h1{font-size:1.45rem;margin:0 0 16px;display:flex;align-items:baseline;gap:11px}
/* 제목 옆 언어 표시. 지구본은 언어 기능임을 글자 없이 알리는 관용 아이콘이다.
   이름은 그 언어로 쓴 것을 보여준다(한국어 / 日本語 / Русский). */
#langBtn{font-size:.76rem;font-weight:400;color:var(--mut);cursor:pointer;
 padding:3px 10px 3px 8px;border:1px solid var(--line);border-radius:999px;background:none;
 display:inline-flex;align-items:center;gap:5px;line-height:1}
#langBtn svg{width:14px;height:14px;flex:none}
#langBtn:hover{color:var(--acc);border-color:var(--acc)}
.lbox{width:min(560px,92vw)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.lbtn{display:block;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
 background:var(--bg);color:var(--fg);font-size:.83rem;text-decoration:none;text-align:center}
.lbtn:hover{border-color:var(--acc);color:var(--acc)}
.lbtn.on{border-color:var(--acc);color:var(--acc);
 background:color-mix(in srgb,var(--acc) 14%,transparent)}
.grid{display:grid;grid-template-columns:340px minmax(0,1fr) 214px;gap:18px;align-items:start}
/* 우측 레일이 아래로 내려오면 세로 목록이 화면을 낭비한다. 칩을 가로로 눕히고
   크기를 줄여 한 줄에 여러 마리가 들어가게 한다. */
@media(max-width:1180px){
 .grid{grid-template-columns:340px minmax(0,1fr)}
 .rail{grid-column:1/-1;position:static}
 .rbox .items{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px}
 .rail .pchip{width:62px}
 .rail .pchip img,.rail .pchip .ov{width:46px;height:46px}
 .rail .pchip .ov{line-height:46px;font-size:1.2rem}
 .rail .pchip .n{font-size:.6rem}
}
/* 한 줄씩 위에서 아래로. 순서는 입력 -> 잡을/제외 목록 -> 결과.
   목록을 결과 위에 두는 것은 결과를 보고 팰을 빼는 조작이 잦기 때문이다.
   DOM 순서(입력·결과·레일)는 넓은 화면 기준이라 여기서 order 로 뒤집는다. */
@media(max-width:900px){
 .grid{grid-template-columns:1fr;gap:14px}
 .grid>div:first-child{order:1}
 .rail{order:2;flex-direction:column;gap:10px}
 .grid>div:nth-child(2){order:3}
 .rbox{flex:0 0 auto;padding:10px 12px 9px}
 .rbox h3{text-align:left;margin-bottom:7px}
 .rbox .items{justify-content:flex-start}
 .rbox .none3{text-align:left;padding:0 0 3px}
 .rbox .rsep{margin:5px 0 1px}
 .clrall{width:auto;padding:5px 13px}
}
/* ---- 우측 레일: 새로 잡을 팰 | 제외 중 을 좌우로 ---- */
.rail{position:sticky;top:16px;display:flex;flex-direction:row;gap:10px;align-items:flex-start}
.rbox{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--line);
 border-radius:12px;padding:11px 7px 9px}
.rbox h3{font-size:.72rem;margin:0 0 8px;letter-spacing:.03em;text-align:center;color:var(--mut)}
.rbox .items{display:flex;flex-direction:column;gap:9px;align-items:center}
.rbox .none3{font-size:.68rem;color:var(--mut);text-align:center;padding:3px 0 5px}
.rail .pchip{width:100%}
.rail .pchip img{width:58px;height:58px}
.rail .pchip .ov{width:58px;height:58px;line-height:58px;font-size:1.45rem}
.rail .pchip .n{font-size:.62rem}
.rbox .rsep{height:1px;background:var(--line);width:100%;margin:9px 0 2px}
.clrall{width:100%;margin-top:9px;padding:5px 0;font-size:.7rem;color:var(--mut);
 border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.clrall:hover{color:var(--warn);border-color:var(--warn)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px;margin-bottom:16px}
.panel h2{font-size:.92rem;margin:0 0 11px;display:flex;justify-content:space-between;align-items:center}
label{display:block;font-size:.76rem;color:var(--mut);margin:9px 0 4px}
input,select,button{font:inherit;color:var(--fg)}
input[type=text],input[type=number],select{width:100%;padding:7px 9px;border:1px solid var(--line);
 border-radius:8px;background:var(--bg)}
button{cursor:pointer;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 12px;font-size:.83rem}
button.primary{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600;width:100%;padding:10px}
button.mini{padding:3px 9px;font-size:.75rem}
/* 계산 + 링크 복사. 둘을 하나의 알약처럼 이어 붙인다. */
.gorow{display:flex;margin-bottom:16px}
.gorow .primary{flex:1;border-radius:10px 0 0 10px}
.linkbtn{flex:none;width:46px;padding:0;cursor:pointer;
 background:var(--acc);color:#fff;border:1px solid var(--acc);border-left-color:#0003;
 border-radius:0 10px 10px 0;display:grid;place-items:center}
.linkbtn:hover{filter:brightness(1.12)}
.linkbtn svg{width:17px;height:17px}
.gorow+.err:empty{display:none}
.gorow+.err{margin:-10px 0 14px}
/* 공유 링크로 들어온 동안 뜨는 띠. 내 설정은 아직 안 건드린 상태다. */
.sbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;
 padding:8px 11px;border:1px solid var(--acc);border-radius:9px;font-size:.78rem;
 background:color-mix(in srgb,var(--acc) 10%,transparent)}
.sbar>span{flex:1;min-width:140px}
.row{display:flex;gap:7px}.row>input{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:3px 8px 3px 10px;
 font-size:.76rem;display:flex;align-items:center;gap:5px}
.chip i{font-style:normal;color:var(--mut);cursor:pointer}.chip i:hover{color:var(--warn)}
.list{margin-top:9px;display:flex;flex-direction:column;gap:6px;max-height:250px;overflow-y:auto}
.item{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
 border-radius:9px;padding:5px 8px;font-size:.83rem}
.item img{width:26px;height:26px;border-radius:50%}
.item .ps{color:var(--acc);font-size:.72rem}
.item .del{margin-left:auto;color:var(--mut);cursor:pointer}.item .del:hover{color:var(--warn)}
.hint{font-size:.73rem;color:var(--mut);margin-top:6px}.err{color:var(--warn);font-size:.8rem;margin-top:6px}
/* 결과 사이 가로 배너 자리. 미게재 시 높이 0 으로 접힌다. */
.adslot{display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.adslot ins{width:100%}
.rescard{border:1px solid var(--line);border-radius:11px;padding:11px 12px 6px;margin-bottom:14px;
 background:color-mix(in srgb,var(--bg) 55%,transparent)}
.rescard:first-child{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.reshd{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:8px;font-size:.8rem}
.reshd b{color:var(--acc);font-size:1.02rem}
.reshd .png{margin-left:auto}
.reshd .png:disabled{opacity:.5;cursor:default}
.rbadge{width:20px;height:20px;line-height:19px;text-align:center;border-radius:50%;
 background:var(--acc);color:#0f1216;font-size:.7rem;font-weight:700}
.rescard:not(:first-child) .rbadge{background:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;color:var(--mut);font-weight:500;font-size:.74rem;border-bottom:1px solid var(--line);padding:5px 7px}
td{padding:6px 7px;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:0}
.pct{color:var(--ok)}.pct.low{color:var(--warn)}
td.opt,th.opt{color:var(--mut);font-size:.76rem}
table.steps td{vertical-align:middle}
table.steps td.n{color:var(--mut);width:26px;text-align:center}
.brd{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.brd img{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
 background:var(--bg);flex:none}
.brd .par{display:inline-flex;flex:none}
.brd .par img:last-child{margin-left:-10px}   /* 부모 둘은 살짝 겹쳐 붙인다 */
.brd .arw2{color:var(--mut);font-size:.9rem;margin:0 4px}
.plus{opacity:.5;margin:0 1px}
.brd .hint{margin-left:7px;font-size:.82rem}
/* 좌우 잘림 방지: 스크롤 컨테이너 안에서 justify-content:center 를 쓰면 넘칠 때
   양쪽이 잘려 왼쪽에 접근할 수 없다. 자식을 max-content 로 두고 margin auto 로 가운데. */
.tree{overflow-x:auto;padding:6px 2px 14px;cursor:grab;user-select:none;
 overscroll-behavior-x:contain}
.tree.drag{cursor:grabbing}
.tree>ul{width:max-content;margin:0 auto;min-width:100%;justify-content:center}
/* gap 을 쓰면 li 사이가 벌어져 가로 연결선이 끊긴다. 간격은 li 좌우 패딩으로 준다. */
.tree ul{display:flex;justify-content:center;margin:0;padding:18px 0 0;list-style:none;position:relative}
.tree li{position:relative;padding:18px 5px 0;text-align:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;
 border-top:2px solid var(--line);width:50%;height:18px}
.tree li::after{left:50%;right:auto;border-left:2px solid var(--line)}
.tree li:only-child{padding-top:0}.tree li:only-child::after,.tree li:only-child::before{display:none}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--line);border-radius:0 5px 0 0}
.tree li:first-child::after{border-radius:5px 0 0 0}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;margin-left:-1px;
 border-left:2px solid var(--line);width:0;height:18px}
.tree>ul{padding-top:0}.tree>ul>li::before,.tree>ul>li::after{display:none}
/* 노드: 위 = 아이콘 + 이름, 아래 = 패시브(배지 없이 색만) */
.card{display:inline-block;background:var(--bg);border:1px solid var(--line);
 border-radius:9px;padding:4px 7px 3px;white-space:nowrap;text-align:left}
.card .hdr{display:flex;align-items:center;gap:7px}
.card img{width:34px;height:34px;border-radius:50%;flex:none}
.card .hdr b{font-size:1rem;line-height:1.2}
.card .ps{font-size:.76rem;line-height:1.3;margin-top:3px;font-weight:600}
.card .ps .sp3{color:var(--mut);font-weight:400;margin:0 3px}
.card .ps.plain{font-weight:400;color:var(--mut)}
.card.carrier{border-color:var(--acc)}.card.owned{border-color:var(--ok)}
.card.wild{border-style:dashed;opacity:.85}
.card.root{box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 20%,transparent)}
.empty{color:var(--mut);font-size:.85rem;padding:26px 0;text-align:center}
/* 상세 페이지 머리. 첫 화면에는 없다. */
.palhead{display:flex;gap:13px;align-items:center;margin-bottom:12px;
 padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.palhead img{width:52px;height:52px;flex:none;image-rendering:auto}
.palhead h2{margin:0;font-size:1.02rem;font-weight:700;color:var(--fg);line-height:1.3}
.palhead p{margin:4px 0 0;font-size:.75rem;color:var(--mut);line-height:1.45}

/* 첫 방문 안내. 결과 카드가 없을 때 결과 패널 아래에 선다. */
.howto{margin-top:14px;padding:19px 20px 21px;border:1px solid var(--line);
 border-radius:11px;background:var(--card);position:relative;overflow:hidden}
.howto::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
 background:linear-gradient(90deg,#38bdf8,#4f7df9 34%,#8b3df5 66%,#e0349e)}
.howto ol{list-style:none;counter-reset:g;margin:0;padding:0;
 display:flex;flex-direction:column;gap:15px}
.howto li{counter-increment:g;position:relative;padding-left:40px;
 color:var(--mut);font-size:.87rem;line-height:1.6}
.howto li::before{content:counter(g);position:absolute;left:0;top:1px;
 width:27px;height:27px;border-radius:50%;color:#fff;
 background:linear-gradient(135deg,#38bdf8,#4f7df9 34%,#8b3df5 66%,#e0349e);
 font-size:.79rem;font-weight:700;line-height:27px;text-align:center}
/* 그라데이션 글자. 미지원 시 사라지지 않게 색을 먼저 준다. */
.howto b{color:var(--acc);font-weight:700}
@supports (-webkit-background-clip:text) or (background-clip:text){
 .howto b{background:linear-gradient(120deg,#38bdf8,#7b6bf6 50%,#e0349e);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}}
/* ---- 그룹 카드 ---- */
.grp{border:1px solid var(--line);border-radius:11px;padding:0;margin-bottom:9px;
 background:var(--bg);overflow:hidden;cursor:pointer}
.grp.active{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 16%,transparent)}
.grp .hd{display:flex;align-items:center;gap:6px;padding:7px 9px;
 border-bottom:1px solid var(--line);cursor:pointer}
.grp.off{opacity:.5}
.grp.off .hd{border-bottom:0}
.grp .hd .cv{font-size:.62rem;color:var(--mut);width:9px;flex:none;transition:transform .12s}
.grp .hd .ttl{font-size:.74rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap;flex:1}
.grp .hd .ttl.dim{color:var(--mut);font-weight:400}
.grp .rm{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
 border-radius:6px;color:var(--mut);cursor:pointer}
.grp .rm:hover{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.grp .rm svg{width:13px;height:13px;pointer-events:none}
/* jQuery slideUp/Down 느낌: grid-template-rows 0fr <-> 1fr 는 auto 높이에서도 전이된다 */
.slide{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.slide.closed{grid-template-rows:0fr}
.slide>.inner{overflow:hidden;min-height:0}
.grp .body{padding:8px 10px 4px}
.grp .sep{height:1px;background:var(--line);margin:8px -10px}
/* ---- 인게임 패시브 배너 (paldb 가 쓰는 게임 에셋/색을 그대로 따름) ----
   rank 2~3 : 노랑 #ffdd00 테두리 + 좌측 5px, 글자 #ffd83f
   rank 4~5 : 청록 #5cf1e2 테두리 + 좌측 5px, 글자 #68ffd8 (커뮤니티 '무지개' 티어)
   rank 1   : 무채색 좌측 엣지
   rank 음수: 화살표가 위아래 뒤집히고 붉은 계열                              */
.pas{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:4px;
 padding:5px 8px 5px 7px;font-size:.79rem;font-weight:700;border-radius:2px;
 color:#ffd83f;text-shadow:1px 1px 0 #000;
 border:1px solid #ffdd00;border-left:5px solid #ffdd00;
 background-image:linear-gradient(#ffdd0020,#ffdd0020),linear-gradient(#11111188,#111111ff),
  url(https://cdn.paldb.cc/image/Pal/Texture/UI/Main_Menu/T_prt_pal_skill_base_02.webp);
 background-size:contain}
.pas.r4,.pas.r5{border-color:#5cf1e2;border-left-color:#5cf1e2;color:#68ffd8}
.pas.r4{background-image:linear-gradient(to right,#59bb653d,#5958cc7a),
 linear-gradient(#11111188,#111111ff),
 url(https://cdn.paldb.cc/image/Pal/Texture/UI/Main_Menu/T_prt_pal_skill_base_02.webp)}
.pas.r5{background-image:linear-gradient(to right,#59bb653d,#4d09cb7a),
 linear-gradient(#11111188,#111111ff),
 url(https://cdn.paldb.cc/image/Pal/Texture/UI/Main_Menu/T_prt_pal_skill_base_02.webp)}
.pas.r1,.pas.rneg{border:1px solid #4a4a4a;border-left:5px solid #6b6b6b;color:#e2e2e2;
 background-image:linear-gradient(#11111188,#111111ff),
 url(https://cdn.paldb.cc/image/Pal/Texture/UI/Main_Menu/T_prt_pal_skill_base_02.webp)}
.pas.rneg{border-left-color:#ff6b4a;color:#ffb3a1}
.pas .arw{width:15px;height:15px;flex:none;
 filter:sepia() saturate(10000%) hue-rotate(0deg)}
.pas.r4 .arw,.pas.r5 .arw{filter:brightness(0) saturate(100%) invert(92%) sepia(71%)
 saturate(6307%) hue-rotate(99deg) brightness(108%) contrast(101%)}
.pas.rneg .arw{transform:scaleY(-1);
 filter:invert(80%) sepia(90%) saturate(7456%) hue-rotate(359deg) brightness(95%) contrast(115%)}
.pas .x{margin-left:auto;font-weight:400;font-size:.78rem;color:#cfcfcf;opacity:.6;
 padding:0 2px;text-shadow:none}
.pas .x:hover{color:#ff8a6b;opacity:1}
.pas.none{background:none;border:1px dashed var(--line);border-left:1px dashed var(--line);
 color:var(--mut);font-weight:400;font-size:.74rem;justify-content:center;text-shadow:none}
.pasbtn{display:block;width:100%;margin-top:3px;padding:3px 0;border:1px dashed var(--line);
 border-radius:5px;background:var(--card);color:var(--mut);font-size:1.05rem;font-weight:700;
 line-height:1.25;text-align:center;cursor:pointer;transition:.12s}
.pasbtn:hover{border-color:var(--acc);border-style:solid;color:var(--acc);
 background:color-mix(in srgb,var(--acc) 10%,transparent)}
/* ---- 패시브 선택 모달: 가로 = 등급, 세로 = 가나다순 ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:50;
 display:flex;align-items:center;justify-content:center;padding:24px}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:14px;
 padding:15px 16px 13px;width:min(940px,95vw);max-height:88vh;display:flex;flex-direction:column}
.mhd{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.mhd h3{font-size:.95rem;margin:0}
.mhd .cur{font-size:.78rem;color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhd input{width:200px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
 background:var(--bg);font-size:.8rem}
.mhd .x2{width:26px;height:26px;line-height:24px;text-align:center;border-radius:7px;
 border:1px solid var(--line);cursor:pointer;color:var(--mut);font-size:.9rem}
.mhd .x2:hover{color:var(--warn);border-color:var(--warn)}
.mcols{display:flex;gap:9px;overflow-x:auto;flex:1;min-height:0}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;min-height:0;gap:14px}
/* 한 열 안에 여러 묶음(세계수 / 변이)이 올 수 있다. 각 묶음은 제목 + 목록. */
.msec{display:flex;flex-direction:column;min-height:0}
.msec:last-child{flex:1 1 auto}
.msec .ch{font-size:.7rem;color:var(--mut);text-align:center;padding:3px 0 5px;
 border-bottom:1px solid var(--line);margin-bottom:5px;letter-spacing:.03em}
.msec .cl{overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding-right:3px}
/* 모달 버튼은 배너(.pas)를 그대로 감싼다. 선택 안 한 것은 흐리게 두고,
   고른 것만 원래 색으로 살려 한눈에 구분되게 한다. */
.pbtn{cursor:pointer;opacity:.42;transition:opacity .12s}
.pbtn:hover{opacity:.8}
.pbtn.on{opacity:1}
.pbtn .pas{margin-bottom:0}
/* 호버한 패시브의 설명 칸. 항목이 가장 적은 열 아래에 붙는다.
   위 목록이 자기 높이만큼만 차지해야 여기까지 자리가 남는다(.msec:last-child 미적용). */
.mtip{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;margin-top:6px}
.mtip .tb{flex:1 1 auto;overflow-y:auto;padding:7px 9px;border:1px solid var(--line);
 border-radius:8px;background:var(--bg);font-size:.74rem;line-height:1.5;color:#cfcfcf}
.mtip .tb b{display:block;margin-bottom:4px;font-size:.78rem;color:var(--acc)}
.mtip .none2{padding:0;text-align:left}
/* 목표 팰 카드 */
.tgt{text-align:center;padding:12px 4px 4px}
.tgt img.big{width:96px;height:96px;border-radius:50%;border:2px solid var(--acc);
 background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent)}
.tgt .pas{text-align:left}
.tgt .nm{font-size:1.05rem;font-weight:700;margin-top:8px}
.tgt .sep2{height:1px;background:var(--line);margin:11px 0 9px}
.tgt .lbl{font-size:.72rem;color:var(--mut);text-align:left;margin-bottom:5px;letter-spacing:.04em}
.tgt .none2{font-size:.75rem;color:var(--mut);padding:6px 0}
/* 팰 아이콘 목록 */
.pals{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:5px}
.pals .pc{position:relative;width:44px;text-align:center}
.pals .pc img{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
 background:var(--card);display:block;margin:0 auto}
.pals .pc .n{display:block;font-size:.6rem;color:var(--mut);margin-top:2px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pals .pc .x{position:absolute;top:-3px;right:-1px;width:16px;height:16px;line-height:14px;
 border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--mut);
 font-size:.62rem;text-align:center;opacity:0;transition:opacity .1s}
.pals .pc:hover .x{opacity:1}
.pals .pc .x:hover{color:var(--warn);border-color:var(--warn)}
.pals .empty2{font-size:.73rem;color:var(--mut);padding:4px 0}
/* 결과 영역: 아이콘 + 호버 시 진한 ✕ 오버레이 */
.prow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pchip{position:relative;width:54px;text-align:center;cursor:pointer}
.pchip img{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
 background:var(--card);display:block;margin:0 auto}
.pchip .n{display:block;font-size:.63rem;color:var(--mut);margin-top:2px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pchip .ov{position:absolute;top:0;left:50%;transform:translateX(-50%);
 width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.62);
 color:#fff;font-size:1.35rem;font-weight:700;line-height:48px;
 opacity:0;transition:opacity .1s}
.pchip:hover .ov{opacity:1}
.pchip.off img{filter:grayscale(1);opacity:.45}
.pchip.off .ov{background:rgba(0,0,0,.45);font-size:1.1rem}
.pick-row{display:flex;gap:7px;margin-top:8px;overflow-x:auto;padding:4px 2px 6px;min-height:8px}
.pg{position:relative;flex:0 0 auto;width:74px;border:1px solid var(--line);border-radius:11px;
 padding:6px 4px 4px;cursor:pointer;background:var(--card);text-align:center}
.pg img{width:52px;height:52px;border-radius:50%;display:block;margin:0 auto}
.pg .nm{display:block;font-size:.68rem;margin-top:3px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.pg .no{display:block;font-size:.55rem;color:var(--mut)}
.pg:hover{border-color:var(--acc)}
.pg.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent)}
.pg.on::after{content:"✓";position:absolute;top:2px;right:5px;font-size:.7rem;color:var(--acc)}
.pg.other{border-color:var(--ok)}
.pg.other::after{content:"•";position:absolute;top:0;right:6px;font-size:.9rem;color:var(--ok)}

/* ---- 하단 고정 띠: 정책 링크 + 소식 ---- */
/* z-index 는 모달(50)보다 낮게. 모달이 열리면 띠가 덮이지 않아야 한다. */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:30;height:32px;
 display:flex;align-items:center;gap:12px;padding:0 14px;font-size:.71rem;
 background:color-mix(in srgb,var(--card) 94%,transparent);
 border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.foot>a{flex:none;color:var(--mut);text-decoration:none;white-space:nowrap}
.foot>a:hover{color:var(--acc)}
/* 띠 높이의 한가운데. 테두리는 두지 않는다 — 푸터 자체 선 말고는 아무것도 없다.
   양끝만 흐리게 해서 글자가 잘려 튀어나오는 느낌을 없앤다. */
.news{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;overflow:hidden;
 mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
/* 같은 내용을 두 벌 이어 붙이고 정확히 절반만 밀어 끊김 없이 반복한다.
   간격은 항목의 오른쪽 여백으로만 준다 — track 에 gap 을 주면 절반이 어긋난다. */
.news .track{display:flex;align-items:center;width:max-content;
 animation:newsroll var(--dur,60s) linear infinite}
.news .track:hover{animation-play-state:paused}
.news .rep{display:flex;flex:none;align-items:center}
.news .it{flex:none;display:inline-flex;align-items:center;gap:7px;
 padding-right:48px;color:var(--mut);white-space:nowrap}
.news .tag{font-weight:700;font-size:.65rem;letter-spacing:.02em}
.news .t-new{color:var(--ok)}
.news .t-fix{color:var(--acc)}
@keyframes newsroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.news .track{animation:none}}
@media(max-width:640px){.foot{font-size:.66rem;gap:9px;padding:0 10px}}

/* ---- 문서 페이지(개인정보처리방침 등) ---- */
/* 한 번 읽고 나가는 페이지다. 훑어서 필요한 줄만 집어낼 수 있게 절 단위로 끊는다. */
.doc{max-width:720px;padding-bottom:24px}
.back{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;color:var(--mut);
 text-decoration:none;margin-bottom:22px}
.back::before{content:"";width:6px;height:6px;flex:none;transform:rotate(45deg);
 border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor}
.back:hover{color:var(--acc)}
.back.bot{margin:24px 0 0}
.dochd{margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.dochd h1{display:block;font-size:1.66rem;margin:0 0 11px;letter-spacing:-.01em}
.dochd .chip{display:inline-block;font-size:.69rem;color:var(--mut);padding:3px 11px;
 border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums}
/* 절 상자. 클래스 이름을 .card 로 두면 교배 트리의 팰 노드 규칙
   (display:inline-block · white-space:nowrap) 이 그대로 먹어서 글이 안 접힌다. */
.doc .sec{display:block;background:color-mix(in srgb,var(--card) 68%,transparent);
 border:1px solid var(--line);border-radius:13px;padding:15px 18px 6px;margin-bottom:11px}
.doc .sec h2{display:flex;align-items:center;gap:10px;font-size:.94rem;margin:0 0 13px}
.doc .num{flex:none;width:21px;height:21px;line-height:21px;text-align:center;border-radius:50%;
 background:color-mix(in srgb,var(--acc) 20%,transparent);color:var(--acc);
 font-size:.66rem;font-weight:700;font-variant-numeric:tabular-nums}
.doc p{margin:0 0 11px;font-size:.845rem;line-height:1.72;
 color:color-mix(in srgb,var(--fg) 84%,var(--mut))}
/* 'lang 쿠키 - 설명' 처럼 항목이 앞에 오는 줄은 항목을 위로 빼서 훑기 쉽게 한다 */
.doc p.kv{padding-left:12px;border-left:2px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.doc p.kv b{display:block;color:var(--acc);font-weight:600;font-size:.81rem;margin-bottom:3px}
.doc .sec.contact{text-align:center;padding:17px 18px 19px}
.doc .sec.contact h2{justify-content:center}
.doc .sec.contact p{margin-bottom:9px}
.doc a.mail{display:inline-block;font-size:.95rem;color:var(--acc);text-decoration:none;
 padding-bottom:3px;border-bottom:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.doc a.mail:hover{border-bottom-color:var(--acc)}
@media(max-width:560px){.dochd h1{font-size:1.34rem}.doc .sec{padding:13px 14px 5px}}