/*
 * shared/workshop.css — 「工房」3D背景と、それを敷くヒーロー領域
 *
 * 前半（.workshop-bg 系）は Codex が生成した背景のスタイルをそのまま持ってきたもの。
 * 後半は、この事業のポータル／相談ページに合わせた置き場所の指定。
 *
 * 使うのは入口のページだけ。apps/ 配下の100本には入れない（憲法 原則1）。
 */

/* ---- ここから背景本体（生成物をそのまま使用） ---- */
    .workshop-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;background:#f2eee5}
    .workshop-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
    .workshop-bg .ws-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 20%,#fff9e7 0,transparent 47%),linear-gradient(115deg,#f6f3ec 20%,#e9e4d6 100%)}
    .workshop-bg .ws-fallback-room{position:absolute;right:5%;top:17%;width:53%;height:67%;transform:skewY(-3deg);border:1px solid #cabda54a;border-bottom:17px solid #c3ac8c;background:linear-gradient(112deg,#e5dccb,#eeeadf 65%);box-shadow:25px 28px 45px #71634815}
    .workshop-bg .ws-fallback-window{position:absolute;left:7%;top:13%;width:19%;height:38%;border:7px solid #dbccb3;background:linear-gradient(120deg,#fdf7d9,#d9e3d5);box-shadow:20px 20px 35px #fffbe38c}
    .workshop-bg .ws-fallback-window:after{content:"";position:absolute;left:48%;top:0;width:4px;height:100%;background:#dbccb3}
    .workshop-bg .ws-fallback-shelves{position:absolute;right:6%;top:10%;width:62%;height:60%;display:grid;grid-template-rows:repeat(5,1fr)}
    .workshop-bg .ws-fallback-row{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px;align-items:end;border-bottom:5px solid #bc9c74;box-shadow:0 5px 7px #8d74531c}
    .workshop-bg .ws-fallback-tool{display:block;height:45%;margin:0 0 1px;background:var(--tool-color);border-radius:3px 3px 1px 1px;box-shadow:2px 1px 0 #624b3f21}
    .workshop-bg .ws-fallback-bench{position:absolute;left:29%;bottom:9%;width:58%;height:8%;background:#b99a70;box-shadow:0 5px 0 #a18461}
    .workshop-bg .ws-fallback-bench:before,.workshop-bg .ws-fallback-bench:after{content:"";position:absolute;top:100%;width:6%;height:90px;background:#b79b78}
    .workshop-bg .ws-fallback-bench:before{left:8%}.workshop-bg .ws-fallback-bench:after{right:8%}
    .workshop-bg:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#f7f5ee 0%,#f7f5eef5 24%,#f7f5ee9c 39%,#f7f5ee00 58%),linear-gradient(0deg,#f7f5ee 0%,#f7f5ee00 13%);pointer-events:none}
    @media(max-width:700px){.workshop-bg:after{background:linear-gradient(180deg,#f7f5ee 0%,#f7f5eeed 29%,#f7f5ee00 53%,#f7f5ee00 86%,#f7f5ee 100%)}.workshop-bg .ws-fallback-room{top:61%;right:4%;width:86%;height:26%}.workshop-bg .ws-fallback-bench:before,.workshop-bg .ws-fallback-bench:after{height:35px}}
/* ---- ここまで背景本体 ---- */


/* 工房を置くページでは、body の720pxの段をやめて全幅にする。
   内側の .ta-shell が本文の幅を持つ。100vw を使うやり方もあるが、
   100vw は縦スクロールバーの幅を含むので、必ず横に15pxほどはみ出す。 */
body.ta-has-workshop { max-width: none; padding: 0; }

body.ta-has-workshop .ta-shell,
body.ta-has-workshop .ta-footer {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 16px;
}

body.ta-has-workshop .ta-shell { padding-bottom: 16px; }

/* 工房を置くヒーロー領域。親に position:relative と高さが要る（移植の条件）。 */
.ta-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 460px;
  margin: 0 0 20px;
  background: #f7f5ee;
}

.ta-hero .workshop-bg { z-index: -1; }

.ta-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin-inline: auto;
  padding: 56px 24px 30px;
}

.ta-hero-copy > * { max-width: 520px; }

.ta-hero-copy h1 { font-size: 1.7rem; line-height: 1.5; margin: 0 0 10px; }
.ta-hero-copy .ta-lead { margin: 0; color: #656b61; }

/* 「棚に、いま6個の道具。」——公開本数がそのまま絵の中の数になっていることを、
   文字でも言っておく。言わないと、ただの背景として流されてしまう。 */
.ta-shelf-note {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  font-size: .8rem;
  letter-spacing: .06em;
  color: #6c705f;
}

.ta-visits[hidden] { display: none; }
.ta-visits { line-height: 1.9; }

.ta-shelf-note strong {
  font-size: 1.15rem;
  font-weight: 400;
  font-family: Georgia, serif;
}

/* 中くらいの幅では、本文が部屋の手前まで伸びて重なりやすい。先に折り返させる。 */
@media (max-width: 1100px) {
  .ta-hero-copy > * { max-width: 420px; }
  .ta-hero-copy { padding: 40px 20px 26px; }
}

@media (max-width: 700px) {
  .ta-hero { min-height: 540px; }
  .ta-hero-copy { padding: 26px 18px 18px; }
  .ta-hero-copy > * { max-width: none; }
  .ta-hero-copy h1 { font-size: 1.45rem; }
  .ta-shelf-note { right: 16px; bottom: 12px; }
}

/* 原則3: 紙で終われるようにする。印刷に工房は持ち込まない。 */
@media print {
  .workshop-bg { display: none !important; }
  .ta-hero { min-height: 0; background: none; overflow: visible; margin: 0; }
  .ta-hero-copy { padding: 0; max-width: none; }
  .ta-shelf-note { position: static; }
}

/* ---- 棚の道具を、アプリへの扉にする（shared/workshop-doors.js） ---- */

.ws-doors {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ws-door {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.ws-door > a {
  display: block;
  width: 30px;
  height: 34px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}

.ws-door > a:hover,
.ws-door > a:focus-visible {
  background: rgba(255, 255, 255, .28);
  transform: translateY(-5px);
}

.ws-door .ws-door-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  white-space: nowrap;
  background: rgba(31, 41, 51, .9);
  color: #fff;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.ws-door > a:hover .ws-door-label,
.ws-door > a:focus-visible .ws-door-label { opacity: 1; }

/* 動きを嫌う設定では、持ち上げない。名前だけ出す。 */
@media (prefers-reduced-motion: reduce) {
  .ws-door > a { transition: none; }
  .ws-door > a:hover, .ws-door > a:focus-visible { transform: none; }
  .ws-door .ws-door-label { transition: none; }
}

/* 狭い画面では道具が小さくなりすぎて、押し間違える。扉は出さない。 */
@media (max-width: 700px) {
  .ws-doors { display: none; }
}

@media print {
  .ws-doors { display: none !important; }
}