/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #f4f2ec;
  color: #111;

  font-family:
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
}

a {
  color: inherit;
}


/* ==========================================
   MASTER CONTENT WIDTH

   HERO / CREATOR / ABOUT を完全に同じ基準にする
========================================== */

.hero-inner,
.creator-main,
.about-section {
  width: calc(100% - 44px);
  max-width: 1400px;

  margin-left: auto;
  margin-right: auto;
}


/* ==========================================
   HEADER
========================================== */

.site-header {
  width: 100%;

  padding: 0 18px;

  border-bottom: 1px solid #111;
}

.header-inner {
  width: 100%;
  min-height: 58px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.brand-logo {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #111;

  text-decoration: none;

  font-size: 15px;
  font-weight: 900;

  letter-spacing: 0.08em;
}

.studio-box {
  display: inline-block;

  padding: 4px 6px;

  background: #111;

  color: #fff;
}

.language-toggle {
  display: flex;
}

.language-button {
  min-width: 54px;

  padding: 8px 12px;

  border: 1px solid #111;

  background: transparent;

  color: #111;

  font-size: 12px;
  font-weight: 900;
}

.language-button + .language-button {
  border-left: 0;
}

.language-button.active {
  background: #111;

  color: #fff;
}


/* ==========================================
   HERO
========================================== */

.hero {
  width: 100%;

  padding-top: 50px;
  padding-bottom: 58px;
}

/*
  重要：
  hero-innerには個別のwidth / margin / padding-leftを
  一切指定しない。

  MASTER CONTENT WIDTH と同じ左端をそのまま使用。
*/

.hero-kicker {
  display: flex;

  align-items: center;

  gap: 12px;

  margin: 0 0 28px;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.18em;
}

.hero-kicker-mark {
  display: block;

  flex: 0 0 auto;

  width: 34px;
  height: 14px;

  background: #ff655c;
}

.hero-title {
  max-width: 1100px;

  margin: 0;

  font-size: clamp(
    42px,
    5.4vw,
    78px
  );

  font-weight: 900;

  line-height: 1.02;

  letter-spacing: -0.045em;
}

.hero-line {
  display: block;
}

.hero-line-accent {
  position: relative;

  display: inline-block;

  padding-bottom: 4px;
}

.hero-line-accent::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 8px;

  background: #c7ff00;

  z-index: -1;
}

.hero-description {
  max-width: 790px;

  margin: 28px 0 0;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.9;
}


/* ==========================================
   HERO COMMUNITY
========================================== */

.hero-community {
  display: inline-flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  margin-top: 22px;
}

.hero-community-button {
  min-height: 48px;

  padding: 11px 22px;

  border: 1px solid #111;

  background: transparent;

  color: #111;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.05em;
}

.hero-community-button:hover {
  background: #111;
  color: #fff;
}

.hero-community-tag {
  color: #666;

  font-size: 9px;
  font-weight: 900;
}


/* ==========================================
   CREATOR
========================================== */

.creator-main {
  padding-bottom: 72px;
}

/*
  creator-main 自体の左端が
  hero-inner と完全に同じ。
*/

.creator-layout {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(300px, 380px)
    minmax(0, 1fr);

  grid-template-areas:
    "top preview"
    "main preview";

  column-gap: 45px;
  row-gap: 24px;

  align-items: start;
}

.top-controls {
  grid-area: top;
}

.main-controls {
  grid-area: main;
}

.preview-area {
  grid-area: preview;

  position: sticky;

  top: 20px;

  align-self: start;

  min-width: 0;
}


/* ==========================================
   PREVIEW
========================================== */

.preview-title {
  width: min(
    100%,
    calc(100vh - 150px)
  );

  margin: 0 auto 10px;

  padding: 0;

  text-align: left;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.2em;
}

.snapshot,
.export-area {
  width: min(
    100%,
    calc(100vh - 150px)
  );

  margin-left: auto;
  margin-right: auto;
}


/* ==========================================
   CONTROL SECTIONS
========================================== */

.control-section {
  width: 100%;

  margin: 0 0 24px;

  padding: 22px;

  border: 1px solid #111;

  background: #f4f2ec;
}

.section-heading {
  display: flex;

  align-items: baseline;

  gap: 14px;

  margin: 0 0 24px;
}

.section-number {
  color: #ff3b30;

  font-size: 13px;
}

.section-title {
  margin: 0;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: 0.08em;
}

.control-group {
  margin-bottom: 22px;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-label {
  display: block;

  margin-bottom: 9px;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.5;
}


/* ==========================================
   INPUT
========================================== */

.text-input,
.textarea-input,
.select-input {
  width: 100%;

  border: 1px solid #aaa;

  border-radius: 0;

  background: #fff;

  color: #111;
}

.text-input,
.select-input {
  min-height: 44px;

  padding: 10px 12px;
}

.textarea-input {
  min-height: 90px;

  padding: 11px 12px;

  resize: vertical;

  line-height: 1.6;
}

.message-input {
  min-height: 120px;
}

.file-input {
  width: 100%;

  font-size: 11px;
}


/* ==========================================
   RANGE
========================================== */

.range-label-row {
  display: flex;

  justify-content: space-between;
  align-items: baseline;

  gap: 12px;

  margin-bottom: 7px;
}

.range-label {
  margin: 0;
}

.range-value {
  min-width: 42px;

  text-align: right;

  font-size: 12px;
  font-weight: 900;
}

.range-input {
  width: 100%;

  margin: 0;
}


/* ==========================================
   OPTION BUTTONS
========================================== */

.option-buttons {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 7px;
}

.option-button {
  min-height: 42px;

  border: 1px solid #111;

  background: transparent;

  color: #111;

  font-size: 11px;
  font-weight: 900;
}

.option-button.active {
  background: #111;

  color: #fff;
}


/* ==========================================
   LODESTONE
========================================== */

.lodestone-button {
  width: 100%;

  min-height: 44px;

  margin-top: 10px;

  border: 0;

  background: #111;

  color: #fff;

  font-size: 11px;
  font-weight: 900;
}

.lodestone-button:hover {
  background: #333;
}

.lodestone-button:disabled {
  opacity: 0.55;
}

.lodestone-status {
  min-height: 18px;

  margin-top: 9px;

  font-size: 10px;
  font-weight: 800;
}

.lodestone-status.error {
  color: #d22;
}

.lodestone-status.success {
  color: #397500;
}

.control-divider {
  display: flex;

  align-items: center;

  gap: 10px;

  margin: 28px 0;
}

.control-divider::before,
.control-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #bbb;
}

.control-divider span {
  color: #777;

  font-size: 9px;
}


/* ==========================================
   CHECKBOX
========================================== */

.checkbox-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px 8px;
}

.checkbox-label {
  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 11px;
  font-weight: 800;
}


/* ==========================================
   QUESTION FORM
========================================== */

.question-form-item {
  margin-bottom: 22px;
}

.question-form-item:last-child {
  margin-bottom: 0;
}

.question-form-title {
  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.55;
}

.character-counter {
  margin-top: 5px;

  text-align: right;

  color: #777;

  font-size: 9px;
}


/* ==========================================
   SNAPSHOT
========================================== */

.snapshot {
  --snapshot-text-color: #fff;

  --panel-rgb: 0, 0, 0;
  --panel-alpha: 0.38;

  --cover-rgb: 0, 0, 0;
  --cover-alpha: 0;

  --image-offset-x: 0cqw;
  --image-offset-y: 0cqw;
  --image-scale: 1;

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #b8b8b8;

  color: var(--snapshot-text-color);

  container-type: inline-size;

  isolation: isolate;
}

.snapshot.text-white {
  --snapshot-text-color: #fff;
}

.snapshot.text-black {
  --snapshot-text-color: #111;
}


/* ==========================================
   SNAPSHOT FONTS
========================================== */

.snapshot.font-gothic {
  font-family:
    Arial,
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

.snapshot.font-rounded {
  font-family:
    "M PLUS Rounded 1c",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

.snapshot.font-mincho {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
}

.snapshot.font-modern {
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.snapshot.font-condensed {
  font-family:
    "Arial Narrow",
    Arial,
    sans-serif;
}


/* ==========================================
   PHOTO
========================================== */

.photo-area {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: #b8b8b8;
}

.snapshot-image {
  position: absolute;

  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-width: none;
  max-height: none;

  transform:
    translate(-50%, -50%)
    translate(
      var(--image-offset-x),
      var(--image-offset-y)
    )
    scale(var(--image-scale));

  transform-origin: center center;

  user-select: none;

  pointer-events: none;
}

.photo-placeholder {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #b8b8b8;

  color: #777;

  font-size: 4cqw;
  font-weight: 900;
}

.cover-film {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    rgba(
      var(--cover-rgb),
      var(--cover-alpha)
    );
}


/* ==========================================
   CHARACTER PANEL
========================================== */

.character-panel {
  position: absolute;

  z-index: 3;

  left: 4.5%;
  right: 4.5%;
  top: 4.5%;

  padding: 2.1% 2.3%;

  background:
    rgba(
      var(--panel-rgb),
      var(--panel-alpha)
    );

  color: var(--snapshot-text-color);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.character-header {
  display: flex;

  align-items: baseline;

  gap: 2cqw;

  margin-bottom: 1.4cqw;
}

.preview-character-name {
  font-size: 3.15cqw;
  font-weight: 900;

  line-height: 1;
}

.preview-world {
  font-size: 0.85cqw;
  font-weight: 900;
}

.character-data-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(0, 0.95fr);

  gap: 2.4cqw;
}

.data-heading {
  margin-bottom: 0.7cqw;

  font-size: 0.78cqw;
  font-weight: 900;

  letter-spacing: 0.14em;
}


/* ==========================================
   JOB
========================================== */

.job-icon-area {
  display: flex;

  flex-direction: column;

  gap: 0.65cqw;
}

.job-icon-row {
  display: flex;

  flex-wrap: nowrap;

  align-items: flex-start;

  gap: 0.62cqw;
}

.job-item {
  width: 3.3cqw;

  flex: 0 0 auto;

  text-align: center;
}

.job-item img {
  display: block;

  width: 2.75cqw;
  height: 2.75cqw;

  margin: 0 auto;

  object-fit: contain;
}

.job-level {
  margin-top: 0.28cqw;

  font-size: 1.02cqw;
  font-weight: 900;

  line-height: 1;
}

.job-dnc img {
  transform: scale(1.12);
}


/* ==========================================
   PLAY STYLE
========================================== */

.play-style-column {
  min-width: 0;

  padding-left: 2.2cqw;

  border-left:
    0.12cqw
    solid
    currentColor;
}

.preview-play-style {
  display: flex;

  flex-wrap: wrap;

  gap: 0.55cqw;
}

.play-style-tag {
  display: inline-flex;

  align-items: center;

  min-height: 2.2cqw;

  padding: 0.35cqw 0.75cqw;

  border:
    0.11cqw
    solid
    currentColor;

  font-size: 1.05cqw;
  font-weight: 900;

  white-space: nowrap;
}


/* ==========================================
   QUESTIONS / MESSAGE PANEL
========================================== */

.bottom-panel {
  position: absolute;

  z-index: 3;

  left: 4.5%;
  right: 4.5%;

  bottom: 5.2%;

  padding: 1.8% 2.2% 1.7%;

  background:
    rgba(
      var(--panel-rgb),
      var(--panel-alpha)
    );

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.questions-heading,
.message-heading {
  margin-bottom: 0.7cqw;

  font-size: 1.05cqw;
  font-weight: 900;
}

.questions-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  grid-template-areas:
    "q1 q4"
    "q2 q5"
    "q3 .";

  column-gap: 5cqw;
  row-gap: 0.85cqw;
}

.question-item {
  display: grid;

  grid-template-columns:
    2.6cqw
    minmax(0, 1fr);

  gap: 0.75cqw;
}

.question-item[data-question="1"] {
  grid-area: q1;
}

.question-item[data-question="2"] {
  grid-area: q2;
}

.question-item[data-question="3"] {
  grid-area: q3;
}

.question-item[data-question="4"] {
  grid-area: q4;
}

.question-item[data-question="5"] {
  grid-area: q5;
}

.question-number {
  display: flex;

  justify-content: center;
  align-items: center;

  width: 2.35cqw;
  height: 2.35cqw;

  border:
    0.12cqw
    solid
    currentColor;

  font-size: 1.05cqw;
  font-weight: 900;
}

.question-title {
  margin-bottom: 0.18cqw;

  font-size: 0.9cqw;
  font-weight: 800;
}

.question-answer {
  font-size: 1.18cqw;
  font-weight: 900;

  overflow-wrap: anywhere;
}

.message-block {
  margin-top: 1.15cqw;

  padding-top: 0.85cqw;

  border-top:
    0.1cqw
    solid
    currentColor;
}

.preview-message {
  font-size: 1.22cqw;
  font-weight: 800;

  line-height: 1.35;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


/* ==========================================
   SNAPSHOT FOOTER
========================================== */

.snapshot-copyright {
  position: absolute;

  z-index: 4;

  left: 4.8%;
  bottom: 1.6%;

  font-size: 0.55cqw;
  font-weight: 800;
}

.snapshot-brand {
  position: absolute;

  z-index: 4;

  right: 4.8%;
  bottom: 1.6%;

  text-align: right;

  font-size: 0.55cqw;
  font-weight: 900;
}


/* ==========================================
   EXPORT / X
========================================== */

.export-area {
  margin-top: 14px;
}

.export-button {
  width: 100%;

  min-height: 52px;

  border: 1px solid #111;

  background: #111;

  color: #fff;

  font-size: 12px;
  font-weight: 900;
}

.export-button:hover {
  background: #333;
}

.x-share-area {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 8px;
}

.x-share-button {
  min-height: 46px;

  border: 1px solid #111;

  font-size: 11px;
  font-weight: 900;
}

.x-post-button {
  background: #111;

  color: #fff;
}

.x-post-button:hover {
  background: #333;
}

.x-search-button {
  background: transparent;

  color: #111;
}

.x-search-button:hover {
  background: #111;

  color: #fff;
}

.hashtag-display {
  margin-top: 9px;

  text-align: center;

  color: #666;

  font-size: 9px;
  font-weight: 900;
}


/* ==========================================
   EXPORT STAGE
========================================== */

.export-stage {
  position: fixed;

  left: -100000px;
  top: 0;

  width: 1080px;
  height: 1080px;

  pointer-events: none;
}

.export-stage .snapshot {
  width: 1080px !important;
  height: 1080px !important;

  aspect-ratio: auto !important;
}


/* ==========================================
   ABOUT
========================================== */

.about-section {
  padding-top: 42px;
  padding-bottom: 42px;

  border-top: 1px solid #111;
}

.about-title {
  margin: 0 0 15px;

  font-size: 18px;
  font-weight: 900;
}

.about-text {
  max-width: 900px;

  margin: 0;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.9;
}


/* ==========================================
   FOOTER
========================================== */

.site-footer {
  width: 100%;

  padding: 22px;

  border-top: 1px solid #111;
}

.footer-inner {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  font-size: 10px;
  font-weight: 800;
}

.footer-links {
  display: flex;

  gap: 18px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

  .hero-inner,
  .creator-main,
  .about-section {
    width: calc(100% - 30px);
    max-width: none;
  }

  .creator-layout {
    grid-template-columns: 1fr;

    grid-template-areas:
      "top"
      "preview"
      "main";

    gap: 24px;
  }

  .preview-area {
    position: static;
  }

  .preview-title,
  .snapshot,
  .export-area {
    width: 100%;
  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 640px) {

  .site-header {
    padding: 0 12px;
  }

  .header-inner {
    min-height: 58px;
  }

  .brand-logo {
    font-size: 11px;
  }

  .language-button {
    min-width: 46px;

    padding: 7px 10px;
  }


  .hero {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .hero-inner,
  .creator-main,
  .about-section {
    width: calc(100% - 24px);
  }

  .hero-kicker {
    gap: 9px;

    margin-bottom: 22px;

    font-size: 9px;
  }

  .hero-kicker-mark {
    width: 30px;
    height: 13px;
  }

  .hero-title {
    font-size: clamp(
      34px,
      11vw,
      50px
    );
  }

  .hero-description {
    font-size: 12px;
  }

  .hero-community {
    width: 100%;
  }

  .hero-community-button {
    width: 100%;
  }

  .control-section {
    padding: 18px;
  }

  .checkbox-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .x-share-area {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
  }

}