/* 보드 질감 사진은 WebP(2026-10-04: 2.4MB·2.7MB PNG → 0.28MB·0.34MB, q88). 원본 PNG 는 image/ 에 보존. */
/* The same photographic materials serve the board and both settings previews. */
html[data-oc-board-style="texture"] { --oc-board-color:#008563; }
html[data-oc-board-style="texture"] #board,
.oc-board-style-preview[data-style="texture"] .oc-board-style-preview__surface,
.oc-disc-material-preview {
  background-color:var(--oc-board-color,#008563);
  background-image:linear-gradient(rgba(3,132,99,.65),rgba(3,132,99,.65)),linear-gradient(rgb(3,26,17),rgb(3,26,17)),url('/flipsight/image/board-velvet-photo-v4.webp');
  background-size:auto,auto,640px 640px;
  /* Keep the mean green tone; soften velvet contrast to 35 percent. */
  background-blend-mode:normal,screen,luminosity;
}
html[data-oc-board-style="texture"] #frame {
  --oc-material-rail:14px;
  --oc-material-length:calc(var(--board) + 28px);
  border-color:#feedc2;
  box-shadow:inset 0 0 0 1px #14362b,0 0 0 1px #d4bc91,0 4px 8px rgba(0,0,0,.22);
}
html[data-oc-board-style="texture"] .oc-frame-wood,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood {
  overflow:hidden;
  background-color:#feedc2;
  background-image:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.40)),url('/flipsight/image/board-maple-photo-v2.webp');
  background-size:auto,440px 440px;
}
html[data-oc-board-style="texture"] .oc-frame-wood::after,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 16%,transparent 78%,rgba(75,39,13,.45));
  box-shadow:inset 0 1px rgba(255,255,255,.45),inset 0 -1px rgba(81,45,18,.42);
}
html[data-oc-board-style="texture"] .oc-frame-wood-top,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-top {
  clip-path:polygon(0 0,100% 0,calc(100% - var(--oc-material-rail)) 100%,var(--oc-material-rail) 100%);
}
html[data-oc-board-style="texture"] .oc-frame-wood-bottom,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-bottom {
  clip-path:polygon(var(--oc-material-rail) 0,calc(100% - var(--oc-material-rail)) 0,100% 100%,0 100%);
  background-position:0 0,0 -110px;
}
html[data-oc-board-style="texture"] .oc-frame-wood-bottom::after,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-bottom::after { transform:rotate(180deg); }
html[data-oc-board-style="texture"] .oc-frame-wood-left,
html[data-oc-board-style="texture"] .oc-frame-wood-right,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-left,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-right {
  top:calc(-1 * var(--oc-material-rail));bottom:calc(-1 * var(--oc-material-rail));background-image:none;
}
html[data-oc-board-style="texture"] .oc-frame-wood-left::before,
html[data-oc-board-style="texture"] .oc-frame-wood-right::before,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-left::before,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-right::before {
  content:"";position:absolute;left:var(--oc-material-rail);top:0;
  width:var(--oc-material-length);height:var(--oc-material-rail);
  transform-origin:0 0;transform:rotate(90deg);
  background-color:#feedc2;
  background-image:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.40)),url('/flipsight/image/board-maple-photo-v2.webp');
  background-position:0 0,0 -220px;
  background-size:auto,440px 440px;
}
html[data-oc-board-style="texture"] .oc-frame-wood-left,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-left { clip-path:polygon(0 0,100% var(--oc-material-rail),100% calc(100% - var(--oc-material-rail)),0 100%); }
html[data-oc-board-style="texture"] .oc-frame-wood-right,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-right { clip-path:polygon(0 var(--oc-material-rail),100% 0,100% 100%,0 calc(100% - var(--oc-material-rail))); }
html[data-oc-board-style="texture"] .oc-frame-wood-left::after,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-left::after { background:linear-gradient(90deg,rgba(255,255,255,.32),transparent 20%,transparent 76%,rgba(75,39,13,.45));box-shadow:inset 1px 0 rgba(255,255,255,.45),inset -1px 0 rgba(81,45,18,.42); }
html[data-oc-board-style="texture"] .oc-frame-wood-right::after,
.oc-board-style-preview[data-style="texture"] .oc-frame-wood-right::after { background:linear-gradient(270deg,rgba(255,255,255,.32),transparent 20%,transparent 76%,rgba(75,39,13,.45));box-shadow:inset -1px 0 rgba(255,255,255,.45),inset 1px 0 rgba(81,45,18,.42); }
.oc-board-style-preview {
  --oc-material-rail:10px;--oc-material-length:360px;
  position:relative;box-sizing:border-box;border:10px solid #feedc2;width:100%;max-width:360px;aspect-ratio:2/1;margin:0 auto 10px;background:#008563;
}
.oc-board-style-preview[data-style="texture"] { border-color:#feedc2;box-shadow:0 0 0 1px #d4bc91,0 3px 6px rgba(0,0,0,.15); }
.oc-board-style-preview__surface { position:absolute;inset:0;background:#008563;box-shadow:inset 0 0 0 1px #163b30; }
.oc-board-style-preview__surface::after,
.oc-disc-material-preview::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  /* Match disc-style-flat.svg: centered strokes, 1.2 per 240, black at .55. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' preserveAspectRatio='none'%3E%3Cg stroke='%23000' stroke-opacity='.55' stroke-width='1.2'%3E%3Cpath d='M60 0V120M120 0V120M180 0V120M0 60H240'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
.oc-board-style-preview .oc-frame-wood { display:none;position:absolute;pointer-events:none; }
.oc-board-style-preview[data-style="texture"] .oc-frame-wood { display:block; }
.oc-board-style-preview .oc-frame-wood-top { left:-10px;right:-10px;top:-10px;height:10px; }
.oc-board-style-preview .oc-frame-wood-bottom { left:-10px;right:-10px;bottom:-10px;height:10px; }
.oc-board-style-preview .oc-frame-wood-left { left:-10px;width:10px; }
.oc-board-style-preview .oc-frame-wood-right { right:-10px;width:10px; }
/* The flat board still has the viewer's pale repeating wood grain. */
.oc-board-style-preview[data-style="flat"] .oc-frame-wood {
  display:block;
  background:repeating-linear-gradient(0deg,#feedc2 0px,#feedc2 1.5px,#eedeb6 2.5px,#feedc2 4.5px,#eedeb6 5px,#feedc2 7px,#eedeb6 8.5px);
  clip-path:none;
}
.oc-board-style-preview[data-style="flat"] .oc-frame-wood-left,
.oc-board-style-preview[data-style="flat"] .oc-frame-wood-right { top:0;bottom:0; }
.oc-board-style-preview[data-style="flat"] .oc-frame-wood::before,
.oc-board-style-preview[data-style="flat"] .oc-frame-wood::after { content:none;display:none; }
/* Keep the SVG and photo previews centered in both settings screens. */
[data-disc-style-preview] { margin:0 auto; }
.oc-disc-material-preview { position:relative;width:100%;max-width:360px;aspect-ratio:2/1;margin:0 auto;border-radius:8px;overflow:hidden; }
.oc-disc-material-preview canvas { position:absolute;inset:0;width:100%;height:100%;z-index:1; }
[data-disc-material-preview][hidden],[data-disc-style-preview][hidden] { display:none !important; }

/* Historical wood rules from the pre-color-rollback version. Applied only
   to the export clone before its materials are baked. */
html[data-oc-board-style="texture"] #frame.ocv-save-capture-frame {
  --oc-material-rail:14px;
  --oc-material-length:calc(var(--board) + 28px);
  border-color:#feedc2;
  /* The board owns its black perimeter. Do not draw a second inner outline. */
  box-shadow:0 0 0 1px #d4bc91,0 4px 8px rgba(0,0,0,.22);
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood {
  overflow:hidden;
  background-color:#feedc2;
  /* Keep a pale frame while letting more of the original wood grain show. */
  background-image:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.40)),url('/flipsight/image/board-maple-photo-v2.webp');
  background-size:auto,440px 440px;
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood::after {
  content:"";position:absolute;inset:0;
  /* Soft bevel lighting only: scaled one-pixel strokes look like misplaced
     bright/dark seams along the photographic rails on desktop. */
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 20%,transparent 72%,rgba(134,111,65,.18));
  box-shadow:none;
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-top {
  clip-path:polygon(0 0,100% 0,calc(100% - var(--oc-material-rail)) 100%,var(--oc-material-rail) 100%);
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-bottom {
  clip-path:polygon(var(--oc-material-rail) 0,calc(100% - var(--oc-material-rail)) 0,100% 100%,0 100%);
  background-position:0 0,0 -110px;
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-bottom::after { transform:rotate(180deg); }
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-left,
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-right {
  top:calc(-1 * var(--oc-material-rail));bottom:calc(-1 * var(--oc-material-rail));background-image:none;
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-left::before,
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-right::before {
  content:"";position:absolute;left:var(--oc-material-rail);top:0;
  width:var(--oc-material-length);height:var(--oc-material-rail);
  transform-origin:0 0;transform:rotate(90deg);
  background-color:#feedc2;
  background-image:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.40)),url('/flipsight/image/board-maple-photo-v2.webp');
  background-position:0 0,0 -220px;
  background-size:auto,440px 440px;
}
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-left { clip-path:polygon(0 0,100% var(--oc-material-rail),100% calc(100% - var(--oc-material-rail)),0 100%); }
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-right { clip-path:polygon(0 var(--oc-material-rail),100% 0,100% 100%,0 calc(100% - var(--oc-material-rail))); }
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-left::after { background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 20%,transparent 72%,rgba(134,111,65,.18)); }
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-right::after { background:linear-gradient(270deg,rgba(255,255,255,.16),transparent 20%,transparent 72%,rgba(134,111,65,.18)); }
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-left::after,
html[data-oc-board-style="texture"] .ocv-save-capture-frame .oc-frame-wood-right::after {
  top:var(--oc-material-rail);bottom:var(--oc-material-rail);
}