:root { color-scheme: light; --bg:#f3f6f9; --card:#fff; --ink:#18202a; --muted:#687585; --line:#dbe2e9; --primary:#1769aa; --primary-dark:#0f4e82; --soft:#eaf3fb; --danger:#b83232; --shadow:0 14px 40px rgba(23,45,68,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; }
button,input,select { font:inherit; }
.app-shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 64px; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.eyebrow { margin:0 0 7px; color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.12em; }
h1,h2 { margin:0; } h1 { font-size:clamp(28px,4vw,44px); letter-spacing:-.04em; } h2 { font-size:21px; }
.lead { margin:12px 0 0; color:var(--muted); }
.version { flex:0 0 auto; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; }
.case-card,.grand-total-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.case-list { display:grid; gap:22px; }
.case-card { overflow:hidden; }
.case-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); background:#fbfcfe; }
.case-title-wrap { display:flex; align-items:center; gap:12px; flex:1; }.case-number { font-weight:900; white-space:nowrap; font-size:18px; }
.case-name { width:min(420px,100%); border:1px solid var(--line); border-radius:9px; padding:10px 11px; }
.delete-case,.delete-work { border:0; background:#f8eaea; color:var(--danger); border-radius:9px; padding:9px 12px; cursor:pointer; font-weight:700; }
.work-list { display:grid; gap:14px; padding:18px; background:#f5f7fa; }
.work-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.work-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.work-number { font-weight:900; color:var(--primary-dark); }
.service-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 16px; background:#fafbfd; border-bottom:1px solid var(--line); }
.service-tab { border:1px solid var(--line); border-radius:11px; background:#fff; padding:11px 8px; cursor:pointer; font-weight:800; }
.service-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 16px rgba(23,105,170,.18); }
.work-body { padding:18px 16px; }
.fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:block; }.field-label { display:block; margin-bottom:7px; font-weight:800; font-size:14px; }
.input-wrap { display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(23,105,170,.10); }
.input-wrap input,.input-wrap select { min-width:0; width:100%; border:0; outline:0; padding:12px; background:transparent; }
.unit { color:var(--muted); font-size:13px; padding-right:12px; white-space:nowrap; }.hint { display:block; margin-top:6px; color:var(--muted); line-height:1.45; }
.checkbox-row { display:flex; align-items:center; gap:9px; margin-top:18px; font-weight:700; }.checkbox-row input { width:18px; height:18px; }
.imposition-fields { margin-top:16px; max-width:calc(50% - 8px); }.hidden { display:none!important; }
.rule-note { margin-top:18px; padding:13px 14px; border-radius:10px; background:#f7f9fb; color:var(--muted); font-size:13px; line-height:1.7; }
.work-result { display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:start; padding:16px; border-top:1px solid var(--line); background:#fbfdff; }
.work-total { padding:12px 14px; border-radius:11px; background:var(--soft); color:var(--primary-dark); font-weight:900; font-size:17px; }
.work-result-text { white-space:pre-wrap; line-height:1.75; color:#394756; font-size:14px; }
.add-work-area { padding:0 18px 18px; background:#f5f7fa; }
.add-work-button { width:100%; border:1px dashed var(--primary); color:var(--primary); background:#fff; border-radius:11px; padding:12px 14px; cursor:pointer; font-weight:900; }
.case-summary { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding:17px 20px; border-top:1px solid var(--line); font-weight:800; }
.case-summary strong { min-width:160px; text-align:center; padding:12px 16px; border-radius:11px; background:var(--primary-dark); color:#fff; font-size:20px; }
.design-row { display:grid; grid-template-columns:1fr 120px auto; gap:10px; margin-bottom:10px; }.design-row select,.design-row input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; }
.remove-row { border:0; background:#f8eaea; color:var(--danger); border-radius:10px; padding:0 12px; cursor:pointer; }.add-design-row { border:1px solid var(--primary); color:var(--primary); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:800; }
.add-case-area { margin-top:22px; }
.primary-button { border:0; border-radius:11px; background:var(--primary); color:#fff; padding:12px 18px; cursor:pointer; font-weight:800; }
.large-button { width:100%; padding:15px 20px; font-size:16px; }
.grand-total-card { margin-top:22px; padding:22px; }.grand-total-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.grand-total { font-size:30px; font-weight:900; color:var(--primary-dark); }.copy-button { border:1px solid var(--line); border-radius:9px; background:#fff; padding:9px 12px; cursor:pointer; font-weight:800; }.copy-button:disabled { opacity:.45; cursor:default; }
.all-results { margin-top:18px; }.summary-block { padding:15px 0; border-top:1px solid var(--line); line-height:1.75; }.summary-grand { margin-top:14px; padding:16px; border-radius:12px; background:var(--soft); color:var(--primary-dark); font-size:21px; font-weight:900; }.empty-result { color:var(--muted); }
@media (max-width:760px) { .service-tabs,.fields-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.work-result { grid-template-columns:1fr; }.imposition-fields { max-width:none; } }
@media (max-width:560px) { .app-shell { width:min(100% - 20px,1180px); padding-top:22px; }.hero,.case-header { display:block; }.version { display:inline-block; margin-top:14px; }.delete-case { width:100%; margin-top:14px; }.case-title-wrap { display:block; }.case-name { margin-top:10px; width:100%; }.service-tabs,.fields-grid { grid-template-columns:1fr 1fr; }.design-row { grid-template-columns:1fr 85px auto; }.grand-total-actions { align-items:flex-start; flex-direction:column; }.case-summary { justify-content:space-between; }.case-summary strong { min-width:130px; } }

/* Fixed total panel */
.app-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:22px; align-items:start; }
.main-column { min-width:0; }
.total-column { position:sticky; top:18px; }
.total-column .grand-total-card { margin-top:0; padding:20px; }
.total-heading { display:grid; gap:14px; }
.total-column .grand-total { font-size:34px; line-height:1; overflow-wrap:anywhere; }
.total-column .copy-button { width:100%; margin-top:16px; padding:11px 12px; }
.result-details { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.result-details summary { cursor:pointer; color:var(--primary-dark); font-weight:800; }
.total-column .all-results { max-height:50vh; overflow:auto; margin-top:12px; padding-right:4px; font-size:13px; }
.total-column .summary-block { padding:12px 0; }
.total-column .summary-grand { font-size:17px; padding:12px; }

@media (max-width:980px) {
  .app-layout { display:block; }
  .total-column { position:fixed; z-index:20; left:0; right:0; bottom:0; top:auto; padding:10px; pointer-events:none; }
  .total-column .grand-total-card { width:min(100%,720px); margin:0 auto; padding:13px 15px; border-radius:15px; box-shadow:0 -8px 28px rgba(23,45,68,.16); pointer-events:auto; }
  .total-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .total-heading h2 { font-size:15px; }
  .total-heading .eyebrow { display:none; }
  .total-column .grand-total { font-size:27px; white-space:nowrap; }
  .total-column .copy-button { width:auto; margin-top:9px; padding:7px 11px; }
  .result-details { margin-top:8px; padding-top:8px; }
  .result-details summary { font-size:13px; }
  .total-column .all-results { max-height:38vh; }
  .app-shell { padding-bottom:180px; }
}


/* Extended pricing fields */
.dtp-dynamic { min-width:0; }
.dtp-dynamic .field { height:100%; }
.data-count-wrap,.excel-count-wrap { margin-top:12px; }
.design-row-extended { grid-template-columns:minmax(210px,1.6fr) minmax(150px,1fr) minmax(150px,1fr) 90px auto; align-items:end; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.design-row-extended label { display:grid; gap:6px; min-width:0; font-size:13px; font-weight:800; }
.design-row-extended label span { color:var(--muted); }
.design-row-extended select,.design-row-extended input { min-width:0; }
.design-row-extended .remove-row { height:43px; }
@media (max-width:900px) {
  .design-row-extended { grid-template-columns:1fr 1fr; }
  .design-row-extended .remove-row { grid-column:1 / -1; height:auto; padding:10px; }
}
@media (max-width:560px) {
  .design-row-extended { grid-template-columns:1fr; }
}

/* Quick item buttons and layout corrections */
.quick-select { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.quick-select button { border:1px solid var(--primary); border-radius:999px; background:#fff; color:var(--primary-dark); padding:8px 14px; cursor:pointer; font-weight:800; }
.quick-select button:hover,.quick-select button:focus-visible { background:var(--soft); outline:none; }
.dtp-fields-grid { align-items:start; }
.dtp-dynamic { display:contents; }
.data-count-wrap,.excel-count-wrap { margin-top:0; min-width:0; }
.dtp-dynamic > .field,.dtp-dynamic > .data-count-wrap { min-width:0; }

/* Design rows: stable grid at all widths */
.design-row-extended { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.design-row-extended .remove-row { grid-column:1 / -1; height:auto; padding:10px 12px; }
@media (max-width:760px) {
  .design-row-extended { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .design-row-extended { grid-template-columns:1fr; }
  .quick-select { display:grid; grid-template-columns:1fr 1fr; }
  .quick-select button { border-radius:10px; }
}

/* Expanded top-level work buttons */
.service-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px) { .service-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px) { .service-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* v5 controls */
.option-grid { display:grid; gap:14px; margin-top:16px; }
.option-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.option-grid.three-col { grid-template-columns:repeat(3,minmax(0,1fr)); }
.option-with-count { min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:#fbfcfe; }
.option-with-count .checkbox-row { margin-top:0; }
.option-with-count .option-count { margin-top:12px; }
.fields-stack { display:grid; gap:12px; }
.design-extra-options { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.flyer-info-guide { grid-column:1 / -1; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.flyer-info-guide p { margin:0 0 10px; font-weight:800; color:var(--primary-dark); }
.flyer-info-guide img { display:block; width:100%; height:auto; border-radius:8px; }
.design-inline-note { grid-column:1 / -1; margin:0; color:var(--danger); font-size:13px; }
.design-global-note { margin-top:16px; padding:14px; border-radius:11px; background:#fff8f8; color:#5b3a3a; font-size:13px; line-height:1.7; }
.design-global-note p { margin:0 0 6px; }
.design-global-note p:last-child { margin-bottom:0; }
@media (max-width:760px) {
  .option-grid.three-col,.option-grid.two-col,.design-extra-options { grid-template-columns:1fr; }
}

/* v6: checkbox, label and count in one horizontal row */
.option-with-count {
  display:flex;
  align-items:center;
  gap:14px;
}
.option-with-count .checkbox-row {
  flex:1 1 auto;
  min-width:0;
}
.option-with-count .checkbox-row span {
  line-height:1.45;
}
.option-with-count .option-count {
  flex:0 0 150px;
  margin-top:0;
}
.option-with-count .option-count .field {
  margin:0;
}
.option-with-count .option-count .field-label:empty {
  display:none;
}
.option-with-count .option-count .input-wrap {
  margin-top:0;
}
@media (max-width:520px) {
  .option-with-count { align-items:flex-start; flex-wrap:wrap; }
  .option-with-count .option-count { flex:1 1 100%; padding-left:27px; }
}

/* v7: option items are stacked vertically; controls inside each item stay horizontal */
.option-grid,
.option-grid.two-col,
.option-grid.three-col,
.design-extra-options {
  grid-template-columns: 1fr;
}
.option-with-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.option-with-count .checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
.option-with-count .checkbox-row input {
  flex: 0 0 auto;
}
.option-with-count .checkbox-row span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.option-with-count .option-count {
  width: 150px;
  min-width: 150px;
  margin: 0;
}
.option-with-count .option-count .input-wrap {
  width: 100%;
}
@media (max-width: 520px) {
  .option-with-count {
    grid-template-columns: minmax(0, 1fr) 125px;
    gap: 10px;
  }
  .option-with-count .option-count {
    width: 125px;
    min-width: 125px;
    padding-left: 0;
  }
}

/* v9: unify all checkbox option layouts */
.option-grid,
.option-grid.two-col,
.option-grid.three-col,
.design-extra-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}
.option-with-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
}
.option-with-count .checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
.option-with-count .checkbox-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.option-with-count .checkbox-row span {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: keep-all;
}
.option-with-count .option-count {
  width: 150px;
  min-width: 150px;
  margin: 0;
}
.option-with-count .option-count .field,
.option-with-count .option-count .input-wrap {
  width: 100%;
  margin: 0;
}
.option-with-count .option-count .field-label:empty {
  display: none;
}
@media (max-width: 520px) {
  .option-with-count {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 8px;
    padding: 10px;
  }
  .option-with-count .option-count {
    width: 118px;
    min-width: 118px;
    padding-left: 0;
  }
}


/* Test estimate sharing panel */
.share-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.share-create-button,
.share-copy-button {
  width: 100%;
}
.share-details {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.share-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.share-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.share-field input,
.share-field select,
.share-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
}
.share-field input[readonly] {
  background: #f5f7fa;
  font-size: 12px;
}
.share-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.danger-button {
  border: 1px solid #d94b4b;
  border-radius: 10px;
  background: #fff;
  color: #b72f2f;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
}
.danger-button:hover { background: #fff3f3; }
.share-message {
  min-height: 1.4em;
  margin: 0;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}
.share-panel .hidden { display: none !important; }
@media (max-width: 900px) {
  .share-panel { margin-top: 12px; padding-top: 12px; }
  .share-field textarea { min-height: 80px; }
}


/* Thread comments */
.comment-thread {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}
.comment-thread-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}
.comment-count {
  color: var(--muted);
  font-size: 12px;
}
.comment-list {
  display: grid;
  gap: 9px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 3px;
}
.empty-comments {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.comment-item {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 10px 11px;
}
.comment-item.is-dc {
  border-left: 4px solid var(--primary);
}
.comment-item.is-store {
  border-left: 4px solid #55759d;
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.comment-author {
  font-size: 12px;
  font-weight: 900;
}
.comment-date {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.comment-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.55;
}
.comment-compose {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.comment-send-button {
  width: 100%;
}

/* Per-comment delete controls */
.comment-meta {
  align-items: flex-start;
}
.comment-meta-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.comment-delete-button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: #f8eaea;
  color: var(--danger);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.comment-delete-button:hover { background: #f2dada; }