/* 아이세 공용 테마 고르기 판 모양 — theme.css 다음에 불러 주세요.
   색은 전부 theme.css 변수에서 오고, 클래스는 모두 atp- 로 시작해서 사이트 CSS 와 겹치지 않아요. */
.atp {
  position: relative;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  word-break: keep-all;
}
.atp *, .atp *::before, .atp *::after { box-sizing: border-box; }
.atp svg { display: block; flex: none; }
.atp-float { position: fixed; top: 12px; right: 12px; z-index: 1000; }
.atp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.atp :focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* 여는 단추 */
.atp-btn {
  min-height: 44px; margin: 0; padding: 0 16px 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 9999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
}
.atp-btn:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.atp-float .atp-btn {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: var(--sh-float);
}
.atp-float .atp-btn:hover { background: var(--surface-2); }
.atp-cur {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--hero-a) 50%, var(--accent) 50%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent);
}

/* 고르기 판 */
.atp-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1001;
  width: 356px;
  max-height: calc(100vh - var(--atp-top, 80px) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 22px;
  box-shadow: var(--sh-float);
  text-align: left;
  animation: atp-in .14s ease-out;
}
.atp-pop[hidden] { display: none; }
@keyframes atp-in { from { opacity: 0; transform: translateY(-4px); } }
.atp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 4px 0; }
.atp-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.atp-x {
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.atp-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.atp-sec { margin: 0; padding: 0; border: 0; min-width: 0; }
.atp-sec + .atp-sec { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.atp-l { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.atp-l + * { clear: both; }

/* 라디오: 진짜 input 을 칸 전체에 투명하게 깔아서 누르기·방향키·화면 읽기가 기본 동작 그대로 */
.atp-opt, .atp-sw { position: relative; display: block; min-width: 0; cursor: pointer; }
.atp-opt input, .atp-sw input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}

/* 밝기 */
.atp-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  border-radius: 9999px; background: var(--surface-2);
}
.atp-seg-b {
  min-height: 40px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--ink-2);
  transition: background-color .15s, color .15s;
}
.atp-opt input:checked + .atp-seg-b { background: var(--surface); color: var(--ink); box-shadow: var(--sh-note); }
.atp-opt input:focus-visible + .atp-seg-b { outline: 3px solid var(--accent-ink); outline-offset: 1px; }

/* 색 */
.atp-cols, .atp-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px; align-items: center;
}
.atp-cols { margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.atp-cols span { padding-left: 8px; }
.atp-row + .atp-row { margin-top: 2px; }
.atp-fam { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.atp-span { grid-column: 2 / 4; }
.atp-sw-b {
  min-height: 44px; padding: 6px 8px 6px 7px;
  display: flex; align-items: center; gap: 9px;
  border-radius: 14px;
  font-weight: 500; color: var(--ink);
  transition: background-color .15s;
}
.atp-sw:hover .atp-sw-b { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.atp-sw input:checked + .atp-sw-b {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent-ink);
  font-weight: 700;
}
.atp-sw input:focus-visible + .atp-sw-b { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
.atp-dotw {
  position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
}
/* .atp-dot · .atp-dot-a 는 class="ayse-theme" 라서 그 안의 변수는 견본 테마 값
   바깥(.atp-dot)은 밝게 모드 첫 화면 띠, 안쪽 반(.atp-dot-a)은 지금 밝기의 강조색 */
.atp-dot {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--hero-a);
}
.atp-dot-a {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(135deg, transparent 0 50%, var(--accent) 50% 100%);
}
.atp-ck {
  position: absolute; right: -4px; bottom: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--surface);
  box-shadow: 0 0 0 1.5px var(--accent-soft);
  opacity: 0;
}
.atp-sw input:checked + .atp-sw-b .atp-ck { opacity: 1; }
.atp-sw-n { flex: 1; min-width: 0; line-height: 1.25; }
.atp-f { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }

/* 휴대폰: 판을 화면 폭에 맞춰 단추 바로 아래에 고정 */
@media (max-width: 480px) {
  .atp-pop {
    position: fixed; top: var(--atp-top, 68px); left: 12px; right: 12px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atp-pop { animation: none; }
  .atp-btn, .atp-seg-b, .atp-sw-b { transition: none; }
}