#vchart.vertical{position:relative!important}
.vertical-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:8px}
.vertical-tools button{padding:8px 10px;font-size:12px}
.vertical-tools .danger{background:#8f3540}
.rich-note{width:100%;height:100%;min-height:24px;padding:2px;outline:0;overflow:auto;font:9pt/1.35 Arial,"Apple SD Gothic Neo",sans-serif;white-space:pre-wrap}
.rich-note:focus{background:#fffde9}
.manual-observation .rich-note{font-size:9pt;line-height:1.5;padding:8px}
.manual-summary-center .rich-note{font-size:9pt;line-height:1.3;padding:1px}
#verticalArrowLayer{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;overflow:visible}
#verticalArrowLayer .arrow-line{stroke:#d7552d;stroke-width:1.5;fill:none;pointer-events:stroke;cursor:pointer}
#verticalArrowLayer .arrow-start{fill:#fff;stroke:#d7552d;stroke-width:1.5;pointer-events:all;cursor:move}
#verticalArrowLayer .arrow-end-handle{fill:transparent;stroke:none;pointer-events:all;cursor:move}
#verticalArrowLayer .selected .arrow-line{stroke:#157a91;stroke-width:2}
#verticalArrowLayer .selected .arrow-start{stroke:#157a91}
.manual-box.active{box-shadow:none!important}
.export-panel{margin-top:22px;padding:18px;background:#fff;border:1px solid #ccd5d8;border-radius:6px;max-width:820px}
.export-panel h3{margin:0 0 12px;color:#073f55}
.export-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.export-row label{display:flex;gap:5px;align-items:center}
.export-row input[type=email]{min-width:300px;padding:9px;border:1px solid #bac5c8;border-radius:4px}
.export-status{min-height:20px;color:#347b4c;font-size:13px}
.save-groups{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px;margin-top:18px}.save-card{background:#fff;border:1px solid #ccd5d8;border-radius:6px;padding:18px}.save-card h3{margin:0 0 14px;color:#073f55}.save-card .actions{margin:0}.save-card.email-card{grid-column:1/-1}.format-label{font-weight:700;margin-right:3px}
#vchart .manual-box-head,#vchart .manual-box-head strong{font-size:12px!important}
@media(max-width:850px){.save-groups{grid-template-columns:1fr}.save-card.email-card{grid-column:auto}}
@media print{#verticalArrowLayer .arrow-start,#verticalArrowLayer .arrow-end-handle{display:none!important}}

/* Chart geometry: 8 cm wide; height is verse count x 5 mm, capped at 22 cm. */
#vertical #vchart.vertical{
  width:210mm!important;
  height:297mm!important;
  min-width:210mm!important;
  min-height:297mm!important;
  max-width:210mm!important;
  max-height:297mm!important;
  box-sizing:border-box!important;
  padding-left:7mm!important;
  padding-right:7mm!important;
}
#vertical #vchart .manual-labels,
#vertical #vchart .manual-workarea,
#vertical #vchart .manual-summary{
  grid-template-columns:1fr 80mm 1fr!important;
}
#vertical #vchart .manual-workarea{
  width:100%!important;
  height:var(--chart-h)!important;
  min-height:0!important;
  max-height:220mm!important;
  flex:0 0 var(--chart-h)!important;
}
#vertical #vchart .manual-chart{
  grid-column:2!important;
  width:80mm!important;
  height:var(--chart-h)!important;
  min-height:0!important;
  max-height:220mm!important;
}
#vertical #vchart .manual-observation{
  height:calc(277mm - 8.2mm)!important;
  min-height:0!important;
  max-height:calc(277mm - 8.2mm)!important;
}
#vertical #vchart .manual-box{
  flex-grow:var(--n)!important;
  flex-shrink:1!important;
  flex-basis:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}
#vertical #vchart .manual-summary{
  grid-template-columns:1fr 80mm 1fr!important;
}
@media print{
  #vertical #vchart.vertical{width:210mm!important;height:297mm!important;min-width:210mm!important;min-height:297mm!important;max-width:210mm!important;max-height:297mm!important}
  #vertical #vchart .manual-workarea,#vertical #vchart .manual-chart{height:var(--chart-h)!important;min-height:0!important;max-height:220mm!important}
  #vertical #vchart .manual-labels,#vertical #vchart .manual-workarea,#vertical #vchart .manual-summary{grid-template-columns:1fr 80mm 1fr!important}
}

/* Only the center chart uses solid rules. */
#vertical #vchart .manual-head{border-bottom:0!important}
#vertical #vchart .manual-summary-center{border:0!important}
#vertical #vchart .manual-observation,
#vertical #vchart .manual-observation textarea,
#vertical #vchart .manual-observation .rich-note{border:0!important;box-shadow:none!important}
#vertical #vchart .manual-box-end{display:none!important}

/* Selection must not change the printable white chart background. */
#vertical #vchart .manual-box,
#vertical #vchart .manual-box:hover,
#vertical #vchart .manual-box.active,
#vertical #vchart .manual-box:focus-within,
#vertical #vchart .rich-note,
#vertical #vchart .rich-note:focus{background:#fff!important}
#vertical #vchart .manual-box .rich-note{padding:1px!important}

/* Keep the segment title on the exact page center, independent of side labels. */
#vertical #vchart .manual-head{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
#vertical #vchart .manual-head>strong{
  position:absolute!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  max-width:80mm!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/*
 * Keep both free-observation columns identical.  The only spacing is the
 * gutter next to the centre chart, so the outside edges can use the complete
 * printable width of the A4 sheet.
 */
#vertical #vchart .manual-workarea,
#vertical #vchart .manual-summary{
  grid-template-columns:58mm 80mm 58mm!important;
  width:196mm!important;
  min-width:196mm!important;
  max-width:196mm!important;
}
#vertical #vchart .manual-observation{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  padding:0!important;
  position:relative!important;
  overflow:hidden!important;
}
#vertical #vchart .manual-observation-left{
  padding:0!important;
}
#vertical #vchart .manual-observation .rich-note,
#vertical #vchart .manual-observation textarea{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:2mm!important;
  right:0!important;
  box-sizing:border-box!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
  text-indent:0!important;
  overflow:hidden!important;
}
#vertical #vchart .manual-observation-left .rich-note,
#vertical #vchart .manual-observation-left textarea{
  left:0!important;
  right:2mm!important;
}
#vertical #vchart .manual-observation .rich-note>*,
#vertical #vchart .manual-observation textarea>*{
  margin-left:0!important;
  margin-right:0!important;
  text-indent:0!important;
}
@media print{
  #vertical #vchart .manual-workarea,
  #vertical #vchart .manual-summary{
    grid-template-columns:58mm 80mm 58mm!important;
    width:196mm!important;
    min-width:196mm!important;
    max-width:196mm!important;
  }
}

/* Horizontal chart metadata: Book, title and Key Verse are stacked. */
#horizontal #hchart .chart-head{
  display:grid!important;
  grid-template-columns:110px minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  align-content:center!important;
  justify-content:center!important;
  text-align:left!important;
  padding:10px 28px!important;
}
#horizontal #hchart .chart-head .bookname,
#horizontal #hchart .chart-head .title,
#horizontal #hchart .chart-head .key{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  padding:3px 6px!important;
  font-size:18px!important;
  line-height:1.25!important;
  text-align:left!important;
  font-weight:500!important;
  pointer-events:auto!important;
}
#horizontal #hchart .chart-head .bookname::before{content:'Book:';font-weight:700}
#horizontal #hchart .chart-head .title::before{content:'Title:';font-weight:700}
#horizontal #hchart .chart-head .key::before{content:'Key Verse:';font-weight:700}
#horizontal #hchart .chart-head .bookname,
#horizontal #hchart .chart-head .title,
#horizontal #hchart .chart-head .key{grid-column:1/-1!important;display:grid!important;grid-template-columns:110px minmax(0,1fr)!important}
#horizontal #hchart .chart-head .key{z-index:auto!important}
#horizontal #hchart .bands{display:grid!important;position:relative!important;border-bottom:1px solid #333!important}
#horizontal #hchart .bands .band{min-width:0!important;font-size:17px!important}
#horizontal #hchart .bands.structure-only{grid-row:2/4!important;height:auto!important}
#horizontal #hchart .horizontal-tier{display:grid;grid-template-columns:subgrid;grid-column:1/-1;min-height:0}
#horizontal #hchart .horizontal-tier+.horizontal-tier{border-top:1px solid #333}
#horizontal #hchart .horizontal-tier .band{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;overflow:hidden!important;padding:8px!important}
#horizontal #hchart .horizontal-tier .band{border-right:0!important}
#horizontal #hchart .horizontal-tier .band+.band{border-left:1px solid #333!important}
#horizontal #hchart .tier-resize-handle{position:absolute;left:0;right:0;height:12px;transform:translateY(-6px);z-index:9;cursor:ns-resize;grid-column:1/-1}
#horizontal #hchart .tier-resize-handle:after{content:'';position:absolute;left:0;right:0;top:5px;border-top:1px solid transparent}
#horizontal #hchart .tier-resize-handle:hover:after{border-top-color:#39766b;box-shadow:0 0 0 1px #fff}
#horizontal #hchart .paragraphs{display:grid!important}
#horizontal #hchart .paragraphs[hidden]{display:none!important}
#horizontal #hchart .paragraphs .para{min-width:0!important;flex:none!important;width:auto!important;border-left:0!important;border-right:0!important}
#horizontal #hchart .paragraphs .para+.para{border-left:1px solid #333!important}
#horizontal #hchart .paragraphs .para-title{top:50%!important;bottom:auto!important;left:50%!important;transform:translate(-50%,-50%) rotate(-90deg)!important;transform-origin:center!important;font-size:12px!important;line-height:1.08!important;max-width:none!important}
#horizontal #hchart .paragraphs .para-ref{left:50%!important;bottom:10px!important;writing-mode:vertical-rl!important;text-orientation:mixed!important;transform:translateX(-50%) rotate(180deg)!important;transform-origin:center!important;max-height:calc(100% - 18px)!important;overflow:visible!important;font-size:10px!important;line-height:1!important}

/* 2026 clean interface refresh. Print chart geometry remains unchanged. */
:root{
  --ui-ink:#24312f;
  --ui-muted:#697774;
  --ui-accent:#39766b;
  --ui-accent-soft:#e7f0ed;
  --ui-border:#d8e0dd;
  --ui-surface:#ffffff;
  --ui-canvas:#f4f6f5;
}
body{
  background:var(--ui-canvas)!important;
  color:var(--ui-ink)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif!important;
}
header{
  background:rgba(255,255,255,.96)!important;
  color:var(--ui-ink)!important;
  border-bottom:1px solid var(--ui-border)!important;
  box-shadow:0 1px 8px rgba(30,50,45,.05)!important;
  padding:12px 22px 12px 14px!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
}
header h1{font-size:18px!important;font-weight:750!important;letter-spacing:-.2px!important;color:#1f3934!important}
header nav{gap:4px!important;align-items:center!important}
header nav button{
  color:#56635f!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  padding:8px 11px!important;
  font-size:13px!important;
  font-weight:650!important;
}
header nav button:hover{background:#f0f4f2!important;color:var(--ui-ink)!important}
header nav button.active{background:var(--ui-accent-soft)!important;color:#23584f!important;border-color:#cfe0da!important}
.page{max-width:1680px!important;margin:22px auto!important;padding:0 22px!important}
.intro{color:var(--ui-muted)!important;font-size:13px!important;line-height:1.55!important}
.panel,.save-card,.export-panel{
  background:var(--ui-surface)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:10px!important;
  box-shadow:0 4px 18px rgba(32,52,47,.045)!important;
}
.panel{padding:16px!important}
.panel h2{
  margin:-16px -16px 14px!important;
  padding:13px 16px!important;
  background:#edf2f0!important;
  color:#2d4d47!important;
  border-bottom:1px solid var(--ui-border)!important;
  border-radius:10px 10px 0 0!important;
  font-size:18px!important;
  font-weight:720!important;
}
.books{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:9px!important}
.book{
  height:62px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:8px!important;
  font-size:14px!important;
  color:#30423e!important;
  box-shadow:0 1px 2px rgba(20,45,38,.025)!important;
}
.book:hover{border-color:#8eb2a9!important;background:#f8fbfa!important}
.book.done:after{background:var(--ui-accent)!important;font-size:9px!important;padding:3px 6px!important}
.book.editing:after{content:'작성 중';position:absolute;right:8px;bottom:8px;background:#8a735f;color:#fff;font-size:9px;padding:3px 6px;border-radius:10px;font-weight:650}
.actions button,.tag{
  background:var(--ui-accent)!important;
  color:white!important;
  border:1px solid var(--ui-accent)!important;
  border-radius:7px!important;
  padding:8px 11px!important;
  font-size:12px!important;
  font-weight:650!important;
  box-shadow:none!important;
}
.actions button:hover,.tag:hover{filter:brightness(.94)}
.tag.sec{background:#5f788d!important;border-color:#5f788d!important}
.tag.div{background:#876c55!important;border-color:#876c55!important}
.actions .print{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
.row input,.structure input,.meta input,.export-row input[type=email]{
  border:1px solid var(--ui-border)!important;
  border-radius:7px!important;
  background:#fff!important;
  color:var(--ui-ink)!important;
}
.row input:focus,.structure input:focus,.meta input:focus,.export-row input[type=email]:focus{outline:2px solid #c8ddd7!important;border-color:#7fa99f!important}
.meta{grid-template-columns:minmax(240px,1fr) minmax(150px,.48fr) minmax(430px,1.8fr)!important;gap:10px!important}
.chart-guide{margin:0 0 10px!important;padding:7px 2px!important}
.save-groups{gap:12px!important}.save-card{padding:16px!important}.save-card h3{color:#2d4d47!important;font-size:16px!important}
.reset-card .reset-help{margin:0 0 10px;color:var(--ui-muted);font-size:12px;line-height:1.45}
.reset-card .actions .danger{background:#fff!important;color:#a23e3e!important;border-color:#d9a7a7!important}
.reset-card .actions .danger:hover{background:#fff3f3!important;filter:none!important}
#vertical .vertical-wrap{align-items:start!important}
#vertical .vertical-wrap>aside.panel{padding:0 14px 14px!important;overflow:hidden!important}
#vertical .vertical-wrap>aside.panel h2{margin:0 -14px 14px!important;padding:13px 14px!important;border-radius:0!important;min-height:48px!important;display:flex!important;align-items:center!important}
#vertical #bible.bible{padding:0 14px 14px!important;background:#fff!important;border:1px solid var(--ui-border)!important;border-radius:10px!important;overflow:auto!important}
#vertical #bible .bible-head{margin:0 -14px 14px!important;min-height:48px!important;padding:13px 14px!important;display:flex!important;align-items:center!important;background:#edf2f0!important;color:#2d4d47!important;border-bottom:1px solid var(--ui-border)!important}
@media(max-width:850px){header{align-items:flex-start!important;gap:10px!important}header nav{justify-content:flex-end!important}.meta{grid-template-columns:1fr!important}.books{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media print{header{display:none!important}}