/* Browser font is supplied by the common-data plugin at runtime. */
:root{--sc-font-stack:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif-black,"Yu Gothic",YuGothic,Meiryo,sans-serif;--sc-measurement-font-stack:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;}
.sc-android{--sc-font-stack:"SC Noto Sans JP Android","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif-black,"Yu Gothic",YuGothic,Meiryo,sans-serif;--sc-measurement-font-stack:system-ui,"Noto Sans CJK JP","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;}
.board{font-weight:800;}
button,input,select{font-family:inherit;}

:root{ --shoe:#c7c7c7; --red:#e01e1e; --ink:#333; --avg:#2f6fb0; --muted:#9a9a9a;
         --w:#d0342c; --l:#2f6fb0; --k:#e0952f; }
  *{box-sizing:border-box;}
  /* Reserve desktop scrollbar width so proportional height cannot toggle it repeatedly. */
  /* The preview has its own accessible zoom controls. Keep Android's native
     page zoom from leaving the fixed-width design enlarged and horizontally clipped. */
  html{overflow-y:scroll;touch-action:pan-x pan-y;}
  body{margin:0;background:#fff;color:var(--ink);
    font-family:var(--sc-font-stack);
    padding:0;}
  .board{width:100%;margin:0;position:relative;background:#fff;
    padding:20px 0;border-radius:0;box-shadow:none;}
  /* Preview magnification belongs to this outer shell, never to design data. */
  .preview-viewport{width:100%;max-width:100%;min-width:0;position:relative;touch-action:pan-x pan-y;}
  .preview-viewport.is-zoomed{overflow:auto;max-height:calc(100dvh - 128px);overscroll-behavior:contain;}
  .preview-stage{position:relative;width:100%;max-width:100%;min-width:0;}
  /* Keep the reader canvas bound to its actual containing block.  Do not rebuild
     the iframe width as a rounded pixel value in JavaScript: at fractional page
     widths that can place the far border just outside the iframe paint area. */
  .preview-canvas{position:absolute;top:0;left:0;right:0;width:auto;max-width:100%;min-width:0;display:flow-root;transform-origin:0 0;}
  .preview-viewport.is-panning{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
  .preview-viewport.is-panning *{cursor:grab !important;}
  .preview-viewport.is-dragging,.preview-viewport.is-dragging *{cursor:grabbing !important;}
  .preview-tools{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:80;
    max-width:calc(100% - 20px);padding:6px 8px;background:#fff;border:1px solid #ccc;border-radius:12px;
    box-shadow:0 3px 14px #0003;}
  .preview-tools .preview-hint{display:block;font-size:10px;color:#555;text-align:center;margin-bottom:3px;}
  .preview-tools .preview-controls{display:flex;align-items:center;gap:4px;}
  .preview-tools button{min-width:44px;min-height:44px;padding:4px 8px;font-size:14px;
    font-weight:800;border:1px solid #ccc;border-radius:7px;background:#f7f7f7;touch-action:manipulation;
    white-space:nowrap;flex-shrink:0;}
  .preview-tools button[aria-pressed="true"]{background:#1268d3;color:#fff;border-color:#1268d3;}
  .preview-tools output{min-width:48px;text-align:center;font-size:14px;font-weight:800;}
  .editbar .arrow-picker-label{font-size:11px;color:#555;}
  .editbar #arrowPicker,.editbar #gaugeTextPicker,.editbar #gaugeIconPicker,.editbar #gaugeShapeProperty,.editbar #gaugeShapeImagePicker,.editbar #gaugeShapeTextPicker{width:100%;min-height:44px;flex-shrink:0;font-size:14px;border:1px solid #bbb;border-radius:6px;background:#fff;}
  .editing [data-gauge-label]{cursor:pointer;}
  .editing [data-gauge-shape-text]{cursor:pointer;}
  .editbar.gauge-text-selected .pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);}
  .editbar.gauge-text-selected #fsRow button{min-height:44px;}
  .editbar.gauge-text-selected #resizeRow,.editbar.gauge-text-selected #scaleRow,.editbar.gauge-text-selected #lwRow{display:none;}
  .editbar #gaugeAllFsRow button{min-height:44px;}
  .gauge-shape-editor-card{display:flex;flex-direction:column;gap:5px;padding-top:5px;border-top:1px solid #d9e2e8;}
  .gauge-shape-editor-title{font-size:11px;font-weight:800;line-height:1.35;color:#23465f;}
  .gauge-shape-text-pad,.gauge-shape-image-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:3px;justify-content:center;}
  .gauge-shape-text-pad button,.gauge-shape-image-pad button{padding:0!important;font-size:15px!important;font-weight:800;}
  .editing [data-chart-edit]{cursor:pointer;}
  .editbar .extension-controls button{min-height:44px;}
  .editbar #chartElementPicker,.editbar #chartFilterProperty{width:100%;min-height:44px;font-size:14px;flex-shrink:0;border:1px solid #bbb;border-radius:6px;background:#fff;}
  .chart-shoe-filter{max-width:680px;margin:0 auto 8px;padding:0 4px;
    --filter-font:20px;--filter-check:18px;--filter-line:1px;--filter-col-gap:2px;--filter-row-gap:0px;--filter-item-trim:26px;--filter-top-gap:0px;--filter-heading-y:0px;}
  .chart-shoe-filter-heading{position:relative;top:var(--filter-heading-y);margin:var(--section-filter-title-top,0px) 0 calc(8px + var(--section-filter-title-bottom,0px));font-size:var(--filter-font);font-weight:800;line-height:1.2;color:#333;}
  .chart-shoe-filter-hint{position:relative;top:var(--filter-heading-y);margin:-4px 0 7px;font-size:max(10px,calc(var(--filter-font) * .9));font-weight:400;line-height:1.35;color:#666;}
  .chart-shoe-filter-options{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--filter-col-gap);row-gap:0;}
  .chart-filter-option{position:relative;display:flex;flex:0 0 auto;width:max-content;max-width:100%;align-items:center;gap:5px;margin-right:max(0px,calc(40px - var(--filter-item-trim)));margin-bottom:var(--filter-row-gap);min-width:0;min-height:max(44px,calc(var(--filter-font) * 3.4));font-size:var(--filter-font);line-height:1.15;cursor:pointer;touch-action:manipulation;}
  .chart-filter-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .chart-filter-box{position:relative;flex:0 0 var(--filter-check);width:var(--filter-check);height:var(--filter-check);border:var(--filter-line) solid #777;border-radius:2px;background:#fff;}
  .chart-filter-option input:checked + .chart-filter-box{border-color:#2c6488;background:#2c6488;}
  .chart-filter-option input:checked + .chart-filter-box::after{content:"";position:absolute;left:29%;top:8%;width:31%;height:57%;border:solid #fff;border-width:0 max(1px,var(--filter-line)) max(1px,var(--filter-line)) 0;transform:rotate(45deg);}
  .chart-filter-option input:focus-visible + .chart-filter-box{outline:2px solid #1268d3;outline-offset:2px;}
  .chart-filter-text{display:block;min-width:0;overflow-wrap:anywhere;font-weight:800;}
  .chart-filter-brand{display:block;color:#666;font-size:.82em;font-weight:400;line-height:1.05;}
  .chart-filter-model{display:block;line-height:1.15;}
  .chart-shoe-filter-bottom{position:relative;top:var(--filter-block-y,0px);margin-top:var(--filter-top-gap);margin-bottom:4px;}
  @media (pointer:coarse){.chart-filter-option{min-height:max(48px,calc(var(--filter-font) * 3.6));}}
  .chart-label-layout{border:1px solid #c7d3dc;border-radius:9px;background:#f8fbfd;overflow:hidden;}
  .chart-label-layout > summary{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:12px;font-weight:800;color:#23465f;cursor:pointer;touch-action:manipulation;}
  .chart-label-layout > summary::marker{color:#2c6488;}
  .chart-label-layout-body{padding:0 7px 8px;}
  .chart-layout-toggle{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px;font-weight:800;}
  .chart-layout-toggle input{width:20px;height:20px;accent-color:#1268d3;}
  .chart-layout-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:2px 0 7px;}
  .chart-layout-presets button,.chart-layout-actions button{min-height:38px;padding:4px 3px;border:1px solid #aab8c2;border-radius:7px;background:#fff;font-size:10px;font-weight:800;touch-action:manipulation;}
  .chart-layout-presets button[aria-pressed="true"]{background:#2c6488;color:#fff;border-color:#2c6488;}
  .chart-layout-property{display:block;margin:5px 0 3px;color:#56636c;font-size:10px;font-weight:800;}
  .chart-layout-property select{display:block;width:100%;min-height:40px;margin-top:3px;border:1px solid #aab8c2;border-radius:7px;background:#fff;font-size:12px;font-weight:800;}
  .chart-layout-strength{padding:7px 0 4px;border-top:1px solid #dbe4ea;}
  .chart-layout-strength-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;}
  .chart-layout-strength output{flex:0 0 34px;text-align:right;color:#1268d3;font-size:13px;font-weight:800;}
  .chart-layout-strength small{display:block;margin-top:1px;color:#6d7880;font-size:9px;font-weight:400;line-height:1.3;}
  .chart-layout-strength input[type="range"]{display:block;width:100%;height:32px;margin:2px 0 0;accent-color:#1268d3;touch-action:pan-y;}
  .chart-layout-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
  .chart-layout-step button{min-height:38px;font-size:13px;font-weight:800;touch-action:manipulation;}
  .chart-layout-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:7px;}
  .chart-layout-status{display:block;min-height:30px;margin-top:7px;padding:6px 7px;border-radius:6px;background:#eaf2f7;color:#345;font-size:10px;line-height:1.4;}
  .chart-label-layout[data-disabled="true"] .chart-layout-editor{opacity:.45;}
  .editbar #chartColorRow input{width:44px;height:44px;padding:2px;border:1px solid #bbb;}
  .editbar #chartColorRow label{font-size:11px;display:flex;gap:6px;align-items:center;}
  .editbar #chartColorRow label[hidden]{display:none;}
  #chartSelectedSizeRow:not(.active),#chartColorRow:not(.active){display:none;}
  .editbar > *{flex-shrink:0;}
  .editor-primary{display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid #9fb8ca;border-radius:9px;background:#f4f9fc;}
  .editor-primary-title{font-size:12px;font-weight:800;color:#23465f;line-height:1.35;}
  .editor-primary-note{margin:0;font-size:10px;line-height:1.45;color:#5b6871;}
  .editor-filter-details,.editor-advanced{border:1px solid #c7d3dc;border-radius:8px;background:#fff;overflow:hidden;}
  .editor-filter-details > summary,.editor-advanced > summary{display:flex;align-items:center;min-height:40px;padding:0 9px;font-size:11px;font-weight:800;color:#23465f;cursor:pointer;touch-action:manipulation;}
  .editor-filter-details-body,.editor-advanced-body{display:flex;flex-direction:column;gap:4px;padding:7px;}
  .editor-advanced-body > *{flex-shrink:0;}
  .section-editor-list{display:flex;flex-direction:column;gap:4px;}
  .editor-section{border:1px solid #9fb8ca;border-radius:8px;background:#f4f9fc;overflow:hidden;}
  .editor-section > summary{display:flex;align-items:center;min-height:40px;padding:0 9px;font-size:11px;font-weight:800;line-height:1.3;color:#23465f;cursor:pointer;touch-action:manipulation;}
  .editor-section-body{display:flex;flex-direction:column;gap:5px;padding:7px;border-top:1px solid #d6e2ea;}
  .section-control-group{display:flex;flex-direction:column;gap:3px;}
  .section-control-group + .section-control-group{padding-top:5px;border-top:1px solid #d9e2e8;}
  .editbar #resizeRow button{min-height:44px;font-size:12px;}
  .figwrap-uni{width:100%;max-width:800px;margin:var(--gap,12px) auto 0;}
  #mainsvg{width:100%;height:auto;display:block;}
  #mainsvg .cap-t{font-family:var(--sc-font-stack);
    font-weight:800;fill:#555;}
  #mainsvg .shoe{ }
  .caps{display:flex;justify-content:center;gap:2%;margin-bottom:6px;}
  .cap-l{font-size:13px;font-weight:800;color:#555;text-align:center;}
  .row{display:flex;justify-content:center;align-items:flex-start;gap:2%;}
  .fig{position:relative;flex:0 0 auto;}
  .fig.top{width:20%;}
  .fig.sole{width:18%;}
  .fig.side{width:50%;}
  .fig .shoe{display:block;width:100%;height:auto;overflow:visible;}
  .fig .cap-l{margin-bottom:6px;}

  .lbl{position:absolute;white-space:nowrap;color:var(--red);font-weight:800;
    line-height:1.25;pointer-events:none;transform:translate(-50%,-50%);text-align:center;}
  .lbl .big{font-size:clamp(9px,1.45vw,18px);}
  .lbl .diff{font-size:clamp(8px,1.1vw,13px);opacity:.9;}
  .lbl .cap{font-size:clamp(8.5px,1.2vw,15px);}

  .foot{max-width:800px;margin:18px auto 0;text-align:right;color:var(--red);
    font-weight:800;font-size:clamp(11px,1.3vw,15px);padding-right:2%;}

  /* Only the coordinate diagrams use the 600px canvas. Feel ratings stay in normal flow. */
  .size-details-viewport{position:relative;width:100%;margin:0 auto;}
  .size-details-canvas{position:absolute;left:0;top:0;width:100%; max-width:800px;display:flow-root;
    transform-origin:0 0;text-size-adjust:none;-webkit-text-size-adjust:none;
    text-rendering:geometricPrecision;}
  .figtitle{font-size:var(--sc-heading-size,25.813953px);font-weight:800;color:#333;text-align:center;margin:var(--section-figure-title-top,0px) 0 calc(2px + var(--section-figure-title-bottom,0px));transform:translateY(var(--figtitle-y,-11px));}
  .figtitle-note{font-size:18px;font-weight:700;color:#666;text-align:center;text-wrap:wrap;line-height:1.4;margin:0 0 6px;padding:0 12px;box-sizing:border-box;transform:translateY(var(--figtitle-y,-11px));}
  .track{position:relative;height:24px;background:#f0f0f0;border-radius:6px;}
  .fill{position:absolute;left:0;top:0;height:100%;border-radius:6px;}
  .meas{font-size:11px;color:#888;font-weight:800;}
  .meas b{color:#888;font-weight:800;}

  /* ===== editor ===== */
  .editbar{position:fixed;top:10px;right:10px;z-index:50;background:#fff;border:1px solid #ddd;
    border-radius:10px;padding:8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.14);font-size:12px;
    display:flex;flex-direction:column;gap:4px;width:220px;
    max-height:48vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .editbar .draghandle{font-size:13px;font-weight:700;color:#666;text-align:center;cursor:grab;
    position:sticky;top:-8px;z-index:2;
    user-select:none;-webkit-user-select:none;touch-action:none;position:relative;
    padding:10px 0;margin:-4px -6px 4px;background:#f2f2f2;border-radius:8px 8px 0 0;}
  .editbar .draghandle #collapseBtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);
    width:26px;height:26px;padding:0;font-size:12px;border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer;}
  /* collapsed: hide the whole panel completely */
  .editbar.collapsed{display:none;}
  /* floating reopen button (draggable) */
  .reopen-fab{display:none;position:fixed;top:12px;right:12px;z-index:60;
    background:#e01e1e;color:#fff;border:none;border-radius:22px;padding:10px 18px;
    font-size:14px;font-weight:800;cursor:grab;touch-action:none;
    box-shadow:0 4px 14px rgba(0,0,0,.22);user-select:none;-webkit-user-select:none;}
  .reopen-fab.show{display:inline-flex;align-items:center;gap:6px;}
  .reopen-fab:active{cursor:grabbing;}
  .editbar .draghandle:active{cursor:grabbing;background:#e6e6e6;}
  .editbar .snaprow{display:flex;gap:4px;justify-content:center;}
  .editbar .snaprow button{flex:1;padding:4px 2px;font-size:14px;}
  .editbar button{font-size:11px;padding:3px 8px;border:1px solid #ccc;background:#f7f7f7;border-radius:6px;cursor:pointer;}
  .editbar button.on{background:#e01e1e;color:#fff;border-color:#e01e1e;}
  .editbar .padlabel{font-size:10px;color:#888;font-weight:700;}
  .editbar .pad{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px);gap:2px;justify-content:center;}
  .editbar .pad button{padding:0;font-weight:800;}
  .editbar .btnrow{display:flex;gap:4px;}
  .editbar .btnrow button{flex:1;padding:4px 2px;font-size:11px;}
  .editbar .resizerow{display:flex;flex-direction:column;gap:2px;opacity:.4;pointer-events:none;}
  .editbar .resizerow.active{opacity:1;pointer-events:auto;}
  .editbar .sel{font-size:11px;color:#333;min-height:16px;word-break:break-all;white-space:pre-line;
    background:#f4f7fb;border:1px solid #dde6f0;border-radius:6px;padding:5px 7px;line-height:1.4;}
  .editbar textarea{width:100%;height:140px;flex-shrink:0;font-size:10px;font-family:monospace;display:none;resize:vertical;}
  .editbar .export-status{margin:0;flex-shrink:0;font-size:11px;line-height:1.5;overflow-wrap:anywhere;color:#245526;}
  .editbar .export-status[data-state="manual"],.editbar .export-status[data-state="error"]{color:#8a3d00;}
  body.editing [data-editable],body.editing .arrow,body.editing [data-shoe]{cursor:pointer;pointer-events:auto !important;}
  body.editing [data-shoe]{outline:1px dashed #ddd;outline-offset:2px;}
  body.editing .arrow,body.editing .arrow *{pointer-events:auto !important;}
  .hitbox{pointer-events:none;}
  body.editing .hitbox{pointer-events:auto;}
  body.editing .lbl-svg,body.editing .lbl-svg *{pointer-events:auto !important;}
  .sel-outline{outline:2px dashed #1268d3 !important;outline-offset:2px;}
  .arrow.sel-outline{filter:drop-shadow(0 0 0 #1268d3);}
  .arrow.sel-arrow line,.arrow.sel-arrow path{stroke:#1268d3;}
  .arrow.sel-arrow path{fill:#1268d3;}
  .guide-line{display:none;}
  body.editing .guide-line{display:block;cursor:pointer;pointer-events:auto;}
  .guide-line.guide-sel line{stroke:#e01e1e;opacity:1;}
  .lbl-svg{cursor:default;}
  #mainsvg .lbl-svg text, #mainsvg .uni-foot text{
    paint-order:stroke fill;
    stroke:#ffffff;
    stroke-width:5px;
    stroke-linejoin:round;
    fill:#333;
  }
  .lbl-svg.sel-lbl text{fill:#1268d3 !important;}
  body.editing .lbl-svg{cursor:pointer;}

  @media (max-width:720px){
    /* compact editor panel on mobile */
    .editbar{width:184px;gap:4px;padding:6px 8px;max-height:48vh;}
    .editbar .draghandle{padding:6px 0;font-size:11px;margin:-2px -4px 2px;}
    .editbar .snaprow button{padding:2px 0;font-size:12px;}
    .editbar button{font-size:10.5px;padding:3px 6px;}
    .editbar .padlabel{font-size:9px;}
    .editbar .pad{grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);gap:2px;}
    .editbar .pad button{font-size:12px;}
    .editbar .btnrow{gap:3px;}
    .editbar .btnrow button{padding:3px 1px;font-size:10px;}
    .editbar .sel{font-size:10px;min-height:12px;}
    #editToggle{padding:5px;font-size:11px;}
    .editbar textarea{height:120px;font-size:9px;}
  }

  /* ===== チャート（2軸マップ）セクション ===== */
  .chartblock{width:100%;margin:0 auto 4px;}
  .charttitlewrap{position:relative;top:var(--section-main-title-dy,0px);text-align:center;margin:calc(2px + var(--section-main-title-top,0px)) 0 var(--section-main-title-bottom,0px);}
  .charttitle{display:inline-block;background:transparent;color:#333;font-weight:800;
    font-size:var(--sc-heading-size,25.813953px);line-height:1.35;padding:11px 0;border-radius:0;letter-spacing:.02em;}
  .chart-section-title{position:relative;top:var(--section-comparison-title-dy,0px);z-index:2;font-size:var(--sc-heading-size,25.813953px);font-weight:800;color:#333;
    line-height:1.35;text-align:center;margin:var(--section-comparison-title-top,0px) 0 calc(var(--chart-title-gap,6px) + var(--section-comparison-title-bottom,0px));}
  #chartsvg{width:100%;height:auto;display:block;}
  #chartsvg text{font-family:var(--sc-font-stack);
    paint-order:stroke fill;stroke:#fff;stroke-width:4px;stroke-linejoin:round;}
  #chartsvg .ch-pill text{stroke:none;}
  #chartsvg .ch-labels text{stroke-width:5px;}
  #chartsvg .ch-edit-grid text{stroke-width:2px;fill:#385b7d;}
  .editbar .chart-grid-toggle{display:flex;align-items:center;gap:7px;min-height:44px;font-size:12px;line-height:1.5;cursor:pointer;}
  .editbar .chart-grid-toggle input{width:18px;height:18px;margin:0;flex-shrink:0;accent-color:#385b7d;}
  .editbar .chart-grid-hint{margin:0;font-size:10px;line-height:1.5;color:#666;}
  .section-divider-gap{padding:var(--divider-top,14px) 0 var(--divider-bottom,17px);}
  .section-divider{position:relative;width:100%;height:2px;transform:translateY(var(--divider-y,0px));}
  .section-divider::before{content:"";position:absolute;top:0;left:0;border-top:2px dashed #dcdcdc;
    width:calc(100% * var(--details-display-scale,1));transform-origin:0 0;
    transform:scale(calc(1 / var(--details-display-scale,1)));}
  /* Feel component: ordinary layout; one rule for all three axes. */
  .size-details{display:flow-root;width:100%;margin:0 auto;}
  .gaugeblock{--feel-average:#3c4249;--feel-average-halo:#fff;--feel-line-width:2px;--feel-label-gap:2px;--feel-icon-frame-width:88px;--feel-icon-height:100px;max-width:800px;margin:0 auto;}
  .gaugeblock .gbtitle{margin:0 0 8px;font-size:16px;line-height:1.5;font-weight:800;text-align:center;}
  .gaugeblock .gauge-shape-note-position{display:flow-root;}
  .gaugeblock .gauge-shape-note{margin:0 0 24px;padding:0 12px;font-size:12px;line-height:1.5;font-weight:400;color:#777;text-align:center;overflow-wrap:anywhere;}
  .gaugeblock .gauge-shape-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;width:100%;max-width:460px;margin:0 auto 24px;padding:0 8px;box-sizing:border-box;}
  .gaugeblock .gauge-shape-item{min-width:0;text-align:center;}
  .gaugeblock .gauge-shape-item strong{display:block;margin:0 0 4px;font-size:18px;line-height:1.4;color:#333;font-weight:800;}
  .gaugeblock .gauge-shape-icon{width:100%;height:100px;overflow:hidden;}
  .gaugeblock .gauge-shape-icon svg{display:block;width:100%;height:100%;overflow:hidden;}
  .gaugeblock .gauge-shape-unavailable{display:block;padding:40px 0;font-size:14px;color:#777;}
  .gaugeblock .gauge-shape-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;font-size:16px;line-height:1.5;font-weight:800;color:#63717a;}
  .gaugeblock .gauge-shape-legend [data-gauge-shape-text]{min-width:0;overflow-wrap:anywhere;}
  .gaugeblock .gauge-shape-legend i{display:inline-block;width:14px;height:4px;margin-right:4px;vertical-align:middle;border-radius:3px;background:#dedede;}
  .gaugeblock .gauge-shape-legend .authentic{background:#d9322b;}
  /* Limit the complete feel row on wide screens; keep the icon and track together. */
  .gaugeblock .gr{display:grid;grid-template-columns:var(--feel-icon-frame-width) minmax(0,1fr);align-items:start;gap:12px;width:100%;max-width:600px;padding:0 4px;margin:0 auto 20px;}
  /* Move the icon within normal flow, so the row and following content shrink naturally. */
  .gaugeblock .gr[data-gauge-axis="length"],.gaugeblock .gr[data-gauge-axis="width"]{--feel-icon-offset:-15px;}
  /* Independent mobile-only fine tuning (0px means no additional shift). */
  .gaugeblock .gr[data-gauge-axis="length"]{--feel-mobile-icon-y:0px;}
  .gaugeblock .gr[data-gauge-axis="width"]{--feel-mobile-icon-y:0px;}
  .gaugeblock .gr[data-gauge-axis="instep"]{--feel-icon-offset:-9px;--feel-mobile-icon-y:0px;}
  .gaugeblock .gr:last-child{margin-bottom:0;}
  .gaugeblock .gricon{width:100%;height:var(--feel-icon-height);display:flex;align-items:center;justify-content:center;margin-top:var(--feel-icon-offset,0px);}
  .gaugeblock .pu-icon{display:block;width:100%;height:100%;overflow:visible;}
  .gaugeblock .grbody{min-width:0;align-self:start;}
  .gaugeblock .grtop{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin:0 0 6px;font-size:18px;line-height:1.5;font-weight:800;}
  .gaugeblock .grtop .name{flex:none;}
  .gaugeblock .grtop .verdict{min-width:0;overflow-wrap:anywhere;}
  .gaugeblock .track{position:relative;height:18px;margin:0 1px var(--feel-label-gap);background:#f0f0f0;border-radius:6px;}
  .gaugeblock .fill{position:absolute;left:0;top:0;height:100%;border-radius:6px;}
  /* The percentage is the marker CENTER. Label uses the same percentage,
     clamped by its own half-width only near the two ends. No score rounding. */
  /* One average marker on every track: dark 2px core, 1px white edge on each
     side. Its shadow never participates in sizing or the percentage position. */
  .gaugeblock .avgline{position:absolute;left:var(--average-position);top:0;width:var(--feel-line-width);height:100%;transform:translateX(-50%);background:var(--feel-average);box-shadow:-1px 0 0 var(--feel-average-halo),1px 0 0 var(--feel-average-halo);z-index:1;pointer-events:none;}
  /* Place the average and both endpoints on the same label row. Clamp only the
     average TEXT near the extremes; the average marker retains its true value. */
  .gaugeblock .track > .cap{position:absolute;left:clamp(calc(3em + 8px),var(--average-position),calc(100% - 3em - 8px));top:calc(100% + var(--feel-label-gap));transform:translateX(-50%);font-size:14px;line-height:1.5;color:#333;font-weight:800;white-space:nowrap;}
  .gaugeblock .ends{display:flex;justify-content:space-between;gap:12px;margin:0;color:var(--muted);font-size:14px;line-height:1.5;}
  /* Inside the reader iframe, viewport width is the available article width.
     Visual icon shifts do not alter the grid row height or move the scale. */
  @media (max-width:480px){
    .gaugeblock{--feel-icon-frame-width:72px;--feel-icon-height:84px;}
    .gaugeblock .gricon{transform:translateY(var(--feel-mobile-icon-y,0px));}
  }
  .gaugeblock [hidden]{display:none;}
  .gauge-shape-score-editor{display:grid;gap:8px;margin:8px 0 12px;padding:10px;border:1px solid #d8dde2;border-radius:8px;background:#f8fafc;}
  .gauge-shape-score-title{font-size:12px;font-weight:800;color:#40515f;}
  .gauge-shape-score-row{display:grid;grid-template-columns:24px 30px minmax(28px,1fr) 30px;align-items:center;gap:2px;font-size:11px;font-weight:800;color:#505b64;}
  .gauge-shape-score-row input[type="range"]{grid-column:1/-1;width:100%;min-width:0;margin:2px 0 0;accent-color:#d9322b;touch-action:manipulation;pointer-events:auto;}
  .gauge-shape-score-row button{min-width:0!important;min-height:38px!important;padding:2px!important;font-size:10px!important;}
  .gauge-shape-score-row output{text-align:right;font-variant-numeric:tabular-nums;color:#c92d27;}
  .gauge-shape-score-reset{min-height:36px!important;font-size:12px!important;}
  .gauge-shape-average,.gauge-shape-authentic{pointer-events:none;}

html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body > *,
  .page,
  .wrapper,
  .container,
  .preview-viewport,
  .previewViewport,
  .board,
  #board,
  #app,
  #root {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .board *,
  .preview-viewport *,
  .previewViewport * {
    box-sizing: border-box;
  }

  img, svg, canvas {
    max-width: 100%;
  }

  table {
    max-width: 100%;
  }

  /* 800pxを超える内部コンテンツは、外へはみ出さず親の中でスクロール */
  .logic,
  .table-wrap,
  .table-scroll,
  .sc-table-wrap {
    max-width: 100% !important;
    overflow-x: auto;
  }

  snl-size-recommender {
    display: block;
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }