/* ── 선 아이콘 (2026-09-11) ───────────────────────────────────────
   ★ partials/ic.blade.php 가 그리는 svg 의 «공통 규칙»이다.
     색은 currentColor — 놓이는 자리의 글자 색을 그대로 따라간다.
     크기는 1em — 옆 글자와 같은 크기로 서고, 자리에서 font-size 로 조절한다.

   🔴 왜 «따로» 파일인가 (2026-09-11)
     처음에는 site.css 에 넣었는데, 마이페이지는 site.css 를 «안 싣는다»(제 레이아웃을 쓴다).
     그래서 마이페이지의 아이콘만 규칙 없이 나가 «단추를 꽉 채우는 267px 짜리»가 됐고,
     「충전 취소」 글자가 오른쪽으로 밀려 두 줄로 깨졌다.
   ⚠ 아이콘을 쓰는 레이아웃은 «전부» 이 파일을 실어야 한다:
     components/layout.blade.php · components/my-layout.blade.php
   ⚠ svg 로 시작하는 선택자다 — 자리마다 있는 「.xx svg{width:..}」 규칙과 특이도를 맞춘다. */
svg.ic-s{width:1em;height:1em;flex:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}

/* ── 실제 플랫폼 로고 (2026-09-12, 2026-09-13에 여기로 옮김) ─────────
   🔴 왜 여기냐 — 전에는 home.css 에만 있었다. 그래서 첫 화면에서는 멀쩡한 로고가
     /services · /order · 상품 상세 · 고객센터에서는 «96px 짜리»로 나왔다.
     img 에 width="96" height="96" 이 붙어 있는데 그것을 줄여 줄 규칙이 그 화면에
     없었기 때문이다. icon.css 는 «모든 레이아웃이 싣는» 파일이라 여기 둔다.
     ⚠ 이 파일 위쪽 선 아이콘 주석에 적힌 267px 사고와 «같은 병»이다.
   ★ 기본 40px 를 준다. 자리마다 있는 「.xx .ico{width:..}」 규칙이 특이도가 높아
     그쪽이 먼저다 — .mc-hd 34px · .ptile 30px 는 그대로 산다.
   ★ 배경을 깔지 않는다. 로고가 제 색과 제 배경을 갖고 있다
     (유튜브 빨강 · 카카오 노랑 · 인스타 그라데이션). 뒤에 깔면 겹쳐서 탁해진다.
   ⚠ 둥근 모서리는 준다 — 카카오·크몽처럼 «네모 꽉 찬» 로고가 각져 보이지 않게. */
.ico-logo{width:40px;height:40px;flex:none;background:none !important;
  overflow:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ico-logo img{width:100%;height:100%;object-fit:contain;display:block}
.ptile .ico-logo img{width:88%;height:88%}
/* 링크 가이드 뱃지 안에서는 뱃지 색이 이미 깔려 있으므로 로고를 작게 얹는다 */
.gbadge .ico-logo{width:22px;height:22px;border-radius:6px}
.gbadge .ico-logo img{width:100%;height:100%}

/* ── 본문 바로가기 (2026-09-16) ────────────────────────────────────
   🔴 왜 여기냐 — 위 두 사고(267px 아이콘 · 96px 로고)와 «같은 이유»다.
     이 파일만 두 레이아웃(components/layout · components/my-layout)이 전부 싣는다.
     페이지 css 에 두면 그 페이지에서만 링크가 숨고, 나머지 화면에서는
     「본문 바로가기」가 로고 위에 검은 상자로 튀어나온다.
   ★ 화면에서 «치우는» 방식이 display:none 이 아니다. 그러면 탭 순서에서도 빠져
     링크가 아예 없는 것과 같아진다. 화면 밖(-100px)으로 올려 두고,
     초점이 오는 순간(:focus) 제자리로 내린다.
   ⚠ z-index 가 머리줄보다 높아야 한다. 머리줄이 60 이라 그 위를 쓴다 —
     낮으면 내려오긴 하는데 머리줄 뒤에 가려 안 보인다.
   ⚠ 받는 쪽(<main id="main">)에 tabindex="-1" 이 있어야 초점이 실제로 옮겨 간다.
     없으면 스크롤만 되고 다음 탭이 도로 머리줄로 돌아간다. */
.skip{position:absolute;left:12px;top:-100px;z-index:120;
  padding:10px 16px;border-radius:0 0 10px 10px;
  background:#12141a;color:#fff;font-size:14px;font-weight:700;
  text-decoration:none;transition:top .12s ease}
.skip:focus{top:0}
/* 초점을 받은 본문에 테두리를 그리지 않는다 — 화면 전체에 파란 테가 둘리면 놀란다.
   ⚠ 초점 자체는 «간다». 그 다음 탭이 본문 첫 링크로 이어지는 것이 이 링크의 목적이다. */
main[tabindex="-1"]:focus{outline:none}