/* webnode — 서비스 비교
   디자인 토큰. 색·크기를 여기 밖에서 직접 쓰지 않는다. */

:root{
  /* 바탕 — 아주 옅은 따뜻한 회색. 표가 오래 읽히는 화면이라 순백은 피한다 */
  --paper:#faf9f6;  --surface:#ffffff;  --sunken:#f2f1ec;
  --line:#e3e1d9;   --line-strong:#cfccc2;

  --ink:#1a1b18;    --muted:#6b6960;    --faint:#9b988d;

  /* 상호작용 — 짙은 남색 하나만 */
  --accent:#2f3f74; --accent-soft:#e8ebf5; --accent-line:#b9c2de;

  /* 기호 — 의미색. 강조색과 겹치지 않게 */
  --ok:#2c7048;     --ok-soft:#e6f1ea;
  --roll:#8a5f14;   --roll-soft:#f6efdf;
  --no:#9d3730;     --no-soft:#f7e8e6;

  /* 라운드는 아주 작게. 오너 선호(2026-08-30) — 프로토타입의 2~4px 계열 */
  --r-sm:2px; --r:3px; --r-lg:4px;
  --shadow:0 1px 2px rgba(26,27,24,.06), 0 8px 24px rgba(26,27,24,.06);

  --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16171a; --surface:#1d1f23; --sunken:#232529;
    --line:#2e3138; --line-strong:#3d414a;
    --ink:#e9e8e3; --muted:#a5a49d; --faint:#76756e;
    --accent:#93a6de; --accent-soft:#242a3d; --accent-line:#3c4665;
    --ok:#69b587; --ok-soft:#1c2c23; --roll:#c79a45; --roll-soft:#2d2718;
    --no:#d1817a; --no-soft:#2e1f1e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%;
  /*  한국어는 «어절» 로 끊는다. 기본값은 낱말 가운데를 갈라서
      「156가 / 지로」·「공식 페이 / 지에서」가 실제로 나왔다. */
  word-break:keep-all;
}
button,input{font:inherit;color:inherit}
a{color:var(--accent)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── 골격 ───────────────────────────────────────────── */
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
/*  ★ 톱바는 «붙어 있다». 스크롤해도 따라 내려오지 않는다(오너 지시 2026-09-01).
    페이지가 길어서(첫 화면 5배·영역 10배) 위로 돌아가려면 한참 올려야 했다.
    배경을 반드시 칠한다 — 안 칠하면 아래 글자가 비쳐 지나간다. */
header.top{position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);background:var(--surface)}
/*  화면 안 링크(#areas)로 뛸 때 톱바 밑에 숨지 않게.
    좁은 화면은 톱바가 두 줄이 될 수 있어(101px) 그만큼 더 띄운다. */
[id]{scroll-margin-top:76px}
@media (max-width:640px){ [id]{scroll-margin-top:112px} }
.topbar{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;
  background:none;border:0;padding:0;cursor:pointer;text-align:left}
/*  톱바 아이콘 — ㉰ 「행 × 열」. 기능(가로줄)과 서비스(세로줄)가 만나는 한 점. */
.brand .mark{width:22px;height:22px;flex:none;color:var(--accent)}
.brand small{display:block;font-weight:400;font-size:.72rem;color:var(--muted);letter-spacing:0}

.search{position:relative;flex:1;min-width:200px;max-width:460px}
@media (max-width:640px){
  /*  ★ 톱바는 «한 줄» 이다. 2026-09-01 에 두 줄로 폈다가 되돌렸다 —
      모바일 톱바를 여덟 곳 실측했더니 전부 한 줄이었다(47~68px):
      TAAFT 47 · Toolify 50 · AlternativeTo 58 · Product Hunt 58 ·
      Linear 64 · Vercel 64 · Stripe 66 · SaaSHub 68.
      그리고 이런 «찾는 방법» 고르개를 톱바에 넣은 곳은 한 곳도 없었다.
      줄을 늘리지 말고 «들어갈 것을 줄여서» 한 줄을 지킨다 —
      그래서 「기능으로」와 검색은 본문 맨 위 도구 줄로 내렸다. */
  .topbar{gap:10px;flex-wrap:nowrap}
  .brand small{display:none}
  .search{min-width:0}
}
.search input{width:100%;height:40px;padding:0 34px 0 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search .clr{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--faint);cursor:pointer;line-height:1}
.search .clr:hover{background:var(--sunken);color:var(--ink)}

/* ── 영역 고르기 ────────────────────────────────────── */
.lead{padding:44px 0 8px;max-width:640px}
.lead h1{margin:0 0 10px;font-size:1.55rem;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
.lead p{margin:0;color:var(--muted)}
/*  영역은 다섯이다. auto-fill 로 두면 넓은 화면에서 4+1 로 갈라져 한 칸만 덩그러니 남는다.
    셋씩 두 줄(3+2)이 낫다. */
.areas{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .areas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .areas{grid-template-columns:1fr} }
.acard{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;cursor:pointer;transition:border-color .12s,transform .12s}
.acard:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.acard h2{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em}
.acard p{margin:0 0 14px;font-size:.86rem;color:var(--muted);min-height:2.6em}
.acard .meta{font-size:.78rem;color:var(--faint)}

/* ── 본 화면 ────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:8px;padding:14px 0 0;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.crumb button{background:none;border:0;padding:0;color:var(--accent);cursor:pointer}
.crumb .sep{color:var(--faint)}

.cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;padding:16px 0 60px;align-items:start}
@media (max-width:900px){ .cols{grid-template-columns:minmax(0,1fr);gap:18px} }

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel > h3{margin:0;padding:13px 16px;font-size:.82rem;font-weight:600;color:var(--muted);
  letter-spacing:.02em;border-bottom:1px solid var(--line);background:var(--sunken)}

/* 트리 */
.tree{padding:8px 6px 12px;max-height:min(72vh,860px);overflow:auto}
@media (max-width:900px){ .tree{max-height:none} }
.tree ul{list-style:none;margin:0;padding:0}
.tree ul ul{margin-left:15px;border-left:1px solid var(--line);padding-left:5px}
.row{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:var(--r-sm);min-width:0}
.row:hover{background:var(--sunken)}
.row.on{background:var(--accent-soft)}
/*  펼치기·접기 — 옅게 두면 «누를 수 있는 것» 으로 안 보인다(오너 지적).
    갈매기표를 --muted 로 올리고, 누르는 자리도 넓혔다. */
.tw{width:24px;height:24px;flex:none;border:0;background:none;color:var(--muted);cursor:pointer;
  border-radius:var(--r-sm);line-height:1;display:flex;align-items:center;justify-content:center}
.tw:hover{background:var(--line);color:var(--ink)}
.tw.leaf{visibility:hidden}
.cb{width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer;margin:0}
/*  이름은 «내용만큼» 만 차지한다. 남는 자리는 아래 .rowgap 이 먹는다 —
    그래야 설명 단추(i)가 이름에 «붙어» 따라온다. flex:1 이면 이름이 줄을 다 먹어
    i 가 오른쪽 끝으로 밀린다(오너 지적). */
.nm{flex:0 1 auto;min-width:0;cursor:pointer;font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cnt{flex:none;font-size:.74rem;color:var(--faint);font-family:var(--mono);margin-left:auto}
/*  ★ 동그라미다. 체크상자와 «모양» 이 달라야 한다(오너 결정 2026-08-31).
    둘 다 네모+테두리면 「같은 종류의 것」으로 읽힌다 —
    체크상자는 «켜고 끄는 것», i 는 «눌러서 보는 것» 이다.
    크기는 줄이지 않는다. 19px(모바일 26px)도 누르기에 이미 작다. */
.info{flex:none;width:19px;height:19px;border:1px solid var(--line-strong);border-radius:50%;
  background:none;color:var(--faint);font-size:.66rem;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.info:hover{border-color:var(--accent);color:var(--accent)}
.onlytag{flex:none;margin-left:auto;font-size:.68rem;color:var(--roll);background:var(--roll-soft);
  border-radius:var(--r-sm);padding:1px 5px;white-space:nowrap}
.desc{margin:0 6px 6px 46px;padding:8px 10px;background:var(--sunken);border-radius:var(--r-sm);
  font-size:.82rem;color:var(--muted)}
.hitpath{font-size:.7rem;color:var(--faint);margin:0 0 1px 46px}

/* 고른 기능 */
.picked{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);border-radius:var(--r-sm);padding:4px 6px 4px 11px;font-size:.83rem}
.chip button{width:19px;height:19px;border:0;border-radius:var(--r-sm);background:none;color:inherit;
  cursor:pointer;line-height:1;font-size:.8rem;padding:0}
.chip button:hover{background:var(--accent-line)}
.pnote{padding:0 16px 12px;font-size:.8rem;color:var(--muted)}

/* 결과 */
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--sunken)}
.rhead h3{margin:0;font-size:.95rem;letter-spacing:-.01em}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.74rem;color:var(--muted)}
/*  ★ 표시가 <b>글자</b> 에서 SVG 로 바뀌었다. 색은 이제 «칸 자체» 에 준다 —
    SVG 가 stroke="currentColor" 라 부모 색을 그대로 받는다.
    옛 규칙(.l-ok b)은 없어진 <b> 를 가리켜 색이 통째로 빠져 있었다. */
.legend .l-ok{color:var(--ok)} .legend .l-roll{color:var(--roll)} .legend .l-no{color:var(--no)}

.tscroll{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.87rem}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
thead th{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line-strong);
  font-weight:600;font-size:.82rem;white-space:nowrap}
th.rh,td.rh{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;
  border-right:1px solid var(--line);min-width:150px;max-width:230px}
thead th.rh{z-index:3}
tbody tr:hover td{background:var(--sunken)}
tbody tr:hover td.rh{background:var(--sunken)}
.svcname{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.mark{border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:1rem;
  width:32px;height:28px;border-radius:var(--r-sm);padding:0}
.mark:hover{background:var(--accent-soft)}
.m-direct{color:var(--ok)} .m-roll{color:var(--roll)} .m-no{color:var(--no)} .m-none{color:var(--faint)}
tr.prow td{color:var(--muted);font-size:.78rem;padding-top:7px;padding-bottom:7px}

.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.zero{padding:20px}
.zero p{margin:0 0 12px}
.zrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;margin-bottom:7px;cursor:pointer}
.zrow:hover{border-color:var(--accent-line)}
.zrow .zn{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--muted)}

/* 확인하지 못한 곳 */
.unv{margin:14px 16px 16px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r)}
.unvt{margin:0 0 9px;font-size:.83rem;color:var(--muted);line-height:1.55}
.unvb{font-size:.78rem;padding:5px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--muted);cursor:pointer}
.unvb:hover{border-color:var(--accent-line);color:var(--accent)}
.unvl{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.unvi{display:flex;align-items:center;gap:10px;font-size:.84rem;min-width:0;flex-wrap:wrap}
/*  누르는 자리다. 글자만 두면 18px 이라 눌리지 않는다(실측). */
.unva{font-size:.76rem;color:var(--muted);display:inline-block;padding:7px 6px;margin:-7px -6px}

/* 상세 */
.scrim{position:fixed;inset:0;background:rgba(26,27,24,.35);z-index:40;border:0;padding:0}
.detail{position:fixed;z-index:41;background:var(--surface);box-shadow:var(--shadow);
  right:0;top:0;bottom:0;width:min(480px,100%);overflow:auto;border-left:1px solid var(--line)}
@media (max-width:700px){
  .detail{right:0;left:0;top:auto;bottom:0;width:auto;max-height:88vh;
    border-left:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
}
.dhead{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dhead h3{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.dhead p{margin:3px 0 0;font-size:.84rem;color:var(--muted)}
.dclose{margin-left:auto;flex:none;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--r-sm);padding:4px 9px;font-size:.8rem;cursor:pointer;color:var(--muted)}
.dclose:hover{color:var(--ink);border-color:var(--accent-line)}
.dbody{padding:6px 20px 28px}
.dsec{padding:14px 0;border-bottom:1px solid var(--line)}
.dsec:last-child{border-bottom:0}
.dsec > h4{margin:0 0 9px;font-size:.76rem;font-weight:600;color:var(--faint);letter-spacing:.04em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem;align-items:baseline}
.kv dt{color:var(--muted);font-size:.82rem}
.kv dd{margin:0}
.viagrp{margin-bottom:11px}
.viagrp:last-child{margin-bottom:0}
.viahd{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:.76rem;color:var(--muted)}
.viahd b{font-family:var(--mono)}
.viahd.g-ok b{color:var(--ok)} .viahd.g-no b{color:var(--faint)}
.vialist{display:flex;flex-wrap:wrap;gap:6px}
.viabtn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--r-sm);padding:3px 9px;font-size:.8rem;cursor:pointer}
.viabtn:hover{border-color:var(--accent);color:var(--accent)}
.viabtn.vq{border-style:dashed;color:var(--muted)}
.prow2{display:flex;align-items:center;gap:9px;font-size:.85rem;padding:3px 0}
.prow2 .pn{width:78px;color:var(--muted);font-size:.82rem}
.prow2 .pm{font-family:var(--mono);width:16px;text-align:center}
.prow2 .pe{font-size:.78rem;color:var(--faint)}
.evrow{display:flex;align-items:baseline;gap:9px;font-size:.83rem;padding:4px 0;min-width:0;flex-wrap:wrap}
.evtag{flex:none;font-size:.7rem;color:var(--muted);background:var(--sunken);border-radius:var(--r-sm);padding:1px 6px}
.evrow a{overflow-wrap:anywhere}
.evdate{color:var(--faint);font-size:.75rem}
/*  요금 칸은 «같은 줄이면 같은 높이» 여야 한다. 무료 칸만 짧아서 66px 대 134px 였다(실측).
    격자 칸을 끝까지 늘린다. */
.plan{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:.85rem;
  height:100%;display:flex;flex-direction:column;gap:4px}
.plan .pname{font-weight:600}
.plan .price{font-family:var(--mono);font-size:.86rem;margin-top:4px}
.lim{font-size:.83rem;color:var(--muted);white-space:pre-wrap}

[hidden]{display:none !important}

/* ── 손가락으로 누르는 화면 ─────────────────────────
   체크박스·ⓘ 가 마우스 기준(15·19px)이라 모바일에서 너무 작다.
   행 높이를 키우지 않으면서 «누를 수 있는 넓이» 만 넓힌다. */
@media (pointer:coarse), (max-width:700px){
  .row{padding:7px 6px}
  .cb{width:22px;height:22px}
  .info{width:26px;height:26px;font-size:.78rem}
  .tw{width:30px;height:30px}
  .mark{width:40px;height:36px}
  .chip button{width:24px;height:24px}
  .desc{margin-left:56px}
  .hitpath{margin-left:56px}
}

/* 표가 옆으로 잘릴 때 — 잘린 쪽 가장자리를 흐리게 하고 한 줄로 알린다 */
.tscroll.cut{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
.cuthint{margin:0;padding:9px 16px 12px;font-size:.78rem;color:var(--faint)}
.mark{font-weight:600;font-size:1.05rem}

/* 좁은 화면 — 기능을 고른 뒤에는 결과를 먼저 보여준다 */
@media (max-width:900px){
  .cols.answer-first > div:nth-child(2){order:-1}
  /* 좁힘 패널이 둘(형식·환경)이 되면서 표가 513px 까지 밀렸다.
     답을 먼저 보이고, 좁히기는 그 아래로 내린다. 데스크톱 차례는 그대로다. */
  .cols.answer-first > div:nth-child(2){display:flex;flex-direction:column}
  .cols.answer-first #pickedpanel{order:1}
  .cols.answer-first #resultpanel{order:2}
  .cols.answer-first #fmtpanel{order:3}
  .cols.answer-first #platpanel{order:4}
  .cols.answer-first #fmtpanel,
  .cols.answer-first #platpanel{margin-top:16px}
  /* 좁은 화면에서 기능 열이 넓으면 서비스가 한 곳밖에 안 보인다 */
  th.rh,td.rh{min-width:104px;max-width:132px}
  th,td{padding:9px 8px}
}

.panel > h3{display:flex;align-items:center;gap:10px}
.copylink{margin-left:auto;font-size:.74rem;font-weight:400;padding:3px 9px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);
  color:var(--muted);cursor:pointer}
.copylink:hover{border-color:var(--accent-line);color:var(--accent)}

/* 형식으로 좁히기 */
.fsum{font-size:.78rem;font-weight:400;color:var(--faint)}
.fmtbody{padding:12px 16px 14px}
.fgrp{margin-bottom:12px}
.fgrp:last-child{margin-bottom:0}
.fhd{margin:0 0 6px;font-size:.74rem;color:var(--faint)}
.flist{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);border-radius:var(--r-sm);
  padding:4px 9px;font-size:.82rem;cursor:pointer}
.fchip:hover{border-color:var(--accent-line)}
.fchip .fn{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.fchip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.fchip.on .fn{color:var(--accent)}
@media (pointer:coarse),(max-width:700px){ .fchip{padding:7px 11px} }

/* ── 서비스 화면 ─────────────────────────────────── */
.shead{padding:26px 0 20px;border-bottom:1px solid var(--line);margin-bottom:4px}
.shead h1{margin:0 0 8px;font-size:1.6rem;letter-spacing:-.02em;text-wrap:balance}
.smeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.86rem}
.smeta a{overflow-wrap:anywhere}
.plats{display:flex;flex-wrap:wrap;gap:5px}
.plat{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:2px 8px;
  font-size:.76rem;color:var(--muted)}
.ssec{padding:22px 0;border-bottom:1px solid var(--line)}
.ssec:last-child{border-bottom:0;padding-bottom:44px}
.ssec > h2{margin:0 0 4px;font-size:1rem;letter-spacing:-.01em}
.ssec > .sub{margin:0 0 14px;font-size:.83rem;color:var(--muted)}
/*  같은 줄이면 같은 높이. align-items:start 면 무료 칸만 짧아진다(실측 66 대 134px). */
.sgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:stretch}

/* 기능 분류 접기 */
.fold{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.foldhd{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);
  border:0;padding:11px 13px;cursor:pointer;font:inherit;min-height:44px}
.foldhd:hover{background:var(--sunken)}
.foldhd .tw2{color:var(--faint);font-size:.7rem;width:14px;flex:none}
.foldhd .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foldhd .fcnt{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.foldbody{border-top:1px solid var(--line);padding:6px 0}
.frow{display:flex;align-items:center;gap:9px;padding:6px 13px;min-width:0}
.frow:hover{background:var(--sunken)}
.frow .fm{font-family:var(--mono);font-weight:600;width:16px;flex:none;text-align:center}
.frow .fm.d{color:var(--ok)} .frow .fm.r{color:var(--roll)}
.frow .fnm{flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fnm:hover{color:var(--accent);text-decoration:underline}
.frow .fnote{font-size:.74rem;color:var(--faint);flex:none}
.frow .fpay{font-size:.76rem;color:var(--muted);flex:none}
.frow .fev{font-size:.74rem;color:var(--muted);flex:none}
.slist{display:flex;flex-wrap:wrap;gap:6px}
.sitem{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:4px 9px;font-size:.82rem}
.sitem.q{border-style:dashed;color:var(--muted)}
.sonly{border:1px solid var(--roll);background:var(--roll-soft);border-radius:var(--r-sm);
  padding:4px 9px;font-size:.82rem;color:var(--roll)}
@media (pointer:coarse),(max-width:700px){
  .frow{padding:9px 13px}
  .sitem,.sonly{padding:7px 11px}
  .frow .fnm{white-space:normal}
}

/* 표 머리글의 서비스 이름 — 누르면 서비스 화면으로 */
button.svcname{border:0;background:none;padding:0;font:inherit;font-weight:600;
  color:inherit;cursor:pointer;max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
button.svcname:hover{color:var(--accent);text-decoration:underline}

/* 셀 상세 → 서비스 화면 */
.svclink{font-size:.8rem;padding:6px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--muted);cursor:pointer}
.svclink:hover{border-color:var(--accent-line);color:var(--accent)}

/* 손가락으로 누르는 화면 — 서비스 화면 안의 글자 링크도 누를 넓이를 준다 */
@media (pointer:coarse),(max-width:700px){
  #screen-service .frow .fnm,
  #screen-service .frow .fev,
  #screen-service .evrow a,
  #screen-service .smeta a,
  #screen-service .plan a{min-height:26px;display:inline-flex;align-items:center}
  #screen-service .frow{gap:7px}
  .svclink{padding:9px 14px}
}
@media (pointer:coarse),(max-width:700px){
  .crumb button{min-height:26px;display:inline-flex;align-items:center}
}

.folds{display:flex;flex-direction:column;gap:8px;max-width:760px}
.price.nop{color:var(--faint)}

/* ── 한 곳만 확인된 기능 (Only) ──────────────────────
   결과를 좁히지 않는다. 보여주기만 한다. */
.onlybox{border-bottom:1px solid var(--line);background:var(--sunken)}
.onlyhd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  padding:10px 16px;font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;
  text-align:left;min-height:40px}
.onlyhd:hover{color:var(--ink)}
.onlyhd .tw2{color:var(--faint);font-size:.7rem;width:12px;flex:none}
.onlyhd .oc{margin-left:auto;font-family:var(--mono);color:var(--roll)}
.onlylist{padding:2px 10px 12px}
.onote{margin:0 6px 8px;font-size:.76rem;color:var(--faint);line-height:1.5}
.orow{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  padding:7px 8px;border-radius:var(--r-sm);font:inherit;font-size:.84rem;cursor:pointer;
  text-align:left;min-width:0;min-height:30px}
.orow:hover{background:var(--surface)}
.orow .on{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow .os{flex:none;font-size:.76rem;color:var(--roll);max-width:44%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* 결과 아래 정보 영역 */
.onlysec{margin:0;padding:14px 16px;border-top:1px solid var(--line)}
.onlysec .onlyhd{padding:0;min-height:0;font-size:.86rem;color:var(--ink)}
.onlysec .onlylist{padding:10px 0 0}
@media (pointer:coarse),(max-width:700px){
  .orow{padding:10px 8px;min-height:36px}
  /* .onlysec .onlyhd 가 min-height:0 을 갖고 있어 더 구체적이다. 같은 구체성으로 되돌린다 */
  .onlyhd,.onlysec .onlyhd{min-height:40px}
}

/*  SVG 아이콘 — 글자와 세로 가운데를 맞춘다. inline 이라 기본은 밑줄에 걸린다. */
.legend svg, .fm svg, .pm svg, .cnt svg, .tw2 svg{vertical-align:middle}
.legend span{display:inline-flex;align-items:center;gap:5px}
.tw2{display:inline-flex;align-items:center}

/*  ★ .mark 를 display:flex 로 두면 «블록» 이 되어 td 의 text-align:center 가 안 먹는다.
    칸 폭이 열마다 달라서 어긋남도 열마다 달라진다(실측 최대 59px). inline-flex 여야 한다. */
.mark{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

/*  언어로 좁히기 — 형식·환경과 같은 부품(.fchip)을 쓰고, 두 가지만 더한다. */
.mylang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--r);padding:9px 11px;margin-bottom:10px}
.mylang .mylab{font-size:.74rem;font-weight:600;color:var(--accent);flex:none}
.langmore{margin-top:10px;border:1px dashed var(--line-strong);background:none;
  border-radius:var(--r-sm);padding:6px 11px;font:inherit;font-size:.78rem;
  color:var(--muted);cursor:pointer}
.langmore:hover{border-color:var(--accent);color:var(--accent)}
.flist.tail{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/*  머리의 찾는 방법 — «하나» 로 고른다.
    ★ 단추 둘이면 좁은 화면에서 톱바가 꽉 찬다(실측 390px 에서 남는 자리 68px,
      340px 에서는 두 줄로 늘어남). 로그인이 들어갈 자리를 남겨야 한다(오너 지적). */
/*  ★ 「기능으로 / 서비스로」는 «오른쪽» 이다. 승인된 시안(mockups/entry.html ㉯)이
    margin-left:auto 로 오른쪽 끝에 뒀는데 내가 브랜드 바로 옆(왼쪽)에 뒀다
    (오너 지적 2026-09-01). 로그인은 그 «오른쪽» 에 들어간다. */
.mode{flex:none;height:40px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.78rem;font-weight:600;
  border-radius:var(--r-sm);padding:0 8px;cursor:pointer}
.mode:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.topbar .brand{order:1;margin-right:auto}

/*  처음 오는 공급자를 위한 문 — 「로그인 바로 왼쪽」.
    이 자리는 짐작이 아니다. 등록 문을 실제로 톱바에 내놓는 곳(Toolify · SaaSHub)이
    둘 다 로그인 왼쪽이었다(2026-09-01 확인). 푸터에만 두면 로그인 안 하는 공급자는
    영영 모른다는 오너 지적으로 상시 노출로 올렸다. */
.regbtn{order:2;flex:none;height:32px;padding:0 12px;
  border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--accent-soft);
  font:inherit;font-size:.78rem;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center}
.regbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/*  찾는 방법과 검색이 사는 곳 — «본문 맨 위». 톱바가 아니다(오너 지적 2026-09-01).
    둘은 나란히 서므로 키를 맞춘다 — 둘 다 40px. */
.toolrow[hidden]{display:none}
.toolrow{display:flex;align-items:center;gap:10px;
  max-width:1320px;margin:0 auto;padding:14px 20px 0}
.toolrow .mode{flex:none;height:40px}
.toolrow .search{flex:1;min-width:0;max-width:460px}
.toolrow .search input{height:40px}
@media (max-width:640px){ .toolrow{padding-top:12px} }


/*  서비스로 찾기 화면 */
.svcfind{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--paper);padding:0 12px;font:inherit;font-size:.88rem;margin:0 0 12px}
.svcfind:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.svcnarrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px}
.svcnarrow .pick{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);
  padding:5px 11px;font:inherit;font-size:.78rem;color:var(--muted);cursor:pointer}
.svcnarrow .pick.on{background:var(--accent-soft);border-color:var(--accent-line);
  color:var(--accent);font-weight:600}
.svcnarrow select{margin-left:auto;height:30px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:.78rem;padding:0 8px}
/*  ── 서비스 목록 = 카드 격자 ──
    전에는 «한 줄에 하나» 씩 세로로 쌓았다. 모바일에서 글자만 12,879px —
    화면의 96% 가 눈이 걸릴 것 없는 글자 벽이었다(90_design.js 실측).
    비교 사이트 셋(AlternativeTo · SaaSHub · Product Hunt)이 전부 카드에 로고를 앞세운다. */
.svclist{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.svclist li{min-width:0}
.svclist .empty{grid-column:1/-1}
.svcard{display:flex;gap:16px;align-items:flex-start;width:100%;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:14px;font:inherit;text-align:left;cursor:pointer}
.svcard:hover{border-color:var(--accent-line);background:var(--paper)}
/*  ★ 로고에는 아무것도 두르지 않는다 — 배경도 테두리도 라운드도 없다.
    로고는 저마다 제 모양이 있다. 동그란 로고에 네모를 두르면 그 로고가 아니게 된다.
    (오너 지적 2026-09-01, 두 번째: 「테두리박스로 감쌀거면 배경색도 없애고 테두리선도 없애라」)
    .lg 는 «자리만» 잡는다. */
.svcard .lg{width:40px;height:40px;flex:none;
  display:flex;align-items:center;justify-content:center}
.svcard .lg img{max-width:100%;max-height:100%;object-fit:contain}
.svcard .nolg{font-size:.95rem;font-weight:600;color:var(--faint)}
.svcard .bd{min-width:0;flex:1;display:block}
.svcard .snm{display:block;font-size:.88rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.svcard .sar{display:block;font-size:.74rem;color:var(--accent);margin-top:2px}
.svcard .sfig{display:block;font-size:.78rem;color:var(--muted);margin-top:6px}
.svcard .sfig b{color:var(--ink);font-weight:600}
.svcard .stags{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.svcard .stag{border:1px solid var(--line);border-radius:3px;padding:2px 6px;
  font-size:.68rem;color:var(--faint)}
.svcard .stag.q{border-style:dashed}
.svcnote{margin:12px 0 40px;font-size:.78rem;line-height:1.7;color:var(--muted)}
.svcnote b{color:var(--ink)}
@media (max-width:640px){
  /*  ★ 여기 「.svclist button{grid-template-columns:1fr;gap:3px}」 이 남아 있었다.
      목록을 «네 칸 격자» 로 그리던 시절의 규칙인데, 카드로 바꾼 뒤에도 그대로 걸려서
      로고와 이름 사이 틈이 16px 이 아니라 3px 이 됐다(오너 지적 2026-09-01).
      css.js 는 «선택자가 아무것도 안 가리키는 것» 만 봐서 이걸 못 잡았다 —
      .svclist button 은 카드(button)에도 여전히 걸렸기 때문이다. */
  .svcnarrow select{margin-left:0}
}

/*  서비스 화면의 «쓸 수 있는 언어» — 형식 목록과 같은 부품(.sitem)을 쓴다.
    내 언어만 눈에 띄게 하고, 확인한 주소로 갈 수 있게 링크로 둔다. */
a.sitem{text-decoration:none;color:inherit}
a.sitem:hover{border-color:var(--accent);color:var(--accent)}
.sitem.mylang2{background:var(--accent-soft);border-color:var(--accent-line);
  color:var(--accent);font-weight:600}

/* ── 영역 소개 ────────────────────────────────────────────
   /a/<영역> 를 «고른 것 없이» 열었을 때. 검색에서 곧장 들어온 사람이 여기 떨어진다.
   부품은 서비스 화면과 같은 것을 쓴다(.ssec · .slist · .sitem) — 새로 만들지 않는다. */
#areaintro > h1{font-size:1.35rem;letter-spacing:-.02em;margin:6px 0 12px}
.aiessay{margin:0 0 8px}
.aiessay p{font-size:.9rem;line-height:1.95;margin:0 0 12px}
.aiessay p:last-child{margin-bottom:0}

/*  분류 하나 — 이름, 개수, 그 아래 기능 칩들 */
.ixg{margin:0 0 15px}
.ixg:last-child{margin-bottom:0}
.ixg h3{font-size:.8rem;margin:0 0 7px;font-weight:600;display:flex;align-items:baseline;gap:7px}
.ixg h3 .n{font-weight:400;color:var(--faint);font-family:var(--mono);font-size:.72rem}
a.sitem{text-decoration:none;color:inherit;display:inline-block}
a.sitem:hover{border-color:var(--accent);color:var(--accent)}
/*  한 단계 더 들어간 기능. 「PDF 나누기」 아래의 「북마크 기준으로 나누기」 같은 것. */
a.sitem.sub2{border-style:dashed;color:var(--muted)}

/*  서비스 목록 */
.svgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:7px}
.svgrid a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  padding:8px 11px;text-decoration:none;color:var(--ink)}
.svgrid a:hover{border-color:var(--accent);color:var(--accent)}
/*  이름을 «자르지 않는다». 잘리면 뜻이 사라지고 끝이 개수와 붙는다. 길면 줄을 바꾼다. */
.svgrid b{font-size:.82rem;font-weight:500;min-width:0;line-height:1.5}
.svgrid span{font-size:.72rem;color:var(--faint);font-family:var(--mono);flex:none}
/*  분류 이름도 «고를 수 있는 기능» 이라 누르는 자리다. 글자만 두면 20px 이다(실측). */
a.ixh{color:inherit;text-decoration:none;display:inline-block;padding:7px 8px;margin:-7px -8px}
a.ixh:hover{color:var(--accent)}

/* ── 한 곳에서만 확인된 기능 (소개 화면) ────────────────────
   해설에서 「20가지는 한 곳에서만」이라고 말해 놓고 볼 길이 없으면 안 된다. */
#aionly .onlylist{display:flex;flex-wrap:wrap;gap:6px}

/* ── 꼬리 ────────────────────────────────────────────────
   소개·조사 방법·개인정보처리방침·문의로 가는 길. 모든 페이지 아래에 있다. */
.foot{border-top:1px solid var(--line);padding:26px 20px 44px;background:var(--paper);
  font-size:.78rem;color:var(--faint)}
.fnav{display:flex;flex-wrap:wrap;gap:0 6px;margin:0 0 8px 0}
/*  손가락으로 누르는 자리다. 글자만 두면 높이가 20px 이라 눌리지 않는다(실측). */
.fnav a{font-size:.8rem;color:var(--muted);text-decoration:none;display:inline-block;padding:11px 8px}
.fnav a:hover{color:var(--accent)}
.fbiz{font-size:.74rem;color:var(--faint);line-height:1.8;margin:0 0 3px;padding-left:8px}
/*  손가락으로 누르는 자리다. 글자만 두면 높이가 18px 이라 눌리지 않는다(실측). */
.fbiz a{color:inherit;text-decoration:none;display:inline-block;padding:8px 4px;margin:-8px -4px}
.fbiz a:hover{color:var(--accent)}
.fdata{font-size:.74rem;color:var(--faint);margin:0;padding-left:8px}

/* ── 문서 (소개 · 조사 방법 · 개인정보처리방침 · 문의) ────────── */
.doc{max-width:660px;padding:8px 0 8px}
/*  남의 문서 사이트 h1 은 30~40px 이다(refs.json: Tailwind 30 · Stripe 32 · MDN 40).
    22px 는 그보다 훨씬 작았다. */
.doc h1{font-size:2.4rem;line-height:1.25;letter-spacing:-.03em;margin:4px 0 22px}
@media (max-width:900px){ .doc h1{font-size:2rem} }
.doc h2{font-size:.95rem;letter-spacing:-.01em;margin:28px 0 8px;
  padding-top:18px;border-top:1px solid var(--line)}
.doc > div > h2:first-child{border-top:0;padding-top:0;margin-top:0}
.doc p{font-size:.88rem;line-height:1.95;margin:0 0 12px}
.doc p:last-child{margin-bottom:0}
.doc p.q{color:var(--muted)}
.doc a{color:var(--accent)}
/*  문서의 목록은 «상자» 에 담는다. 테두리 없이 두면 글과 구별이 안 되고,
    긴 글에서 눈이 걸릴 데가 없어진다(Stripe·Tailwind 문서도 목록을 상자에 담는다). */
.doc ul{margin:16px 0 18px;padding:14px 18px;list-style:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.doc li{font-size:.86rem;line-height:1.9;padding-left:15px;position:relative;margin:0}
.doc li + li{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.doc li::before{content:"";position:absolute;left:2px;top:.85em;width:4px;height:4px;
  border-radius:50%;background:var(--line-strong)}
.doc li + li::before{top:calc(.85em + 8px)}
.doc dl{margin:0 0 14px}
.doc dt{font-size:.88rem;font-weight:600;margin:13px 0 3px}
.doc dt:first-child{margin-top:0}
.doc dd{margin:0;font-size:.85rem;line-height:1.9;color:var(--muted)}
.doc dd b{color:var(--ink)}
.doc .num{font-family:var(--mono);font-size:.76rem;color:var(--faint);font-weight:400}
.doc code{font-family:var(--mono);font-size:.82rem;background:var(--sunken);padding:1px 5px;border-radius:3px}

/*  ★ app.css 위쪽에 «th,td{text-align:center}» 가 맨몸으로 걸려 있다. 비교표를 위한 규칙인데
    모든 표에 걸린다. 문서의 표는 왼쪽 정렬이고, 값이 시작하는 자리도 고정해야 한다 —
    안 그러면 이름 길이대로 밀려서 「1,067」과 「49」가 서로 다른 곳에서 시작한다(실측). */
.doc .facts{width:100%;border-collapse:collapse;font-size:.85rem;margin:0 0 14px;table-layout:fixed}
.doc .facts th,.doc .facts td{text-align:left;vertical-align:middle;border-bottom:0}
.doc .facts th{font-weight:400;color:var(--muted);padding:6px 14px 6px 0;width:168px}
.doc .facts td{padding:6px 0;line-height:1.8}
.doc .facts tr + tr th,.doc .facts tr + tr td{border-top:1px solid var(--line)}
@media (max-width:640px){
  /*  좁으면 이름을 값 «위» 로 올린다. 168px 를 붙들면 값이 두 글자씩 끊긴다. */
  .doc .facts{table-layout:auto}
  .doc .facts tr,.doc .facts th,.doc .facts td{display:block;width:auto;padding:0}
  .doc .facts th{color:var(--faint);font-size:.72rem;padding-top:9px}
  .doc .facts tr + tr th,.doc .facts tr + tr td{border-top:0}
  .doc .facts tr + tr{border-top:1px solid var(--line)}
}


/* ══════════════════════════════════════════════════════════
   띠(band) 짜임 — 2026-08-31 오너 승인

   실측하고 옮겼다. Stripe·Linear·Vercel·Notion·Figma·AlternativeTo·
   theresanaiforthat·Product Hunt 를 끝까지 훑어 잰 값이다.

                    Stripe  Linear  Vercel  Notion   고치기 전
     구역 여백        80·96   128px     —     96px      22px    ← 4~6배 차이
     큰 제목          48px    64px    64px    96px      25px
     본문             16px    16px    16px    16px      15px
     안쪽 폭          1232    1344    1392    1229      1320
     배경색 가짓수       3     명도차   명도차     1         1

   화면이 답답했던 이유는 색이 아니라 «구역이 나뉘어 있지 않아서» 였다.
   ────────────────────────────────────────────────────── */

/*  띠는 화면 끝까지, 안쪽 내용만 폭을 잡는다. 그래야 배경이 구역을 가른다. */
.band{padding:96px 20px}
.band.tight{padding:60px 20px}
.inner{max-width:1280px;margin:0 auto}
.b-paper{background:var(--paper)}
.b-line{border-top:1px solid var(--line)}
.b-ink{background:var(--ink);color:#fff}
.b-ink .lede,.b-ink .kicker,.b-ink .nums span{color:rgba(255,255,255,.62)}
.b-ink .lede b,.b-ink .d-h2{color:#fff}
.b-ink .d-h2 .dim{color:rgba(255,255,255,.55)}

.kicker{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:0 0 16px}
.d-h1{font-size:3rem;line-height:1.28;letter-spacing:-.03em;margin:0 0 20px;max-width:17ch}
.d-h2{font-size:2rem;line-height:1.4;letter-spacing:-.025em;margin:0 0 14px;max-width:34ch}
/*  Stripe·Linear 둘 다 «진한 문장 + 회색 뒷문장» 을 한 문단 안에서 색으로 가른다. */
.d-h2 .dim{color:var(--muted)}
.lede{font-size:1rem;line-height:1.85;color:var(--muted);margin:0;max-width:52ch}
.lede + .lede{margin-top:14px}
.lede b{color:var(--ink)}
.rulebar{height:3px;width:70px;background:var(--ink);margin:0 0 20px}

/* 히어로 — 관측: Stripe 685px · Linear 약 900px 을 통째로 쓴다 */
.hero{padding:80px 20px 0}
#areaintro .hero{padding:22px 20px 0}   /* 영역 소개는 자료 화면이다 */
.heroband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hrow{display:flex;gap:10px;margin:26px 0 0;flex-wrap:wrap}
.hbtn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;
  border-radius:var(--r);padding:13px 22px;font-size:.9rem;font-weight:600;text-decoration:none}
.hbtn.ghost2{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.b-ink .hbtn.ghost2{color:#fff;border-color:rgba(255,255,255,.3)}

/*  히어로의 시각물 — 우리가 가진 «그림» 은 비교표 그 자체다 */
.peek{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(20,24,40,.28)}
.peek .ph{padding:11px 15px;border-bottom:1px solid var(--line);
  font-size:.78rem;color:var(--muted);background:var(--paper)}
.peek .pt{overflow-x:auto}          /* 좁으면 페이지가 아니라 표 안에서 밀린다 */
.peek table{width:100%;min-width:470px;border-collapse:collapse;font-size:.82rem}
.peek th,.peek td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
/*  기능 이름은 «한 줄» 로 둔다. 좁은 화면에서 쪼개지면 표가 아니라 글 뭉치가 된다.
    대신 표 안에서 옆으로 밀린다(.pt 가 받는다). */
.peek th:first-child,.peek td:first-child{text-align:left;color:var(--muted);
  font-weight:400;font-size:.78rem;white-space:nowrap}
.peek th{font-weight:600;font-size:.78rem}
.peek tr:last-child td{border-bottom:0}
.peek .pk-ok{color:var(--ok)} .peek .pk-roll{color:var(--roll)} .peek .pk-no{color:var(--no)}

/* 신뢰 띠 — 관측: Stripe·Linear 둘 다 히어로 «바로 아래» 로고 줄.
   ★ 우리는 조사한 «전부» 를 흐르게 한다(오너 지시 2026-09-01).
     띠 자체가 「이만큼 열어 봤다」는 말이 된다. */
.marquee{position:relative;overflow:hidden;margin:0 0 20px;
  /*  양끝을 흐리게 — 잘린 로고가 «잘렸다» 가 아니라 «이어진다» 로 읽힌다 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee .track{display:flex;width:max-content;align-items:center;gap:34px;
  animation:logoflow 110s linear infinite}
.marquee:hover .track{animation-play-state:paused}   /* 눌러 보려면 멈춰야 한다 */
@keyframes logoflow{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.wl{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  filter:grayscale(.45);opacity:.82}
.wl img{max-width:100%;max-height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  /*  움직임을 싫어하는 사람이 있다. 그때는 흐르지 않고 한 줄로 선다. */
  .marquee .track{animation:none}
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}
.wallnote{text-align:center;font-size:.8rem;color:var(--faint)}
.wallnote b{color:var(--muted)}

/* 숫자 띠 */
.nums{display:grid;grid-template-columns:repeat(4,1fr)}
.nums > div{padding:0 26px;border-left:1px solid var(--line)}
.nums > div:first-child{padding-left:0;border-left:0}
.b-ink .nums > div{border-left-color:rgba(255,255,255,.16)}
.nums b{display:block;font-size:2.5rem;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/*  날짜는 «수» 가 아니다. 40px 로 두면 「2026-08- / 31」로 갈린다. */
.nums b.date{font-size:1.35rem;letter-spacing:-.01em;padding-top:14px}
.nums span{display:block;font-size:.82rem;color:var(--muted);margin-top:6px}

/* 3열 — 관측: Stripe·Linear 둘 다 «아이콘 + 굵은 이름 + 이어지는 설명» */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.three h4{font-size:.95rem;margin:0 0 8px;letter-spacing:-.01em}
.three p{font-size:.88rem;line-height:1.85;color:var(--muted);margin:0}
.three .mk{width:30px;height:30px;border-radius:7px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 0 14px;color:var(--accent)}

/* 좌 짧은 제목 / 우 설명 — 관측: Linear 「Intake / and integrations」 */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}

@media (max-width:900px){
  .band{padding:56px 20px} .band.tight{padding:40px 20px} .hero{padding:44px 20px 0}
  #areaintro .hero{padding:18px 20px 0}
  .heroband{grid-template-columns:1fr;gap:32px}
  .split{grid-template-columns:1fr;gap:20px}
  .three{grid-template-columns:1fr;gap:30px}
  /*  남의 사이트 모바일 h1 은 34~42px 이다(refs.json). 32px 는 그보다 작다. */
  .d-h1{font-size:2.2rem} .d-h2{font-size:1.55rem}
}
@media (max-width:760px){
  .nums{grid-template-columns:1fr 1fr;gap:28px 0}
  .nums > div:nth-child(3){padding-left:0;border-left:0}
  .nums b{font-size:1.9rem}
}

/*  영역 소개의 서비스 카드 — 로고를 이름 앞에 둔다.
    관측: AlternativeTo · SaaSHub · Product Hunt 셋 다 그렇게 한다. */
.svgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.svgrid a{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);padding:12px 14px;
  text-decoration:none;color:var(--ink)}
.svgrid a:hover{border-color:var(--accent-line)}
.svgrid .lg{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center}
.svgrid .lg img{max-width:100%;max-height:100%;object-fit:contain}
.svgrid .nolg{font-size:.76rem;font-weight:600;color:var(--faint)}
.svgrid b{font-size:.86rem;font-weight:500;flex:1;min-width:0;line-height:1.45}
.svgrid span:not(.lg):not(.nolg){font-size:.74rem;color:var(--faint);font-family:var(--mono);flex:none}

/*  작업 화면(트리＋비교표)은 «띠» 가 아니라 «도구» 다. 96px 여백을 두면
    모바일에서 답(비교표)이 화면 아래로 밀린다 — 답이 먼저 보여야 한다(실측). */
#browsework{padding:20px 20px 64px}

/* ── 서비스 화면의 신원 블록 ─────────────────────────────
   관측: AlternativeTo · SaaSHub · Product Hunt 셋 다 로고를 이름 앞에 둔다. */
.ident{display:flex;gap:20px;align-items:flex-start}
.ident .lg{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center}
.ident .lg img{max-width:100%;max-height:100%;object-fit:contain}
.ident .nolg{font-size:1.3rem;font-weight:600;color:var(--faint)}
/*  이름이 곧 제목이다. 남의 비교 사이트도 여기를 가장 크게 쓴다(AlternativeTo 48px). */
.ident h1{font-size:3rem;letter-spacing:-.03em;margin:0 0 8px;line-height:1.15}
@media (max-width:900px){ .ident h1{font-size:2.2rem} .ident .lg{width:48px;height:48px} }

/*  숫자 띠 — 저희가 «얼마나 확인했는가» 를 보인다 */
.snums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  margin:24px 0 4px;overflow:hidden}
.snums > div{padding:14px 18px;border-left:1px solid var(--line)}
.snums > div:first-child{border-left:0}
.snums b{display:block;font-size:1.6rem;letter-spacing:-.025em;line-height:1.2;
  font-variant-numeric:tabular-nums}
.snums span{display:block;font-size:.76rem;color:var(--faint);margin-top:3px}

/*  ── 머리 아래 여백은 «화면 갈래» 마다 다르다 ──────────────
    한 값(52px)으로 뭉갰더니 자료 화면이 텅 빈 것처럼 보였다(오너 지적 2026-09-01).
    남의 사이트를 재서 나온 값이다(refs.json).

      갈래        남의 사이트                     우리
      첫 화면     Stripe 76 · Linear 131      넉넉히 둔다 — 볼 것을 옆에 둔 자리다
      자료 화면   AlternativeTo 16 · 다 합쳐 32 이하   붙인다 — 보러 온 것이 바로 나와야 한다
      문서        Stripe 문서 8 · 다 합쳐 59 이하      중간

    자료 화면 = 서비스 목록 · 서비스 한 곳 · 영역 소개 · 작업 화면.
    「보러 온 것」이 화면 위쪽에 바로 있어야 한다. */
#screen-service,#screen-services{padding-top:22px}
#screen-doc{padding-top:34px}
/*  ★ 새 화면을 만들 때마다 여기 넣는 것을 잊었다 — .band 기본값(96px)이 그대로 남아
    등록·내 정보 화면 위에 큰 빈 자리가 생겼다(오너 지적 2026-09-01, 두 번째 걸림).
    자료 화면과 같은 갈래로 22px 을 쓴다. */
#screen-register,#screen-my,#screen-login{padding-top:22px}

/* ── 문서의 오른쪽 레일 ─────────────────────────────────
   관측: Tailwind·Stripe 문서가 「On this page」를 오른쪽에 둔다.
   긴 글은 어디쯤 왔는지 보이지 않으면 읽기 어렵다. */
.docwrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start}
@media (max-width:960px){
  .docwrap{grid-template-columns:1fr;gap:26px}
  /*  좁으면 목차가 맨 위로 온다. 테두리가 없으면 «떠 있는 링크 뭉치» 로 보이고,
      글 맨 앞이 통째로 글자 벽이 된다(실측: 네 문서 모두 46px 지점부터 500~730px).
      상자로 묶으면 목차답게 읽히고 눈도 걸린다. */
  .docrail{order:-1;border:1px solid var(--line);border-radius:var(--r);
    background:var(--paper);padding:16px 18px}
  .docrail .rail + .rail{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
  .docrail .toc a{padding:8px 0 8px 12px}
}
.rail + .rail{margin-top:30px}
.rail h4{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  margin:0 0 10px;font-weight:600}
.toc a{display:block;padding:9px 0 9px 12px;border-left:2px solid var(--line);
  color:var(--muted);text-decoration:none;line-height:1.5;font-size:.82rem}
.toc a:hover{color:var(--accent);border-left-color:var(--accent-line)}
.toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:500}
.rlist a{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:.82rem}
.rlist a:last-child{border-bottom:0}
.rlist a:hover{color:var(--accent)}

/*  서비스 화면의 기능 — 분류별 칩. 영역 화면의 색인과 같은 부품(.ixg/.slist/.sitem)이다.
    전에는 접이식이라 처음엔 아무것도 안 보였다(그림·아이콘 1개). */
.sfeat{margin-top:4px}
.sfeat .ixg{margin-bottom:16px}
.sfeat .ixg:last-child{margin-bottom:0}

/*  기능 칩 안의 표시 — 비교표와 «같은 기호» 다. 뜻이 이어져야 한다. */
a.sitem.fchipish{display:inline-flex;align-items:center;gap:6px}
a.sitem.fchipish.d{color:var(--ok)}
a.sitem.fchipish.r{color:var(--roll);border-style:dashed}
a.sitem.fchipish span{color:var(--ink)}
a.sitem.fchipish:hover{border-color:var(--accent)}
a.sitem.fchipish:hover span{color:var(--accent)}

/* ── 문서 안의 «보여 주는 자리» ─────────────────────────
   문서에 사진을 억지로 넣지 않는다 — 그건 채우기다.
   대신 말로 쓴 것을 그 자리에서 보인다. */
/*  막대를 상자에 담는다. 테두리 없이 두면 글 사이에 «떠 있어» 눈이 안 걸린다. */
.figbars{margin:16px 0 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:14px 18px}
.figbar{display:flex;align-items:center;gap:12px;padding:7px 0}
.figbar .fbn{font-size:.82rem;width:150px;flex:none;color:var(--muted)}
.figbar .fbx{flex:1;height:9px;background:var(--sunken);border-radius:5px;overflow:hidden;min-width:0}
.figbar .fbx i{display:block;height:100%;background:var(--accent);border-radius:5px}
.figbar .fbv{font-size:.8rem;font-family:var(--mono);width:56px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums}
@media (max-width:640px){ .figbar .fbn{width:96px;font-size:.76rem} .figbar .fbv{width:46px} }

.figmarks{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:16px 0 18px}
.figmark{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.figmark:last-child{border-bottom:0}
.figmark.direct{color:var(--ok)} .figmark.roll{color:var(--roll)} .figmark.no{color:var(--no)}
.figmark > div{min-width:0;flex:1}
.figmark b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:4px}
.figmark .fmn{font-weight:400;font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-left:9px}
.figmark p{margin:0;font-size:.83rem;line-height:1.8;color:var(--muted)}

/*  문서의 «요점 상자» — 긴 글 사이에 눈이 걸릴 자리를 둔다.
    색깔 콜아웃(노랑·주황)은 쓰지 않는다. 테두리와 여백만으로 가른다. */
.docbox{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
  padding:16px 18px;margin:16px 0 18px}
.docbox p{margin:0;font-size:.86rem;line-height:1.85}
.docbox p + p{margin-top:8px}
.docbox b{color:var(--ink)}
.doc .snums{margin:0 0 24px}

/*  요점 상자의 표시 — 사이트가 쓰는 그 기호. 꾸밈이 아니라 «무슨 말인가» 를 가른다. */
.docbox.marked{display:flex;gap:13px;align-items:flex-start}
.docbox .dbmk{flex:none;line-height:0;padding-top:2px}
.docbox .dbmk.direct{color:var(--ok)} .docbox .dbmk.no{color:var(--no)}
.docbox .dbmk.roll{color:var(--roll)}
.docbox.marked > div{min-width:0;flex:1}

/*  문서 안의 로고 줄 — 「저희가 조사한 곳」 */
.docwall{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin:16px 0 20px}
.docwall .wl{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  filter:grayscale(.45);opacity:.82}
.docwall .wl img{max-width:100%;max-height:100%;object-fit:contain}

/*  첫 화면 3열의 «실제 예시 한 조각» — 말한 것을 바로 보여 준다.
    셋이 세로로 쌓이는 모바일에서 글자만 이어지던 자리다(실측 740px). */
.exbox{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);margin-top:14px}
.exrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--line);font-size:.8rem}
.exrow:last-child{border-bottom:0}
.exrow .exl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exrow .exr{flex:none;font-size:.74rem;color:var(--muted)}
.exrow .exr.q{color:var(--faint)}
.exrow .exr.ok{color:var(--ok);line-height:0}
.exrow .exr.no{color:var(--no)}

/*  숫자 띠 — 넓은 화면은 검정 띠로 따로, 좁은 화면은 제목 바로 아래로.
    좁을 때 제목과 해설 사이가 619px 짜리 글자 벽이었다(실측). */
.onlynarrow{display:none}
@media (max-width:900px){
  .onlywide{display:none}
  .onlynarrow{display:grid;margin:22px 0 0;
    border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:16px 20px}
  /*  ★ 상자 «안» 이라 왼쪽 칸도 여백이 있어야 한다.
      .nums > div:first-child{padding-left:0} 은 «띠» 일 때 화면 끝에 맞추려던 규칙인데,
      상자 안에서는 글자가 테두리에 붙어 버렸다(오너 지적 2026-09-01).
      상자 여백은 .onlynarrow 가 주고, 칸 여백은 «구분선과 글자 사이» 만 준다. */
  .onlynarrow > div{padding:0 0 0 18px}
  .onlynarrow.nums > div:first-child,
  .onlynarrow.nums > div:nth-child(3){padding-left:0}
  .onlynarrow b{font-size:1.6rem}
}
/*  「한 곳에서만」 줄의 표시 */
.figcap{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.75;color:var(--muted)}
.figcap b{color:var(--ink)}

/*  「이름만 확인(애매함)」 — 공식 페이지의 말이 여러 뜻으로 읽히는 경우.
    사라지면 안 되는 정보다. 칩 안에 작게 붙인다. */
a.sitem.amb{border-style:dotted}
a.sitem .ambn{font-size:.68rem;color:var(--faint);margin-left:2px}

/*  기능 칩 안의 «근거» 링크 — 어디서 봤는지가 붙어 있는 것이 이 사이트의 전부다. */
/*  손가락으로 누르는 자리다. 글자만 두면 10px 이라 눌리지 않는다(실측 94개 미달). */
a.sitem .chipev{color:var(--faint);font-size:.74rem;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;min-height:26px;margin:-4px -8px -4px 3px}
a.sitem .chipev:hover{color:var(--accent)}
a.sitem.fchipish{padding-right:4px}

/*  손가락으로 누르는 자리들 — 글자만 두면 21~22px 이라 눌리지 않는다(실측).
    빵부스러기 · 공식 사이트 링크 · 근거 줄의 링크. */
.crumb button,.crumb a{display:inline-block;padding:6px 6px;margin:-6px -6px}
.smeta a{display:inline-block;padding:6px 6px;margin:-6px -6px}
.evrow a{display:inline-block;padding:5px 4px;margin:-5px -4px}

/* ── 로그인 ─────────────────────────────────────────────
   시안 mockups/login.html (2026-08-31 승인). 구글·애플 둘만, «같은 무게» 로.
   한쪽만 색을 주면 그쪽을 고르라는 말이 된다. */
.inner.narrow{max-width:420px}
.sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer}
.sso + .sso{margin-top:10px}
.sso svg{width:18px;height:18px;flex:0 0 auto}
.sso[disabled]{opacity:.5;cursor:default}
.why{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);
  padding:13px 15px;font-size:.83rem;line-height:1.7;color:var(--ink);margin:0 0 20px}
.ssoerr{margin:14px 0 0;padding:12px 14px;border:1px solid var(--no);border-radius:var(--r);
  background:var(--no-soft);color:var(--no);font-size:.83rem;line-height:1.75}
.skip{display:block;text-align:center;margin-top:20px;font-size:.83rem;color:var(--muted)}
.ssonote{margin-top:22px;font-size:.78rem;line-height:1.9;color:var(--faint)}
.ssonote b{color:var(--muted)}

/*  톱바의 로그인 자리 — 「기능으로」 오른쪽 */
.authslot{order:3;position:relative;flex:none}
.authbtn{height:32px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:.78rem;font-weight:600;
  color:var(--ink);cursor:pointer;white-space:nowrap}
.authbtn:hover{border-color:var(--accent);color:var(--accent)}
.authmenu{position:absolute;right:0;top:38px;z-index:60;min-width:172px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  box-shadow:0 10px 28px -14px rgba(20,24,40,.35);overflow:hidden}
.authmenu a,.authmenu button{display:block;width:100%;text-align:left;padding:11px 14px;
  border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:.82rem;
  color:var(--ink);text-decoration:none;cursor:pointer}
.authmenu > :last-child{border-bottom:0}
.authmenu a:hover,.authmenu button:hover{background:var(--paper);color:var(--accent)}
.fnav .freg{color:var(--accent)}



/*  ── 서비스 등록 · 내 정보 ──────────────────────────────────
    승인된 시안: mockups/register-b1.html · my.html (2026-08-31).
    시안의 클래스와 값을 그대로 옮겼다. 눈대중으로 새로 정하지 않는다. */
.rghd{margin:0 0 22px}
.rghd p{margin:8px 0 0;font-size:.92rem;line-height:1.7;color:var(--muted)}
.rghd p b{color:var(--ink)}

/*  4단계 표시 — mockups/_shared.css 의 것 그대로다.
    register-b1.html 자신에는 .steps 정의가 없다 — 공용 파일 것을 물려받는다.
    한 테두리 상자 안에 4칸이 flex:1 로 «똑같이» 나뉘고, 칸 사이는 세로 구분선이다.
    (전에 있던 알약 모양 칩은 내가 시안을 안 보고 지어낸 것이었다 — 오너 지적 2026-09-01.) */
.steps{display:flex;margin:22px 0 28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.steps .st{flex:1;padding:11px 8px;text-align:center;font-size:.79rem;color:var(--ok);
  border-right:1px solid var(--line)}
.steps .st:last-child{border-right:0}
.steps .st b{display:block;font-size:.7rem;font-weight:600;margin-bottom:2px}
.steps .st.now{background:var(--accent-soft);color:var(--ink)}
.steps .st.now b{color:var(--accent)}
.steps .st.todo{color:var(--faint)}

.rgh2{font-size:1.05rem;margin:0 0 6px;letter-spacing:-.01em}
.rgsay{margin:0 0 20px;font-size:.86rem;line-height:1.7;color:var(--muted)}
.rgsay b{color:var(--ink)}

.rgbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.rgpad{padding:22px}

.f{margin:0 0 24px}
.f:last-child{margin-bottom:0}
.f > label{display:block;font-size:.88rem;font-weight:600;margin:0 0 9px}
.f .req{color:var(--accent);margin-left:3px}
.f .hint{display:block;font-weight:400;font-size:.78rem;line-height:1.65;color:var(--muted);margin-top:4px}
.f input[type=text],.f textarea{width:100%;height:42px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.88rem;padding:0 12px;outline:none}
.f textarea{height:auto;padding:11px 12px;line-height:1.7;resize:vertical}
.f input:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/*  주소 한 줄 = [입력칸] [종류] [지우기]. 시안의 격자 값 그대로. */
.urlrow{display:grid;grid-template-columns:1fr 112px 40px;gap:8px;align-items:center;margin-bottom:8px}
.urlrow input{min-width:0}
.urlrow .kind{font-size:.72rem;height:42px;line-height:40px;text-align:center;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*  ★ 아직 «어떤 곳인지» 모를 때는 배지를 그리지 않는다.
    시안에서도 빈 자리는 <span></span> 로 비어 있다 — 빈 파란 상자가 아니다. */
.urlrow .kind:empty{border:0;background:none}
.urlrow .del{height:42px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);color:var(--muted);cursor:pointer;font-size:.82rem;padding:0}
.urlrow .del:hover{border-color:var(--no);color:var(--no)}
.addurl{border:1px dashed var(--line-strong);background:none;border-radius:var(--r-sm);
  height:42px;font:inherit;font-size:.8rem;color:var(--muted);cursor:pointer;width:100%}
.addurl:hover{border-color:var(--accent);color:var(--accent)}
.checkrow{display:flex;gap:8px;align-items:center;margin-top:10px}
.checkrow .said{font-size:.78rem;color:var(--faint)}
.check{height:42px;border:1px solid var(--accent);background:var(--surface);border-radius:var(--r-sm);
  padding:0 18px;font:inherit;font-size:.85rem;font-weight:600;color:var(--accent);
  cursor:pointer;white-space:nowrap}
.check:hover{background:var(--accent);color:#fff}
.check.big{width:100%;height:48px;font-size:.92rem}
.check[disabled]{opacity:.5;cursor:default}
.rgnav{margin:22px 0 0}

.res{margin-top:12px;border:1px solid var(--accent-line);border-radius:var(--r-sm);
  background:var(--accent-soft);padding:13px 15px;font-size:.82rem;line-height:1.7;color:var(--muted)}
.res .h{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);margin-bottom:6px}
.res .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.res p{margin:0}
.res p b{color:var(--ink)}
.tagxs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tagx{border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--surface);
  padding:4px 9px;font-size:.74rem;color:var(--accent)}

/*  환경 칩 11가지. 이름은 «절대» 줄바꿈하지 않는다(시안 주석). */
.envs{display:flex;flex-wrap:wrap;gap:8px}
.env{display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);height:42px;padding:0 13px;font-size:.82rem;
  background:var(--paper);cursor:pointer}
.env input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent);padding:0;margin:0}
.env .t{white-space:nowrap;flex:0 0 auto}
.env.on{background:var(--accent-soft);border-color:var(--accent-line)}
.env .auto{font-size:.66rem;color:var(--accent);white-space:nowrap}

.aside{margin-top:22px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line);
  font-size:.8rem;line-height:1.85;color:var(--muted)}
.aside b{color:var(--ink)}

@media (max-width:640px){
  .urlrow{grid-template-columns:1fr 40px;grid-template-areas:"url del" "kind kind";gap:6px 8px;margin-bottom:12px}
  .urlrow input{grid-area:url} .urlrow .del{grid-area:del}
  .urlrow .kind{grid-area:kind;justify-self:start;padding:0 11px;height:26px;line-height:24px}
  .urlrow .kind:empty{display:none}
  .checkrow{flex-direction:column;align-items:stretch;gap:6px}
  .checkrow .check{width:100%} .checkrow .said{text-align:center}
  .env{flex:1 1 100%}
  .rgpad{padding:16px}
}

/*  ── 내 정보 ── */
.mecard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:18px 20px;margin:0 0 22px}
.mecard b{display:block;font-size:1rem;margin-bottom:4px}
.mecard span{font-size:.84rem;color:var(--muted)}
.melist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;margin:0 0 22px}
.melist h2{margin:0;padding:13px 18px;font-size:.82rem;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);background:var(--paper)}
.melist .mrow{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.melist .mrow:last-child{border-bottom:0}
.melist .mrow b{flex:1;min-width:0;font-size:.9rem;font-weight:600}
.melist .mrow span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.melist .st{border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:3px 9px;font-size:.74rem;color:var(--muted);white-space:nowrap}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  text-decoration:underline;cursor:pointer}