/* ============================================================
   CRYPTO ARCADE — UI KIT (crypto-arcade-ui-kit / ui-buttons.css 기반)
   전달서 규칙: 버튼은 [배경 PNG] + [아이콘 PNG] + [HTML 텍스트] 3층으로 만든다.
   통이미지 금지, radius/border/shadow 는 PNG 가 가지고 있으므로 CSS 로 덧대지 않는다.

   원본에서 바꾼 곳 (이유를 남긴다)
   1) 에셋 경로를 /assets/ui/... 로 옮김
   2) .ca-toggle 의 ::after 손잡이 제거 — toggle-on/off-track.png 두 장 모두
      손잡이가 이미 그려져 있어 CSS 손잡이를 얹으면 OFF 에서 두 개가 된다.
      상태는 트랙 색(청록/회색)과 ON·OFF 글자로 구분한다.
   3) 상태 선택자에 프로젝트가 이미 쓰는 .on 클래스를 함께 받도록 추가
      (main.js 의 bindOption 을 건드리지 않기 위함)
   4) focus-visible 링과 최소 터치 영역 44px 을 명시
   ============================================================ */

:root{
  --kit-navy:#102d5a;
  --kit-orange:#ff8a00;
  --kit-blue:#2f9eea;
  --kit-cyan:#35bfd4;
  --kit-green:#86cb20;
  --kit-red:#f06461;
  --kit-cream:#fff7e8;
  --kit-text:#15325e;
  --kit-font:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --kit-focus:0 0 0 3px #fff,0 0 0 6px rgb(53 191 212 / .85);
}

/* ---------------- 큰 액션 버튼 ---------------- */
.ca-button{
  --ca-skin:none;
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 32px;
  align-items:center;
  width:100%;
  min-height:84px;
  padding:10px 22px;
  border:0;
  color:#fff;
  font-family:var(--kit-font);
  background:transparent var(--ca-skin) center / 100% 100% no-repeat;
  cursor:pointer;
  transform:translateY(0);
  transition:transform 100ms ease,filter 100ms ease;
  -webkit-tap-highlight-color:transparent;
}
.ca-button:hover{transform:translateY(-2px);filter:brightness(1.05) saturate(1.04)}
.ca-button:active,
.ca-button.is-pressed{transform:translateY(4px);filter:brightness(.92)}
.ca-button:disabled,
.ca-button.is-disabled{pointer-events:none;filter:grayscale(.55);opacity:.52}
.ca-button:focus-visible{outline:0;box-shadow:var(--kit-focus);border-radius:26px}

.ca-button--orange{--ca-skin:url("/assets/ui/buttons/button-primary-orange.png")}
.ca-button--blue  {--ca-skin:url("/assets/ui/buttons/button-primary-blue.png")}
.ca-button--green {--ca-skin:url("/assets/ui/buttons/button-success-green.png")}
.ca-button--red   {--ca-skin:url("/assets/ui/buttons/button-danger-red.png")}
.ca-button--cyan  {--ca-skin:url("/assets/ui/buttons/button-action-cyan.png")}
.ca-button--gray  {--ca-skin:url("/assets/ui/buttons/button-disabled-gray.png")}
.ca-button--cream {--ca-skin:url("/assets/ui/buttons/button-secondary-cream.png");color:var(--kit-text)}
.ca-button--ghost {--ca-skin:url("/assets/ui/buttons/button-ghost-white.png");color:var(--kit-text)}

.ca-button__icon,
.ca-button__trail{
  width:40px;height:40px;
  object-fit:contain;
  justify-self:center;
  pointer-events:none;
}
.ca-button__trail{width:24px;height:24px}
.ca-button__copy{min-width:0;text-align:center;line-height:1.05}
.ca-button__title{
  display:block;font-size:27px;font-weight:900;letter-spacing:-.04em;
  text-shadow:0 2px 0 rgb(0 0 0 / .22);
}
.ca-button__subtitle{display:block;margin-top:5px;font-size:13px;font-weight:700;opacity:.82}
.ca-button--cream .ca-button__title{text-shadow:0 1px 0 rgb(255 255 255 / .7)}

/* 중간 크기 — 입장 등 */
.ca-button--md{
  min-height:56px;
  grid-template-columns:minmax(0,1fr);
  padding:8px 18px;
}
.ca-button--md .ca-button__title{font-size:19px;letter-spacing:.02em}

/* ---------------- 정사각 아이콘 버튼 ---------------- */
.ca-icon-button{
  width:68px;height:68px;
  min-width:44px;min-height:44px;      /* 터치 영역 보장 */
  padding:15px;
  border:0;
  cursor:pointer;
  background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
  transform:translateY(0);
  transition:transform 100ms ease,filter 100ms ease;
  -webkit-tap-highlight-color:transparent;
}
.ca-icon-button img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.ca-icon-button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ca-icon-button:active,
.ca-icon-button.is-pressed{transform:translateY(4px);filter:brightness(.92)}
.ca-icon-button:disabled{pointer-events:none;filter:grayscale(.55);opacity:.52}
.ca-icon-button:focus-visible{outline:0;box-shadow:var(--kit-focus);border-radius:20px}
.ca-icon-button[aria-expanded="true"]{filter:brightness(1.08) saturate(1.15)}

/* ---------------- 입력 필드 ---------------- */
.ca-field{
  width:100%;
  height:56px;
  padding:0 22px;
  border:0;
  outline:0;
  color:var(--kit-text);
  font:800 18px/1 var(--kit-font);
  background:transparent url("/assets/ui/buttons/field-input-white.png") center / 100% 100% no-repeat;
}
.ca-field::placeholder{color:#a8a6a2;font-weight:700}
.ca-field:focus{filter:drop-shadow(0 0 .35rem rgb(44 173 231 / .45))}
.ca-field:focus-visible{outline:0}

/* ---------------- 토글 ---------------- */
/* 손잡이는 PNG 에 이미 있다. CSS 로 또 그리지 않는다. */
.ca-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:138px;height:46px;
  padding:0 52px 0 14px;
  border:0;
  cursor:pointer;
  color:#fff;
  font:900 13px/1 var(--kit-font);
  text-shadow:0 1px 0 rgb(0 0 0 / .25);
  background:transparent url("/assets/ui/buttons/toggle-off-track.png") center / 100% 100% no-repeat;
  transform:translateY(0);
  transition:transform 100ms ease,filter 100ms ease;
  -webkit-tap-highlight-color:transparent;
}
/* 켜짐 : 프로젝트의 .on 클래스와 표준 aria-checked 둘 다 받는다 */
.ca-toggle.on,
.ca-toggle[aria-checked="true"]{
  background-image:url("/assets/ui/buttons/toggle-on-track.png");
  color:#fff;
}
.ca-toggle:not(.on):not([aria-checked="true"]){
  color:#5d6a78;
  text-shadow:0 1px 0 rgb(255 255 255 / .6);
}
.ca-toggle__icon{width:22px;height:22px;object-fit:contain;flex:0 0 22px;pointer-events:none}
.ca-toggle__label{white-space:nowrap}
.ca-toggle .state{font-family:var(--ca-mono,monospace);font-size:11px;letter-spacing:.06em}
.ca-toggle:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ca-toggle:active{transform:translateY(3px);filter:brightness(.92)}
.ca-toggle:focus-visible{outline:0;box-shadow:var(--kit-focus);border-radius:23px}

/* ---------------- 프로필 카드 ---------------- */
.ca-profile-card{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 68px;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:3px solid #f1d8ad;
  border-radius:28px;
  background:rgb(255 250 236 / .95);
  box-shadow:inset 0 2px 0 #fff,0 6px 0 rgb(146 110 72 / .18);
}
.ca-profile-card__avatar{width:68px;height:68px;object-fit:contain;display:block}
.ca-profile-card__label{color:#4c4c4b;font:800 13px/1.2 var(--kit-font)}
.ca-profile-card__name{
  margin-top:7px;width:100%;
  border:0;outline:0;background:transparent;padding:0;
  color:var(--kit-text);font:900 24px/1 var(--kit-font);
}
.ca-profile-card__name::placeholder{color:#bfb6a4}

/* ---------------- 좁은 화면 (전달서 기준 360px) ---------------- */
@media (max-width:420px){
  .ca-button{min-height:76px;grid-template-columns:42px minmax(0,1fr) 26px;padding-inline:18px}
  .ca-button__icon{width:36px;height:36px}
  .ca-button__title{font-size:24px}
  .ca-button__subtitle{font-size:12px}
  .ca-button--md{min-height:52px}
  .ca-button--md .ca-button__title{font-size:17px}
  .ca-icon-button{width:60px;height:60px;padding:12px}
  .ca-profile-card{grid-template-columns:56px minmax(0,1fr) 60px;gap:10px;padding:10px 12px}
  .ca-profile-card__avatar{width:56px;height:56px}
  .ca-profile-card__name{font-size:21px}
  .ca-toggle{width:132px}
}

@media (prefers-reduced-motion:reduce){
  .ca-button,.ca-icon-button,.ca-toggle{transition:none}
}

/* ============================================================
   UI 키트 적용 — 타이틀 화면 레이아웃 (2026-08-27)
   버튼·입력·토글 자체 모양은 ui-kit.css 가 담당한다.
   여기서는 배치와, 키트 컴포넌트를 감싸는 컨테이너만 손본다.
   ============================================================ */

/* 키트 버튼이 자기 그림자를 PNG 로 가지고 있으므로 패널은 담백하게 */
.title-wrap .home-panel{padding:16px 16px 14px}

/* --- 프로필 카드 --- */
.ca-profile-card{margin-bottom:14px}
.ca-profile-card__field{display:block;min-width:0}
/* 캔버스는 이미지가 아니므로 object-fit 대신 크기를 직접 준다 */
canvas.ca-profile-card__avatar{width:68px;height:68px}

/* --- 큰 버튼 사이 간격 --- */
.title-forms .ca-button--orange,
.title-forms .ca-button--blue{margin-bottom:12px}

/* --- 방 코드 + 입장 --- */
.join-row{
  display:grid;grid-template-columns:minmax(0,1fr) 104px;
  gap:10px;align-items:center;margin-top:2px;
}
.join-row .ca-field{
  text-transform:uppercase;letter-spacing:.26em;text-align:center;
}
.join-row .ca-button--md{min-height:56px}

/* --- 토글 두 개 --- */
.opts{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:14px;
}

/* --- 조작 방법 보기 : cream 버튼 --- */
/* 패널(.home-panel max-width:480px)과 같은 폭으로 맞춘다.
   그러지 않으면 태블릿 폭에서 이 버튼만 화면 끝까지 늘어난다. */
details.howto{
  width:100%;max-width:480px;margin:14px auto 0;text-align:left;
  background:none;border:0;padding:0;overflow:visible;
}
.title-forms .disclaimer{max-width:480px;margin-left:auto;margin-right:auto}
details.howto summary{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 26px;
  align-items:center;gap:8px;
  list-style:none;cursor:pointer;user-select:none;
  min-height:56px;padding:8px 20px;
  background:transparent url("/assets/ui/buttons/button-secondary-cream.png") center / 100% 100% no-repeat;
  color:var(--kit-text,#15325e);
  font:900 17px var(--ca-sans);letter-spacing:-.02em;text-align:center;
  transform:translateY(0);
  transition:transform 100ms ease,filter 100ms ease;
  -webkit-tap-highlight-color:transparent;
}
details.howto summary::-webkit-details-marker{display:none}
details.howto summary::after{content:none}
details.howto summary:hover{transform:translateY(-2px);filter:brightness(1.04)}
details.howto summary:active{transform:translateY(3px);filter:brightness(.94)}
details.howto summary:focus-visible{outline:0;box-shadow:var(--kit-focus);border-radius:22px}
.howto-ic{width:28px;height:28px;object-fit:contain;justify-self:center}
.howto-chev{
  width:22px;height:22px;object-fit:contain;justify-self:center;
  transition:transform 160ms ease;
}
details.howto[open] .howto-chev{transform:rotate(180deg)}
details.howto .howto-tx{min-width:0}
details.howto ul{
  margin:10px 0 0;padding:14px 20px 14px 34px;
  background:rgb(255 253 246 / .92);
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-xl);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:13px;line-height:1.9;color:#33456a;
}
@media (prefers-reduced-motion:reduce){
  details.howto summary,.howto-chev{transition:none}
}

/* --- 캐릭터 선택 패널은 키트 톤에 맞춘다 --- */
.char-picker{margin-bottom:12px}

/* --- 안내 문구 --- */
.title-wrap .note{
  margin:12px 0 0;text-align:center;
  font-family:var(--ca-sans);font-size:12px;font-weight:700;
}

/* ---------------- 360px 기준 ---------------- */
@media (max-width:420px){
  .title-wrap .home-panel{padding:13px 13px 12px}
  .join-row{grid-template-columns:minmax(0,1fr) 92px;gap:8px}
  .join-row .ca-button--md{min-height:52px}
  .join-row .ca-field{height:52px;font-size:16px;letter-spacing:.2em;padding:0 14px}
  .opts{gap:8px}
  details.howto summary{font-size:15px;min-height:52px;padding-inline:14px;grid-template-columns:28px minmax(0,1fr) 22px}
  .howto-ic{width:24px;height:24px}
  details.howto ul{font-size:12.5px;padding:12px 16px 12px 30px}
}

/* 아주 좁을 때 토글이 두 줄로 떨어지지 않게 */
@media (max-width:379px){
  .ca-toggle{width:calc(50% - 4px);min-width:0;padding:0 46px 0 10px;font-size:12px}
}

/* ------------------------------------------------------------
   기존 style.css 와의 우선순위 정리
   `input{...}`(요소 선택자)와 `.join-row input`(0,1,1)이
   `.ca-field`(0,1,0)보다 강해 키트 필드의 테두리·배경을 덮어쓴다.
   키트 PNG 가 이기도록 같은 자리에서 다시 선언한다.
   ------------------------------------------------------------ */
.join-row input.ca-field,
input.ca-field{
  height:56px;
  padding:0 22px;
  border:0;
  border-radius:0;
  background:transparent url("/assets/ui/buttons/field-input-white.png") center / 100% 100% no-repeat;
  color:var(--kit-text);
  font:800 18px/1 var(--kit-font);
  box-shadow:none;
  transition:filter 120ms ease;
}
.join-row input.ca-field::placeholder,
input.ca-field::placeholder{color:#a8a6a2;font-weight:700}
.join-row input.ca-field:focus,
input.ca-field:focus{
  border:0;box-shadow:none;
  filter:drop-shadow(0 0 .35rem rgb(44 173 231 / .45));
}
/* 프로필 카드 안의 닉네임 입력도 기본 input 껍데기를 벗긴다 */
input.ca-profile-card__name{
  height:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  font:900 24px/1 var(--kit-font);color:var(--kit-text);
}
input.ca-profile-card__name:focus{border:0;box-shadow:none}
input.ca-profile-card__name::placeholder{color:#bfb6a4;font-weight:800}

/* 옛 화살표(▾)와 아이콘 여백 규칙 무력화 — 이제 chevron PNG 를 쓴다 */
details.howto summary::after,
details.howto[open] summary::after{content:none}
details.howto .howto-ic{margin-right:0}

@media (max-width:420px){
  .join-row input.ca-field,
  input.ca-field{height:52px;font-size:16px;padding:0 14px}
  input.ca-profile-card__name{font-size:21px}
}

/* ============================================================
   PC 타이틀 배경 — 가로형 일러스트 (2026-08-27)
   세로(모바일용) 아트를 PC 2단에 그대로 끼워 넣으니 잘리고 어색했다.
   넓은 화면에서는 가로 배경을 화면 전체에 깔고,
   비어 있는 오른쪽 하늘 자리에 패널을 얹는다. 모바일은 기존 세로 아트 유지.
   ============================================================ */
@media (min-width:920px) and (min-height:600px){
  #scr-title{
    background:
      url("/assets/title-bg-wide.webp") center center / cover no-repeat;
    background-color:#dff0f7;          /* 이미지 로드 전/실패 시 */
  }

  /* 세로 아트는 배경이 대신한다 */
  .title-cols .title-hero{display:none}

  /* 왼쪽 칸에는 로고만. 배경의 하늘 부분에 오도록 위쪽에 붙인다. */
  .title-art{align-self:start;padding-top:4px}
  .title-cols .logo-img{
    width:min(430px,92%);
    margin:0 auto;
    filter:drop-shadow(0 12px 26px rgb(20 50 80 / .34));
  }

  /* 패널 자리(오른쪽 하늘)는 밝기 246 의 거의 흰 배경이라
     흰 테두리로는 경계가 사라진다. 옅은 청회색 테두리로 형태를 살린다. */
  .title-cols .home-panel{
    background:rgb(255 255 255 / .94);
    border:2px solid rgb(150 186 214 / .85);
    box-shadow:0 16px 40px rgb(20 50 80 / .26);
  }
  .title-cols details.howto summary{filter:drop-shadow(0 6px 14px rgb(20 50 80 / .2))}
  .title-cols .disclaimer{
    color:#3c5a72;
    text-shadow:0 1px 0 rgb(255 255 255 / .75);
  }
}

/* 아주 넓은 화면에서 배경이 과하게 확대되지 않도록 컨텐츠 폭만 넓힌다 */
@media (min-width:1600px){
  .title-wrap{width:min(1320px,100%)}
}

/* ============================================================
   버튼 PNG 9분할 (2026-08-27)
   기존에는 배경을 `100% 100%` 로 늘려 썼다. 원본이 377×191(가로세로 1.97)인데
   실제로는 434×84(5.17)로 그려져 모서리가 가로로 2.6배 늘어났다 —
   둥근 모서리가 납작한 타원이 되고 테두리 두께도 위아래/좌우가 달라 "깨져" 보인다.
   border-image 로 모서리는 원본 크기를 지키고 가운데만 늘린다.
   slice 값은 각 PNG 의 실제 모서리 곡률을 재서 정했다.
   border-image-width 가 border-width 보다 크면 안쪽 패딩 위로 그려지므로
   레이아웃(칸 크기)에는 영향이 없다.
   ============================================================ */
.ca-button,
.ca-toggle__track,
.ca-field,
.ca-icon-button,
.ca-guide-open,
.ca-rail-shuffle,
.ca-card-swap,
details.howto summary{
  background-image:none;
  border-style:solid;
  border-width:0;
  border-image-repeat:stretch;
}

/* 큰 액션 버튼 (높이 84 → 원본 191 기준 축척 0.44) */
.ca-button--orange{border-image-source:url("/assets/ui/buttons/button-primary-orange.png");border-image-slice:58 fill;border-image-width:26px}
.ca-button--blue  {border-image-source:url("/assets/ui/buttons/button-primary-blue.png");  border-image-slice:49 fill;border-image-width:22px}
.ca-button--green {border-image-source:url("/assets/ui/buttons/button-success-green.png"); border-image-slice:48 fill;border-image-width:21px}
.ca-button--red   {border-image-source:url("/assets/ui/buttons/button-danger-red.png");    border-image-slice:48 fill;border-image-width:21px}
.ca-button--cyan  {border-image-source:url("/assets/ui/buttons/button-action-cyan.png");   border-image-slice:54 fill;border-image-width:24px}
.ca-button--gray  {border-image-source:url("/assets/ui/buttons/button-disabled-gray.png"); border-image-slice:51 fill;border-image-width:23px}
.ca-button--cream {border-image-source:url("/assets/ui/buttons/button-secondary-cream.png");border-image-slice:46 fill;border-image-width:20px}
.ca-button--ghost {border-image-source:url("/assets/ui/buttons/button-ghost-white.png");   border-image-slice:45 fill;border-image-width:20px}

/* 중간 버튼(높이 56) 은 모서리도 그만큼 작게 */
.ca-button--md.ca-button--cyan {border-image-width:18px}
.ca-button--md.ca-button--cream{border-image-width:15px}
.ca-button--md.ca-button--ghost{border-image-width:15px}

/* 입력 필드 (높이 56 → 원본 141, 축척 0.4) */
.ca-field{
  border-image-source:url("/assets/ui/buttons/field-input-white.png");
  border-image-slice:37 fill;
  border-image-width:15px;
}

/* 정사각 아이콘 버튼 — 원본이 거의 정사각이라 왜곡이 적지만 통일한다 */
.ca-icon-button,
.ca-rail-shuffle,
.ca-card-swap{
  border-image-source:url("/assets/ui/buttons/button-icon-square-blue.png");
  border-image-slice:44 fill;
  border-image-width:15px;
}
.ca-guide-open{
  border-image-source:url("/assets/ui/buttons/button-action-cyan.png");
  border-image-slice:54 fill;
  border-image-width:16px;
  border-radius:0;
  box-shadow:none;
}
details.howto summary{
  border-image-source:url("/assets/ui/buttons/button-secondary-cream.png");
  border-image-slice:46 fill;
  border-image-width:16px;
}

/* ------------------------------------------------------------
   토글 — 손잡이가 PNG 에 박혀 있어 트랙을 늘리면 손잡이도 타원이 된다.
   아이콘·글자를 트랙 밖으로 빼고, 트랙만 원본 비율(292:144)로 고정한다.
   ------------------------------------------------------------ */
.ca-toggle{
  display:inline-flex;align-items:center;gap:8px;
  width:auto;height:auto;min-height:44px;
  padding:5px 12px;
  border:2px solid #cfe0ec;border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#eef6fb);
  box-shadow:inset 0 2px 0 #fff,0 3px 0 rgb(90 120 150 / .18);
  color:#2b4a63;text-shadow:none;
}
.ca-toggle.on{background:linear-gradient(180deg,#e8f8fd,#d3eefa);border-color:#8fd3ec;color:#0f5570}
.ca-toggle__icon{width:20px;height:20px;flex:0 0 20px}
.ca-toggle__label{white-space:nowrap;font:800 12.5px/1 var(--kit-font,sans-serif)}
.ca-toggle .state{
  display:inline-block;margin-left:4px;min-width:26px;
  font:900 10px/1 var(--ca-mono,monospace);letter-spacing:.06em;
}
/* 트랙 : 원본 비율 그대로라 손잡이가 동그랗게 유지된다 */
.ca-toggle__track{
  flex:0 0 auto;width:52px;height:calc(52px * 144 / 292);
  border-image-source:url("/assets/ui/buttons/toggle-off-track.png");
  border-image-slice:65 fill;
  border-image-width:9px;
}
.ca-toggle.on .ca-toggle__track{
  border-image-source:url("/assets/ui/buttons/toggle-on-track.png");
  border-image-slice:55 fill;
  border-image-width:9px;
}

@media (max-width:420px){
  .ca-button--orange,.ca-button--blue{border-image-width:22px}
  .ca-toggle__track{width:46px;height:calc(46px * 144 / 292)}
}

/* PC 타이틀 : 로고가 왼쪽 칸(626px) 안에서 430px 라 작고 붕 떠 보였다.
   칸을 꽉 채우도록 키우고 위 여백을 조금 준다. */
@media (min-width:920px) and (min-height:600px){
  .title-cols .logo-img{
    width:min(580px,96%);
    margin:0 auto;
  }
  .title-art{align-self:center;padding-top:0}
}
@media (min-width:1500px){
  .title-cols .logo-img{width:min(660px,96%)}
}