:root {
      --bg-dark: #2A2D34;
      --frame-bg: #EAE6E8;
      --picto-pink: #F8B4C0;
      --picto-pink-dark: #D46A80;
      --picto-pink-light: #FFF0F3;
      --pixel-black: #1A1A1A;
      --line-pink: #F7D2DA;
      --gray-btn: #F0F0F0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Galmuri9', monospace, sans-serif;
      -webkit-font-smoothing: none;
      image-rendering: pixelated;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      background-color: var(--bg-dark);
      background-image: radial-gradient(#3A3F4A 15%, transparent 16%);
      background-size: 10px 10px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      color: var(--pixel-black);
    }

    /* 스마트폰 비율의 모바일 단일 뷰포트 */
    .mobile-frame {
      width: 100%;
      max-width: 440px;
      height: 94vh;
      max-height: 820px;
      background: var(--frame-bg);
      border: 3px solid #111;
      border-radius: 18px;
      box-shadow: 0 10px 0 #111, 0 15px 25px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* 픽토챗 상단 툴바 */
    .picto-navbar {
      background: #B4B4B4;
      border-bottom: 2px solid #000;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: bold;
    }

    .room-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #FFF;
      border: 1.5px solid #000;
      padding: 2px 8px;
      box-shadow: 1px 1px 0 #000;
    }

    .status-icons {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 프로그레스 바 */
    .progress-bar-wrap {
      width: 100%;
      height: 6px;
      background: #DDD;
      border-bottom: 1.5px solid #000;
    }
    .progress-fill {
      width: 0%;
      height: 100%;
      background: var(--picto-pink-dark);
      transition: width 0.25s ease;
    }

    /* 메인 픽토챗 줄노트 작업 공간 */
    .main-screen {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .picto-pad {
      flex: 1;
      background: #FFF;
      border: 2px solid var(--picto-pink-dark);
      border-radius: 8px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, var(--line-pink) 28px);
      background-size: 100% 28px;
      box-shadow: inset 0 0 0 1px var(--picto-pink);
      overflow-y: auto;
    }

    .user-badge {
      display: inline-block;
      align-self: flex-start;
      background: var(--picto-pink);
      border: 1.5px solid var(--picto-pink-dark);
      color: #FFF;
      font-size: 11px;
      font-weight: bold;
      padding: 2px 8px;
      margin-bottom: 10px;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
    }

    /* 질문 및 보기 영역 (스마트폰 최적화) */
    .q-step {
      font-size: 11px;
      color: #666;
      margin-bottom: 4px;
      display: block;
    }

    .q-heading {
      font-size: 15px;
      font-weight: bold;
      line-height: 1.45;
      margin-bottom: 14px;
      color: #000;
    }

    .options-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 시원시원해진 터치 버튼 */
    .picto-choice-btn {
      width: 100%;
      min-height: 52px;
      padding: 10px 12px;
      background: #FFF;
      border: 2px solid #000;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      font-size: 13px;
      line-height: 1.35;
      cursor: pointer;
      box-shadow: 2px 2px 0 #000;
      transition: all 0.08s ease;
    }

    .picto-choice-btn:active {
      transform: translate(2px, 2px);
      box-shadow: none;
      background: var(--picto-pink-light);
      border-color: var(--picto-pink-dark);
    }

    .choice-bullet {
      width: 22px;
      height: 22px;
      background: #000;
      color: #FFF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      border-radius: 3px;
      flex-shrink: 0;
    }

    /* 결과 카드 스타일 */
    .result-card-inner {
      background: #FFF;
      border: 2px solid #000;
      padding: 14px;
      box-shadow: 2px 2px 0 #000;
      margin-bottom: 12px;
    }

    .result-title-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px dashed #000;
      padding-bottom: 8px;
      margin-bottom: 10px;
    }

    .style-chip-name {
      font-size: 22px;
      font-weight: bold;
      background: #000;
      color: #FFF;
      padding: 2px 10px;
    }

    .result-section {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
    }

    .item-chip {
      display: inline-block;
      font-size: 11px;
      background: #F1F1F1;
      border: 1px solid #777;
      padding: 2px 6px;
      margin: 2px;
      border-radius: 3px;
    }

    .color-chip-wrap {
      display: flex;
      gap: 6px;
      margin-top: 4px;
      flex-wrap: wrap;
    }

    .color-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      background: #F9F9F9;
      border: 1px solid #CCC;
      padding: 2px 6px;
    }

    .color-box {
      width: 12px;
      height: 12px;
      border: 1px solid #000;
      display: inline-block;
    }

    /* 하단 키보드 형태의 푸터 */
    .picto-footer {
      background: #C4C4C4;
      border-top: 2px solid #000;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ai-image-disclosure {
      margin: 0;
      padding: 3px 8px 5px;
      text-align: center;
      font-size: 9px;
      line-height: 1.4;
      color: #666;
      background: #C4C4C4;
    }

    .footer-btn {
      background: #EDEDED;
      border: 1.5px solid #000;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 1.5px 1.5px 0 #555;
    }

    .footer-btn:active {
      transform: translate(1.5px, 1.5px);
      box-shadow: none;
    }

    .footer-btn.primary {
      background: #1A1A1A;
      color: #FFF;
      box-shadow: 1.5px 1.5px 0 #666;
    }

    /* 6대 스타일 모아보기 모달창 */
    .styles-modal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      flex-direction: column;
      justify-content: flex-end;
      z-index: 50;
    }
    .styles-modal.open {
      display: flex;
    }

    .modal-sheet {
      background: #FFF;
      border-top: 3px solid #000;
      max-height: 80%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: slideUp 0.2s ease-out;
    }

    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    .modal-head {
      background: #B4B4B4;
      border-bottom: 2px solid #000;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 13px;
    }

    .modal-tabs {
      display: flex;
      background: #D8D8D8;
      border-bottom: 2px solid #000;
      overflow-x: auto;
    }
    .modal-tab-item {
      padding: 8px 12px;
      font-size: 12px;
      border-right: 1px solid #999;
      cursor: pointer;
      white-space: nowrap;
    }
    .modal-tab-item.active {
      background: #FFF;
      font-weight: bold;
      border-bottom: 2px solid #FFF;
      margin-bottom: -2px;
    }

    .modal-body {
      padding: 14px;
      overflow-y: auto;
      font-size: 12px;
      line-height: 1.5;
    }

    /* 토스트 메시지 */
    .toast {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      background: #000;
      color: #FFF;
      padding: 6px 14px;
      font-size: 11px;
      border: 1px solid #FFF;
      border-radius: 4px;
      display: none;
      z-index: 99;
    }
  /* Galmuri 2.40.3 — Copyright (c) 2019–2025 Lee Minseo. SIL OFL 1.1. Reserved Font Name: Galmuri. */
@font-face{font-family:Galmuri11;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/galmuri11-regular.woff2) format('woff2')}
@font-face{font-family:Galmuri11;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/galmuri11-bold.woff2) format('woff2')}
:root{--bg-dark:#c8edf4;--frame-bg:#e3f1f4;--picto-pink:#f6c4d9;--picto-pink-dark:#9d4f72;--picto-pink-light:#fff0f6;--pixel-black:#263f50;--line-pink:#f5dfe8;--gray-btn:#edf4f7}
*{font-family:Galmuri11,monospace,sans-serif;user-select:auto}body{background-image:linear-gradient(#ffffff90 1px,transparent 1px),linear-gradient(90deg,#ffffff90 1px,transparent 1px);background-size:22px 22px;align-items:flex-start;padding:16px;color:var(--pixel-black);font-size:16px;line-height:1.6}.mobile-frame{max-width:540px;height:auto;min-height:calc(100svh - 32px);max-height:none;border-color:var(--pixel-black);box-shadow:5px 6px 0 #7fabbc;overflow:hidden}.picto-navbar,.picto-footer,.modal-head{background:#bfe8f1;border-color:var(--pixel-black);font-size:14px}.room-title{border-color:var(--pixel-black);color:var(--pixel-black);font-size:16px}.status-icons{font-size:14px}.main-screen{overflow:visible;display:block}.picto-pad{overflow:visible;display:block;min-height:500px;background-color:#fffdf8;background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,#f5dfe870 28px)}#screenIntro{height:auto!important;gap:22px}#screenIntro h1{font-size:28px!important;line-height:1.5!important}#screenIntro p,#screenIntro>div>div[style]{font-size:15px!important}.user-badge{color:#5f3048;border-color:#a65e7e;font-size:14px;text-shadow:none;background:#f6cada}.q-step{font-size:14px;color:#526675}.q-heading{font-size:21px;color:var(--pixel-black);word-break:keep-all}.picto-choice-btn{font-size:16px;border-color:var(--pixel-black);color:var(--pixel-black);box-shadow:2px 3px 0 var(--pixel-black);min-height:56px;line-height:1.6;padding:12px;word-break:keep-all}.picto-choice-btn:hover{background:#eaf5f8}.picto-choice-btn[style*="background: #000"]{background:#2c5165!important;color:#fff!important}.choice-bullet{background:#2c5165;font-size:14px;border-radius:0;min-width:24px;height:24px}.picto-choice-btn:disabled{opacity:.6;cursor:wait}.result-card-inner{border-color:var(--pixel-black);box-shadow:2px 3px 0 #a6bec9;padding:16px}.result-title-bar{border-color:var(--pixel-black);gap:12px}.result-title-bar>div>span:first-child{font-size:14px!important;color:#49606e!important}.style-chip-name{background:#2c5165;color:white;display:inline-block;font-size:30px;margin-top:6px;line-height:1.4;padding:2px 10px}#resEmoji{font-size:12px!important;font-weight:700;color:#526b79;text-align:right;max-width:84px}#resTags{font-size:14px!important;color:#4c6574!important;word-break:keep-all}#resOneLiner{font-size:16px!important;color:#263f50!important;word-break:keep-all}#resDesc,#resTip{font-size:15px!important;color:#344d5d!important;line-height:1.7!important;word-break:keep-all}.result-section{font-size:16px;line-height:1.6;margin-top:18px}.item-chip{font-size:14px;border-color:#718999;border-radius:0;background:#f1f6f8}.color-chip{font-size:14px;border-color:#718999;background:#f3f7f9}.color-box{width:14px;height:14px;border-color:#637d8c}.color-chip-wrap{gap:7px;margin-top:8px}.footer-btn{min-height:44px;min-width:70px;font-size:14px;border-color:var(--pixel-black);color:var(--pixel-black)}.footer-btn.primary{background:#2c5165}.picto-footer>span{font-size:12px!important;color:#476372!important}.wardrobe{margin:20px 0 18px}.wardrobe h3{font-size:16px;margin:0 0 10px}.wardrobe h3 span{display:block;font-size:14px;color:#607480;font-weight:400}.outfit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.outfit-tile{border:1.5px solid #708c9a;background:#fff;padding:8px;min-width:0;box-shadow:2px 2px 0 #bfd4dd}.outfit-tile figcaption{font-size:14px;text-align:center;border-bottom:1px dashed #99afba;padding-bottom:6px;color:#36596d}.outfit-tile img{display:block;width:100%;height:230px;object-fit:contain;image-rendering:pixelated;background:white;margin:8px 0}.outfit-tile p{font-size:14px!important;line-height:1.7;word-break:keep-all;color:#3e5968}.small-note{font-size:14px!important;color:#4f6674!important;line-height:1.7!important;margin-top:12px!important;word-break:keep-all}.intro-pixels{display:flex;justify-content:center;gap:10px;border:2px solid #86a5b3;background:#f1f8fa;padding:12px}.intro-pixels img{width:calc((100% - 20px)/3);height:178px;object-fit:contain;image-rendering:pixelated;background:white}.consent{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6;padding:12px 0 0;cursor:pointer}.consent input{width:21px;height:21px;accent-color:#315d74;margin-top:2px;flex-shrink:0}.consent small{font-size:14px}.data-notice{font-size:14px;margin-top:8px;color:#4a6576}.data-notice summary{cursor:pointer;padding:6px 0;min-height:40px}.data-notice p{font-size:14px!important;line-height:1.7!important}.moafit-promo{padding:16px;background:#eee5f7;border:2px solid #3b5066;box-shadow:2px 3px 0 #a5b5c9;margin-top:20px}.moafit-promo h2{font-size:20px;margin:0 0 10px;word-break:keep-all}.moafit-promo p{font-size:14px;line-height:1.7}.promo-link{display:block;text-align:center;text-decoration:none;background:#f9cfe0;margin-top:14px;font-size:15px;font-weight:700}.shared-banner{border:2px solid #a36582;background:#fbe8f1;padding:12px;margin-bottom:14px;font-size:15px;line-height:1.7;text-align:center}.shared-banner[hidden]{display:none}.shared-banner .picto-choice-btn{justify-content:center;background:#2c5165;color:white;margin-top:10px}.styles-modal{position:fixed;background:#29435170;justify-content:center;align-items:center;padding:16px}.modal-sheet{max-width:540px;width:100%;max-height:90svh;border:3px solid var(--pixel-black);border-radius:8px;background:#fffdf9}.modal-head{font-size:15px}.modal-close{background:#fff;border:2px solid var(--pixel-black);padding:8px;font-size:14px;color:var(--pixel-black);min-height:44px;cursor:pointer}.modal-tabs{flex-shrink:0;flex-wrap:wrap;overflow-x:visible;background:#e5eff7;border-color:var(--pixel-black)}.modal-tab-item{font-size:14px;min-height:44px;padding:8px 10px;border:0;border-right:1px solid #829ba9;border-bottom:1px solid #829ba9;background:none;color:var(--pixel-black);flex:1 0 30%}.modal-tab-item.active{background:#f8d2e2;border-bottom:1px solid #829ba9;margin-bottom:0}.modal-body{font-size:15px;line-height:1.7;padding:16px}.modal-body h2{font-size:25px;margin-bottom:8px}.modal-body h3{font-size:17px;margin:18px 0 8px}.modal-tip{border:1px solid #ba7192;background:#fff0f6;padding:12px;margin-top:18px}.modal-body .outfit-tile img{height:220px}.toast{position:fixed;bottom:20px;max-width:calc(100% - 32px);width:max-content;background:#263f50;font-size:14px;line-height:1.6;padding:12px 16px;text-align:center;border:1px solid #fff;z-index:200}button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #714c91;outline-offset:3px}#resName:focus,#qTitle:focus{outline:none}.manual-share{margin-top:16px;padding:12px;background:#ecf6f8;border:1px solid #6c8b9b;font-size:14px}.manual-share[hidden]{display:none}.manual-share input{width:100%;padding:10px;font-size:14px;user-select:text;margin-top:8px;border:1px solid #6c8b9b}@media(max-width:420px){body{padding:10px}.mobile-frame{min-height:calc(100svh - 20px)}.main-screen{padding:10px}.picto-pad{padding:12px 10px}.result-card-inner{padding:12px 10px}.picto-navbar{padding:8px 10px}.room-title{font-size:14px}.status-icons{font-size:12px}.outfit-grid{gap:8px}.outfit-tile{padding:6px}.outfit-tile img{height:196px}.outfit-tile figcaption{font-size:14px}.outfit-tile p{font-size:14px!important}.intro-pixels{padding:8px;gap:6px}.intro-pixels img{height:160px}.styles-modal{padding:10px}.modal-body{padding:12px}.modal-body .outfit-tile img{height:190px}.picto-choice-btn{font-size:15px;padding:11px 10px}.q-heading{font-size:20px}.result-title-bar{gap:6px}.style-chip-name{font-size:28px}#resEmoji{font-size:11px!important}.picto-footer{padding:8px 10px}.modal-tab-item{padding:8px 6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Updated supplied lookbook assets and download fallback. */
.outfit-tile{margin:0}.outfit-tile img{height:auto;aspect-ratio:1696/2528;object-fit:contain}.modal-body .outfit-tile img{height:auto}
.result-image-preview{border:2px solid #708c9a;background:#fff;padding:12px;margin-top:16px}.result-image-preview[hidden]{display:none}.result-image-preview summary{font-size:15px;cursor:pointer;min-height:44px}.result-image-preview img{display:block;width:100%;height:auto;margin:12px 0}.result-image-preview a{display:flex;justify-content:center;text-decoration:none}