:root { --paper: #f5f0e7; --ink: #302d29; --dim: #726a60; }
body { background: #e8e4dc; color: var(--ink); font-family: "Yu Mincho", "游明朝", serif; }
.sec_preview {
  .wrap { padding: 28px 24px 40px; width: 100%; display: flex; justify-content: center; }
  .sub { width: 100%; max-width: 460px; }
  .label { margin-bottom: 8px; color: var(--dim); font-size: 13px; line-height: 1.5em; letter-spacing: 0.16em; }
  h1 { margin-bottom: 8px; font-size: 28px; font-weight: 500; line-height: 1.5em; }
  select { margin: 8px 0 14px; padding: 10px 8px; width: 100%; display: block; background: var(--paper); color: var(--ink); font-family: "Yu Gothic", sans-serif; font-size: 13px; line-height: 1.5em; border: 1px solid #baa99a; border-radius: 4px; }
  .note { margin-bottom: 16px; color: var(--dim); font-size: 13px; line-height: 1.8em; }
  .frame { margin: 0 auto 18px; width: 100%; max-width: 390px; aspect-ratio: 9 / 16; display: grid; background: var(--paper); box-shadow: 0 12px 38px #302d291a; overflow: hidden; }
  iframe { border: 0; transform: scale(var(--scale, 0.361111)); transform-origin: left top; }
  .controls { display: flex; gap: 10px; }
  .nav { margin-bottom: 10px; display: flex; gap: 10px; .btn_ptn_1 { padding: 8px 12px; font-size: 12px; &:disabled { opacity: 0.4; cursor: default; } } }
  .status { margin-top: 12px; display: flex; justify-content: space-between; color: var(--dim); font-family: "Yu Gothic", sans-serif; font-size: 12px; line-height: 1.5em; }
  input[type="range"] { margin: 10px 0; width: 100%; accent-color: #8b4837; }
  .credit { margin-bottom: 10px; color: var(--dim); font-size: 12px; line-height: 1.5em; }
  .message { min-height: 20px; color: #874434; font-size: 12px; line-height: 1.5em; }
  .next { margin-bottom: 14px; padding: 10px 14px; display: block; color: #765444; font-family: "Yu Gothic", sans-serif; font-size: 14px; line-height: 1.5em; border: 1px solid #765444; border-radius: 4px; text-align: center; &[hidden] { display: none; } }
  .links { display: flex; gap: 20px; color: #684c3f; font-size: 12px; line-height: 1.8em; text-decoration: underline; }
  @media (max-width: 500px) { .wrap { padding: 20px 16px 30px; } }
}
.btn_ptn_1 { padding: 12px 16px; flex: 1; background: #765444; color: #fff; font-family: "Yu Gothic", sans-serif; font-size: 14px; line-height: 1.5em; border: 1px solid #765444; border-radius: 4px; cursor: pointer; &.type_sub { background: transparent; color: #765444; } &:focus-visible { outline: 2px solid #765444; outline-offset: 3px; } &:disabled { opacity: 0.6; cursor: wait; } }