/* --- style.css ---
 * 역할: 이미지 보드의 전체 화면과 점검 화면 스타일
 * 설명: index.html의 인라인 스타일을 분리
 */

:root {
      color-scheme: dark;
      --bg: #090c10;
      --line: #25313c;
      --text: #ecf1f6;
      --muted: #9baebb;
      --accent: #b5f588;
      --gap: 32px;
      --dim: .75;
      --fade: 250ms
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif
    }

    button {
      font: inherit;
      cursor: pointer
    }

    button:focus-visible {
      outline: 3px solid white;
      outline-offset: 5px
    }

    button:disabled {
      cursor: not-allowed;
      opacity: .4
    }

    [hidden] {
      display: none !important
    }

    #setup {
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      background: radial-gradient(ellipse at 50% 35%, #18252c 0, transparent 65%), #090c10
    }

    .setup-inner {
      width: min(760px, 100%)
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .16em;
      margin-bottom: 40px
    }

    .mark {
      color: var(--accent);
      font-weight: 800;
      letter-spacing: .24em
    }

    .edition {
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 7px 11px;
      letter-spacing: .08em
    }

    h1 {
      font-size: clamp(30px, 5vw, 46px);
      font-weight: 600;
      letter-spacing: -.055em;
      margin: 0 0 12px
    }

    .subtitle {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
      margin: 0 0 28px
    }

    .console {
      border: 1px solid #31404b;
      background: #0b1116;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 24px 80px #0005
    }

    .console-head {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #131d25;
      border-bottom: 1px solid var(--line);
      padding: 15px 20px;
      font: 12px ui-monospace, Consolas, monospace;
      color: #b2c1cc
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4f6574
    }

    .dot:first-child {
      background: var(--accent)
    }

    .console-title {
      margin-left: 9px
    }

    .status {
      margin-left: auto;
      color: var(--accent);
      font-size: 11px
    }

    .logs {
      height: clamp(200px, 32vh, 310px);
      overflow: auto;
      padding: 18px 20px;
      font: 13px/1.85 ui-monospace, SFMono-Regular, Consolas, 'Malgun Gothic', monospace;
      scrollbar-color: #3d5362 transparent
    }

    .log {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 8px;
      margin-bottom: 4px
    }

    .log span:last-child {
      overflow-wrap: anywhere;
      color: #cfdae3
    }

    .log.ok span:first-child {
      color: var(--accent)
    }

    .log.warn span:first-child {
      color: #ffd080
    }

    .log.error span:first-child {
      color: #ff9898
    }

    .log.info span:first-child {
      color: #94caff
    }

    .log.dim span {
      color: #94a4b1 !important
    }

    .meter {
      height: 2px;
      background: #1e2b34
    }

    .meter i {
      display: block;
      height: 100%;
      background: var(--accent);
      width: 0;
      transition: width .18s
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line)
    }

    .stat {
      padding: 16px 20px;
      border-right: 1px solid var(--line)
    }

    .stat:last-child {
      border: 0
    }

    .stat small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 5px
    }

    .stat strong {
      font: 22px ui-monospace, Consolas, monospace
    }

    .launch {
      margin-top: 20px;
      width: 100%;
      border: 0;
      border-radius: 10px;
      background: var(--accent);
      color: #172510;
      padding: 20px;
      font-size: 19px;
      font-weight: 750;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      transition: background .2s
    }

    .launch:hover:not(:disabled) {
      background: #cafba8
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 17px;
      color: var(--muted);
      font-size: 12px
    }

    .text-button {
      background: none;
      border: 0;
      color: #c5d4df;
      padding: 8px 0;
      text-decoration: underline;
      text-underline-offset: 4px
    }

    .note {
      margin: 22px 0 0;
      color: #8ea1ae;
      font-size: 12px;
      line-height: 1.7
    }

    #player {
      position: fixed;
      inset: 0;
      background: #000;
      overflow: hidden;
      isolation: isolate
    }

    .wall {
      position: absolute;
      inset: -8% -2%;
      display: grid;
      gap: var(--gap);
      transform: scale(1.02)
    }

    .wall-col {
      display: flex;
      flex-direction: column;
      gap: var(--gap)
    }

    .wall-col:nth-child(even) {
      transform: translateY(-70px)
    }

    .wall img {
      display: block;
      width: 100%;
      height: clamp(150px, 24vh, 350px);
      object-fit: cover
    }

    .shade {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, var(--dim))
    }

    .stage {
      position: absolute;
      inset: clamp(24px, 6vh, 72px) clamp(12px, 3vw, 56px);
      display: grid;
      gap: clamp(10px, 2vw, var(--gap))
    }

    .slot {
      position: relative;
      overflow: hidden;
      min-width: 0;
      background: #080808;
      border-radius: 2px
    }

    .frame {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity var(--fade) ease;
      overflow: hidden
    }

    .frame.active {
      opacity: 1
    }

    .blur {
      position: absolute;
      inset: -35px;
      background-position: center;
      background-size: cover;
      filter: blur(25px) brightness(.55);
      transform: scale(1.08)
    }

    .photo {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      inset: 0
    }

    .controls {
      position: absolute;
      z-index: 20;
      top: 15px;
      left: 20px;
      right: 20px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      opacity: 0;
      transition: opacity .2s;
      pointer-events: none
    }

    .controls.show,
    .controls:focus-within {
      opacity: 1;
      pointer-events: auto
    }

    .control-group {
      display: flex;
      gap: 8px
    }

    .controls button {
      background: #101820df;
      backdrop-filter: blur(12px);
      color: #edf4fa;
      border: 1px solid #43515d;
      border-radius: 7px;
      font-size: 12px;
      padding: 10px 14px
    }

    .badge {
      position: absolute;
      z-index: 21;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 18px;
      border-radius: 30px;
      background: #131d26ed;
      color: #dce9f2;
      font-size: 13px;
      pointer-events: none;
      white-space: nowrap
    }

    .hint {
      position: absolute;
      bottom: 18px;
      width: 100%;
      text-align: center;
      color: #bac7d0;
      font-size: 12px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s
    }

    .hint.show {
      opacity: 1
    }

    @media(max-width:600px) {
      #setup {
        padding: 25px 16px
      }

      .brand {
        margin-bottom: 28px
      }

      .logs {
        padding: 14px 12px;
        font-size: 12px
      }

      .stat {
        padding: 12px
      }

      .footer {
        align-items: flex-start
      }

      .edition {
        font-size: 10px
      }

      .stage {
        inset: 62px 10px 40px;
        gap: 8px
      }

      .controls {
        left: 10px;
        right: 10px
      }

      .controls button {
        padding: 9px;
        font-size: 11px
      }
    }

    .wall {
      inset: -5% -3%;
      gap: clamp(20px, 5vw, 90px);
      transform: none;
      background: #000
    }

    .wall-col {
      gap: clamp(28px, 7vh, 100px)
    }

    .wall-col:nth-child(even) {
      transform: translateY(-9vh)
    }

    .wall img {
      height: clamp(120px, 29vh, 420px);
      object-fit: contain;
      background: #000
    }

    .shade {
      background: #000;
      opacity: 0
    }

    .stage {
      opacity: 0;
      pointer-events: none
    }

    .slot {
      background: transparent;
      overflow: visible
    }

    .frame {
      transition: none;
      transform-origin: 0 0;
      background: #080808
    }

    .wall {
      inset: 0;
      display: block;
      transform: none;
      will-change: transform;
      overflow: visible;
      background: transparent
    }

    .wall img {
      position: absolute;
      display: block;
      object-fit: contain;
      background: #000;
      margin: 0;
      will-change: auto
    }

    .controls {
      justify-content: flex-end
    }

    .wall {
      backface-visibility: hidden;
      contain: layout style
    }

    .frame {
      will-change: transform;
      contain: layout style
    }

    .blur {
      filter: blur(16px) brightness(.55)
    }