
.tenx105{display:grid;grid-template-columns:460px minmax(0,1fr);gap:24px;background:#F3EFE7;padding:24px;border-radius:24px;max-width:1540px;margin:0 auto;font-family:Poppins,Arial,sans-serif;color:#2B2B2B;align-items:start;overflow:hidden}
@media(max-width:1100px){.tenx105{grid-template-columns:1fr}}
.tenx105-card{background:#fff;border:1px solid #EAE3D7;border-radius:20px;padding:22px;box-sizing:border-box}
.tenx105-brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7A5A3A;margin-bottom:8px}
.tenx105-controls h2{margin:0 0 18px;font-size:28px;line-height:1.1}
.tenx105-controls label{display:block;font-size:13px;font-weight:600;margin:14px 0 8px}
.tenx105-scroll{max-height:calc(100vh - 60px);overflow:auto;padding-right:6px}
.tenx105-preview{position:sticky;top:18px;overflow:hidden}
.tenx105-canvas-wrap{width:100%;overflow:hidden;border-radius:16px}
#tenx105_text,#tenx105_upload{width:100%;padding:12px;border:1px solid #D8D1C5;border-radius:14px;background:#fff;color:#2B2B2B;box-sizing:border-box}
.tenx105-fonts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:420px;overflow:auto}
.tenx105-font,.tenx105-usage-btn,.tenx105-room,.tenx105-thumb,.tenx105-board,.tenx105-board-color{padding:10px 8px;border:1px solid #D8D1C5;border-radius:12px;background:#fff;color:#2B2B2B;cursor:pointer;font-size:12px;line-height:1.1;min-width:0}
.tenx105-font.active,.tenx105-usage-btn.active,.tenx105-room.active,.tenx105-thumb.active,.tenx105-board.active,.tenx105-board-color.active{border-color:#6D6CFF;background:#6D6CFF;color:#fff;box-shadow:0 0 0 2px rgba(109,108,255,.18) inset}
.tenx105-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tenx105-color{width:100%;aspect-ratio:1/1;border-radius:999px;border:2px solid #D8D1C5;cursor:pointer;min-width:0}
.tenx105-color.active{border-color:#6D6CFF;box-shadow:0 0 0 3px rgba(109,108,255,.18)}
#tenx105_width{width:100%}
.tenx105-meta{margin-top:8px;font-size:13px;color:#7A5A3A}
.tenx105-usage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tenx105-rooms,.tenx105-board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tenx105-board-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tenx105-pricebox{margin-top:18px;padding-top:16px;border-top:1px solid #EAE3D7;display:flex;justify-content:space-between;align-items:center;gap:14px}
#tenx105_add{background:#C9A46A;color:#fff;border:none;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer}
.tenx105-msg{margin-top:10px;font-size:13px;color:#7A5A3A;min-height:18px}
.tenx105-preview-head{font-size:13px;font-weight:600;color:#7A5A3A;margin-bottom:10px}
#tenx105_canvas{display:block;max-width:100%;height:auto;background:#d8d0c4;border:1px solid #D8D1C5;border-radius:16px}
.tenx105-room-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}

.tenx105{overflow:hidden}
.tenx105-preview-wrap,.tenx105-preview,.tenx105-canvas-wrap{overflow:hidden}
#tenx105_canvas{display:block;max-width:100%;height:auto;background:#d8d0c4;border:1px solid #D8D1C5;border-radius:16px}

.tenx105-glow-toggle{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}
.tenx105-glow-btn{border:1px solid #d7cdbc;background:#fff;border-radius:16px;padding:12px 14px;font-weight:600;cursor:pointer}
.tenx105-glow-btn.active{background:linear-gradient(90deg,#6c6af0,#6f6cff);color:#fff;border-color:transparent}

.tenx105-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
.tenx105-color-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tenx105-color{width:44px;height:44px;border-radius:999px;border:2px solid #D8D1C5;cursor:pointer;min-width:44px}
.tenx105-color.active{border-color:#6D6CFF;box-shadow:0 0 0 3px rgba(109,108,255,.18)}
.tenx105-color-item span{font-size:11px;line-height:1.15;color:#7A5A3A}
@media(max-width:900px){
  .tenx105-colors{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.tenx105-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 10px;margin-top:10px}
.tenx105-color-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tenx105-color{width:36px;height:36px;border-radius:50%;border:2px solid #D8D1C5;cursor:pointer;transition:all .2s ease}
.tenx105-color:hover{transform:scale(1.08)}
.tenx105-color.active{border-color:#6D6CFF;box-shadow:0 0 0 3px rgba(109,108,255,.15)}
.tenx105-color-item span{font-size:11px;color:#8A6B47;font-weight:500;line-height:1.15}
.tenx105-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tenx105-preview-power{display:inline-flex;gap:8px}
.tenx105-power-btn{border:1px solid #d7cdbc;background:#fff;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer}
.tenx105-power-btn.active{background:linear-gradient(90deg,#6c6af0,#6f6cff);color:#fff;border-color:transparent}

.tenx105-upload-actions{margin-top:10px}
.tenx105-secondary-btn{
  border:1px solid #d7cdbc;background:#fff;border-radius:14px;padding:10px 14px;
  font-weight:600;cursor:pointer;color:#5f4a33
}
.tenx105-secondary-btn:hover{background:#faf7f2}
.tenx105-upload-note{margin-top:8px;font-size:12px;color:#8A6B47;line-height:1.3}

.tenx105-power-toggle,.preview-toggle,.live-toggle,.preview-switch{display:none !important;}

.tenx105-preview-power,.tenx105-power-btn,.tenx105-power-toggle,.preview-toggle,.live-toggle,.preview-switch{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;}

.tenx105-pricehint{font-size:13px;color:#8d7d67;font-weight:600}
.tenx105-inquiry{display:grid;gap:10px;margin-top:14px}
.tenx105-inquiry input,.tenx105-inquiry textarea{
  width:100%;border:1px solid #d8cdbd;border-radius:16px;padding:12px 14px;
  font:inherit;background:#fff;box-sizing:border-box
}
.tenx105-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#tenx105_inquiry_send{
  border:none;border-radius:16px;padding:14px 18px;cursor:pointer;
  background:#c8a86a;color:#fff;font-weight:700
}
#tenx105_inquiry_send:hover{filter:brightness(.96)}


/* V152: left panel longer + clearer scrolling hint */
.tenx105-controls{
  min-height: 92vh;
}

.tenx105-scroll{
  max-height: 88vh;
  overflow-y: auto;
  padding-bottom: 120px;
  scrollbar-width: thin;
}

.tenx105-scroll::after{
  content:"";
  position: sticky;
  bottom: 0;
  display: block;
  height: 64px;
  margin-top: -64px;
  background: linear-gradient(to bottom, rgba(244,239,230,0), rgba(244,239,230,0.96));
  pointer-events: none;
}

@media (max-width: 900px){
  .tenx105-controls{
    min-height: auto;
  }
  .tenx105-scroll{
    max-height: none;
    padding-bottom: 40px;
  }
  .tenx105-scroll::after{
    display:none;
  }
}


/* V152 mobile optimization incl. preview scaling */
@media (max-width: 900px){
  .tenx105{
    display:block !important;
    padding:12px !important;
    gap:12px !important;
  }
  .tenx105-card{ border-radius:20px !important; }
  .tenx105-controls,
  .tenx105-preview-wrap{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
  }
  .tenx105-preview-wrap{ margin-top:12px !important; }
  .tenx105-scroll{
    max-height:none !important;
    overflow:visible !important;
    padding-bottom:20px !important;
  }
  .tenx105-brand{
    font-size:12px !important;
    letter-spacing:.14em !important;
  }
  .tenx105-controls h2{
    font-size:42px !important;
    line-height:0.96 !important;
    margin:8px 0 18px !important;
  }
  .tenx105-controls label{ font-size:15px !important; }
  #tenx105_text{
    min-height:110px !important;
    font-size:18px !important;
  }
  .tenx105-fonts{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .tenx105-font,
  .tenx105-room,
  .tenx105-thumb,
  .tenx105-toggle button,
  .tenx105-board-colors button,
  .tenx105-board-style button,
  .tenx105-usage button{
    min-height:48px !important;
    padding:12px 10px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }
  .tenx105-colors{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px 8px !important;
  }
  .tenx105-color-item span{
    font-size:13px !important;
    line-height:1.15 !important;
  }
  .tenx105-color{
    width:48px !important;
    height:48px !important;
  }
  .tenx105-pricebox{
    display:grid !important;
    gap:10px !important;
    align-items:start !important;
  }
  .tenx105-pricebox strong{ font-size:28px !important; }
  .tenx105-inquiry-grid,
  .tenx105-row-2{
    grid-template-columns:1fr !important;
  }
  #tenx105_inquiry_send,
  #tenx105_add{
    width:100% !important;
    min-height:52px !important;
    font-size:16px !important;
  }
  .tenx105-preview-wrap .tenx105-card{
    padding:14px !important;
    overflow:hidden !important;
  }
  .tenx105-preview-wrap .tenx105-card > div:first-child{ font-size:15px !important; }

  .tenx105-preview,
  .tenx105-canvas-wrap,
  .canvas-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
  }

  .canvas-container{
    aspect-ratio:980 / 620;
  }

  .canvas-container canvas,
  .canvas-container .upper-canvas,
  .canvas-container .lower-canvas{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    left:0 !important;
    top:0 !important;
  }

  #tenx105_canvas{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    border-radius:18px !important;
  }

  .tenx105-room-strip{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .tenx105-room-strip .tenx105-thumb:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
  .tenx105-upload-row,
  .tenx105-pricebox,
  .tenx105-board-style,
  .tenx105-board-colors,
  .tenx105-rooms{
    gap:10px !important;
  }
  input[type="range"]{ height:36px !important; }
}

@media (max-width: 520px){
  .tenx105{ padding:10px !important; }
  .tenx105-controls h2{ font-size:34px !important; }
  .tenx105-fonts{ grid-template-columns:1fr 1fr !important; }
  .tenx105-colors{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .tenx105-room-strip{ grid-template-columns:1fr !important; }
  .tenx105-color{ width:44px !important; height:44px !important; }
}


/* V152 safe preview scaling */
.tenx105-preview-wrap,
.tenx105-preview,
.tenx105-canvas-wrap{
  min-width:0;
}

.tenx105-canvas-wrap{
  width:100%;
  overflow:hidden;
  position:relative;
}

.tenx105-canvas-wrap .canvas-container{
  display:block;
  max-width:none !important;
  will-change:transform;
}

.tenx105-canvas-wrap .canvas-container canvas,
.tenx105-canvas-wrap .canvas-container .upper-canvas,
.tenx105-canvas-wrap .canvas-container .lower-canvas{
  display:block;
}
