.htb-wrap{display:flex;gap:16px;max-width:1400px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#333;align-items:flex-start}

/* 左カラム固定幅 */
.htb-left{width:280px;min-width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}

/* ⑤ 右エリア全体（CSS+コード上段 / プレビュー下段） */
.htb-right-wrap{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}

/* 上段: CSS + コード 横並び */
.htb-top-row{display:flex;gap:14px;align-items:flex-start}
.htb-css-box{width:260px;min-width:200px;flex-shrink:0}
.htb-code-box{flex:1;min-width:0}

.htb-box{display:flex;flex-direction:column;gap:8px}
.htb-box-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#27acd9;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

textarea{width:100%;padding:12px;font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;line-height:1.7;border:1px solid #e0e0e0;border-radius:6px;background:#fafaf8;resize:vertical;box-sizing:border-box;color:#333}
#htbInput{min-height:160px}
#htbCSSInput{min-height:200px}
#htbOutput{min-height:200px;background:#fffee9}

/* ① 横並びボタン */
.htb-top-actions{display:flex;gap:8px}
.htb-btn-parse{flex:1;padding:10px 14px;background:#27acd9;color:#fff;border:none;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap}
.htb-btn-parse:hover{background:#1a8bb5}
.htb-btn-clear{flex:1;padding:10px 14px;background:#fff;color:#aaa;border:1px solid #ddd;border-radius:24px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.htb-btn-clear:hover{border-color:#e05a7a;color:#e05a7a}

.htb-section-area{display:flex;flex-direction:column;gap:10px}
.htb-area-label{font-size:13px;font-weight:700;color:#333;margin-top:4px}
.htb-area-label--pattern{margin-top:8px;padding-top:10px;border-top:1px solid #ebebeb}

/* ② スクロールボックス */
.htb-pill-scroll{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 2px;scrollbar-width:thin;scrollbar-color:#27acd9 #f0f0f0}
.htb-pill-scroll::-webkit-scrollbar{width:4px}
.htb-pill-scroll::-webkit-scrollbar-track{background:#f0f0f0;border-radius:2px}
.htb-pill-scroll::-webkit-scrollbar-thumb{background:#27acd9;border-radius:2px}
.htb-pill-scroll--sm{max-height:180px}

.htb-sec-btn{padding:9px 14px;border:2px solid #27acd9;border-radius:22px;background:#fff;color:#27acd9;font-size:13px;font-weight:600;cursor:pointer;text-align:center;width:100%;transition:all .2s}
.htb-sec-btn:hover{background:#e6f7ff}
.htb-sec-btn.active{background:#e05a7a;border-color:#e05a7a;color:#fff}
.htb-pat-btn{padding:9px 14px;border:2px solid #27acd9;border-radius:22px;background:#fff;color:#27acd9;font-size:13px;font-weight:600;cursor:pointer;text-align:center;width:100%;transition:all .2s}
.htb-pat-btn:hover{background:#e6f7ff}
.htb-pat-btn.active{background:#e05a7a;border-color:#e05a7a;color:#fff}

.htb-realtime-badge{font-size:11px;font-weight:600;color:#e05a7a}
.htb-btn-copy{margin-left:auto;padding:4px 14px;background:#27acd9;color:#fff;border:none;border-radius:12px;font-size:11px;font-weight:700;cursor:pointer}
.htb-btn-copy:hover{background:#1a8bb5}
.htb-devices{display:flex;gap:4px;margin-left:auto}
.htb-dev-btn{padding:4px 11px;background:#fff;color:#aaa;border:1px solid #ddd;border-radius:11px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.htb-dev-btn.active{background:#27acd9;color:#fff;border-color:#27acd9}

/* ⑤ プレビュー: 右エリア全幅 */
.htb-preview-viewport{border:1px solid #e0e0e0;border-radius:6px;height:560px;overflow-y:auto;overflow-x:hidden;background:#fff;scroll-behavior:smooth}
.htb-preview-content{box-sizing:border-box;transition:max-width .3s}
.htb-device-desktop{max-width:100%}
.htb-device-tablet{max-width:768px;margin:0 auto}
.htb-device-mobile{max-width:375px;margin:0 auto}
.htb-preview-empty{color:#ccc;font-size:13px;text-align:center;padding:220px 20px 20px}

/* プレビュー内デフォルト（CSSが無い場合） */
.htb-preview-content h1,.htb-preview-content h2,.htb-preview-content h3{margin:10px 0 6px;line-height:1.4}
.htb-preview-content p{font-size:13px;line-height:1.8;margin:6px 0}
.htb-preview-content img{max-width:100%;height:auto;display:block;margin:8px auto}

@media(max-width:900px){.htb-wrap{flex-wrap:wrap}.htb-left{width:100%}.htb-top-row{flex-wrap:wrap}.htb-css-box{width:100%}}