/* =========================================
   小說旅店｜會員系統
========================================= */


/* =========================================
   整體頁面
========================================= */

.member-page {
  min-height: calc(100vh - 72px);

  padding:
    clamp(24px, 3vw, 40px)
    0
    clamp(60px, 7vw, 90px);

  background-color: var(--bg-lightbrown);
  color: var(--text-darkbrown);
}


.member-shell {
  width: min(
    1100px,
    calc(100% - 48px)
  );

  margin: 0 auto;

  display: grid;

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

  gap:
    clamp(
      48px,
      7vw,
      90px
    );

  align-items: start;
}



/* =========================================
   左側：小說旅店介紹
========================================= */

.member-intro {
  min-width: 0;
}


.member-intro-inner {
  max-width: 480px;
}


.member-intro-kicker {
  margin:
    0
    0
    18px;

  color:
    var(--selected-darkgreen);

  font-size: 0.76rem;

  line-height: 1.5;

  letter-spacing: 0.22em;
}


.member-intro-title {
  margin: 0;

  color:
    var(--title-darkbrown);

  font-size:
    clamp(
      2rem,
      4vw,
      3.2rem
    );

  line-height: 1.3;

  letter-spacing: 0.16em;

  font-weight: 400;
}


.member-intro-slogan {
  margin:
    22px
    0
    0;

  color:
    var(--title-darkbrown);

  font-size:
    clamp(
      1.05rem,
      1.8vw,
      1.25rem
    );

  line-height: 1.8;

  letter-spacing: 0.1em;
}


.member-intro-description {
  margin:
    28px
    0
    0;

  color:
    rgba(
      70,
      63,
      55,
      0.78
    );

  font-size: 0.95rem;

  line-height: 2;

  letter-spacing: 0.04em;
}


.member-benefit-list {
  margin:
    26px
    0
    0;

  padding:
    22px
    0
    0;

  list-style: none;

  border-top:
    1px solid
    rgba(
      58,
      51,
      43,
      0.16
    );
}


.member-benefit-list li {
  position: relative;

  padding-left: 18px;

  margin-bottom: 12px;

  font-size: 0.9rem;

  line-height: 1.7;

  letter-spacing: 0.04em;
}


.member-benefit-list li::before {
  content: "—";

  position: absolute;

  left: 0;

  color:
    var(--selected-darkgreen);
}



/* =========================================
   右側：會員卡
========================================= */

.member-card {
  width: 100%;

min-height: 550px;
height: auto;

  padding:
    clamp(
      34px,
      5vw,
      48px
    );

  display: flex;

  flex-direction: column;

  background-color:
    var(--bg-card-lightbrown);

  border:
    1px solid
    var(--frame-darkbrown);

  box-shadow:
    0
    14px
    38px
    rgba(
      47,
      42,
      36,
      0.14
    );
}


.member-card-title {
  margin:
    0
    0
    24px;

  color:
    var(--title-darkbrown);

  font-size:
    clamp(
      1.35rem,
      3vw,
      1.65rem
    );

  line-height: 1.5;

  letter-spacing: 0.12em;

  font-weight: 400;

  text-align: center;
}



/* =========================================
   小說旅客｜登入｜註冊
========================================= */

.member-tabs {
  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 30px;

  padding-bottom: 10px;

  border-bottom:
    1px solid
    rgba(
      58,
      51,
      43,
      0.16
    );
}


.member-tab {
  padding:
    5px
    4px
    8px;

  background:
    transparent;

  border: none;

  border-bottom:
    1px solid
    transparent;

  color:
    var(--text-darkbrown);

  font-family: inherit;

  font-size: 0.9rem;

  line-height: 1;

  letter-spacing: 0.1em;

  cursor: pointer;
}


.member-tab.is-active {
  color:
    var(--selected-darkgreen);

  border-bottom-color:
    var(--selected-darkgreen);
}


.member-tab-separator {
  margin:
    0
    10px;

  color:
    rgba(
      70,
      63,
      55,
      0.36
    );
}


.member-panel[hidden] {
  display: none;
}


.member-panels {
  flex: 1;

  min-height: 0;
}


.member-panel {
  height: 100%;
}



/* =========================================
   表單
========================================= */

.member-form {
  display: flex;

  flex-direction: column;

  height: 100%;

  gap: 18px;
}


.member-field {
  display: grid;

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

  align-items: center;

  gap: 16px;
}


.member-field > span {
  font-size: 0.82rem;

  line-height: 1.5;

  letter-spacing: 0.06em;

  white-space: nowrap;
}


.member-field input {
  width: 100%;

  height: 36px;

  padding:
    4px
    2px;

  background:
    transparent;

  border: none;

  border-bottom:
    1px solid
    rgba(
      58,
      51,
      43,
      0.4
    );

  color:
    var(--text-darkbrown);

  font-family: inherit;

  font-size: 0.95rem;

  outline: none;
}


.member-field input:focus {
  border-bottom-color:
    var(--selected-darkgreen);
}



/* =========================================
   登入底部選項
========================================= */

.member-form-options {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-top: auto;
}


.member-agreement {
  margin-top: auto;
}


.member-remember,
.member-agreement {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  color:
    rgba(
      70,
      63,
      55,
      0.78
    );

  font-size: 0.8rem;

  line-height: 1.6;
}


.member-remember input,
.member-agreement input {
  width: 16px;

  height: 16px;

  flex-shrink: 0;

  margin-top: 3px;

  accent-color:
    var(--selected-darkgreen);
}


.member-forgot,
.member-agreement a {
  color:
    rgba(
      70,
      63,
      55,
      0.68
    );
}


.member-forgot:hover,
.member-agreement a:hover {
  color:
    var(--selected-darkgreen);
}



/* =========================================
   送出按鈕
========================================= */

.member-submit {
  min-height: 46px;

  margin-top: 4px;

  padding:
    10px
    20px;

  background-color:
    var(--bg-darkbrown);

  border:
    1px solid
    var(--bg-darkbrown);

  color:
    var(--text-lightbrown);

  font-family: inherit;

  font-size: 0.9rem;

  letter-spacing: 0.1em;

  cursor: pointer;
}


.member-submit:hover {
  background-color:
    var(--selected-darkgreen);

  border-color:
    var(--selected-darkgreen);
}



/* =========================================
   小說旅客介紹面板
========================================= */

.member-panel-title {
  margin:
    0
    0
    18px;

  color:
    var(--title-darkbrown);

  font-size: 1.15rem;

  line-height: 1.6;

  letter-spacing: 0.08em;

  font-weight: 500;
}


.member-panel-text {
  margin: 0;

  color:
    rgba(
      70,
      63,
      55,
      0.8
    );

  font-size: 0.92rem;

  line-height: 2;

  letter-spacing: 0.04em;
}



/* =========================================
   Cloudflare Turnstile
========================================= */

.member-turnstile {
  width: 100%;

  min-height: 65px;

  margin-top: 8px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  overflow: visible;
}


.member-turnstile > div {
  max-width: 100%;
}


.member-security-notice {
  margin:
    6px
    0
    0;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(
      58,
      51,
      43,
      0.18
    );

  color:
    rgba(
      70,
      63,
      55,
      0.78
    );

  font-size: 0.78rem;

  line-height: 1.7;

  letter-spacing: 0.03em;
}


.member-security-notice[data-status="error"] {
  border-color:
    rgba(
      122,
      67,
      58,
      0.32
    );

  color:
    #6F4039;
}



/* =========================================
   忘記密碼／重設密碼
========================================= */

.member-panel-lead {
  margin-bottom: 24px;
}


.member-forgot-form,
.member-reset-form {
  height: auto;
}


.member-forgot-success[hidden] {
  display: none;
}


.member-forgot-success {
  width: 100%;
}


.member-forgot-success
.member-panel-title {
  margin-bottom: 18px;

  text-align: left;
}


.member-secondary-button {
  align-self: flex-start;

  margin-top: 2px;

  padding:
    2px
    0;

  border: none;

  border-bottom:
    1px solid
    currentColor;

  background-color:
    transparent;

  color:
    rgba(
      70,
      63,
      55,
      0.68
    );

  font-family: inherit;

  font-size: 0.8rem;

  line-height: 1.6;

  letter-spacing: 0.04em;

  cursor: pointer;
}


.member-secondary-button:hover {
  color:
    var(--selected-darkgreen);
}


/* =========================================
   已登入會員狀態
========================================= */

.member-logged-in {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 18px;

  height: 100%;

  text-align: center;
}


.member-logout-button {
  width: 100%;

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

  margin-top: auto;

  text-decoration: none;
}


/* =========================================
   850px 以下
========================================= */

@media (max-width: 850px) {

  .member-page {
    padding:
      24px
      0
      64px;
  }


  .member-shell {
    width:
      min(
        680px,
        calc(100% - 32px)
      );

    grid-template-columns: 1fr;

    gap: 28px;
  }


  .member-intro {
    text-align: center;
  }


  .member-intro-inner {
    max-width: 620px;

    margin:
      0
      auto;
  }


  .member-intro-kicker {
    margin-bottom: 10px;
  }


  .member-intro-title {
    font-size: 2rem;
  }


  .member-intro-slogan {
    margin-top: 12px;
  }


  .member-intro-description {
    max-width: 560px;

    margin:
      18px
      auto
      0;
  }


  /*
     平板開始減少資訊量。
  */

  .member-benefit-list {
    display: none;
  }


  .member-card {
    width:
      min(
        500px,
        100%
      );

    height: auto;

    margin:
      0
      auto;
  }


  .member-panels {
    flex: none;
  }


  .member-panel {
    height: auto;
  }


  .member-form {
    height: auto;
  }


  .member-form-options {
    margin-top: 0;
  }


  .member-agreement {
    margin-top: 0;
  }

}



/* =========================================
   600px 以下
========================================= */

@media (max-width: 600px) {

  .member-page {
    padding:
      18px
      0
      48px;
  }


  .member-shell {
    width:
      calc(
        100% - 24px
      );

    gap: 18px;
  }


  /*
     手機只保留品牌標語。
  */

  .member-intro-kicker,
  .member-intro-title,
  .member-intro-description,
  .member-benefit-list {
    display: none;
  }


  .member-intro-slogan {
    margin: 0;

    color:
      var(--title-darkbrown);

    font-size: 0.98rem;

    line-height: 1.7;

    letter-spacing: 0.08em;

    text-align: center;
  }


  .member-card {
    width: 100%;

    padding:
      30px
      24px;
  }


  .member-card-title {
    margin-bottom: 20px;

    font-size: 1.3rem;
  }


  .member-tabs {
    margin-bottom: 26px;
  }


  .member-tab {
    font-size: 0.84rem;

    letter-spacing: 0.07em;
  }


  .member-tab-separator {
    margin:
      0
      7px;
  }


  .member-form {
    gap: 16px;
  }


  .member-field {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    gap: 10px;
  }


  .member-field > span {
    font-size: 0.8rem;
  }


  .member-captcha {
    margin-top: 6px;

    padding:
      12px
      14px;
  }


  .member-captcha-check {
    gap: 9px;

    font-size: 0.78rem;
  }


  .member-remember,
  .member-agreement {
    font-size: 0.76rem;
  }


  .member-submit {
    min-height: 44px;

    font-size: 0.86rem;
  }

}



/* =========================================
   400px 以下
========================================= */

@media (max-width: 400px) {

  .member-page {
    padding-top: 14px;
  }


  .member-shell {
    width:
      calc(
        100% - 16px
      );

    gap: 14px;
  }


  .member-intro-slogan {
    font-size: 0.9rem;

    letter-spacing: 0.05em;
  }


  .member-card {
    padding:
      26px
      18px;
  }


  .member-card-title {
    font-size: 1.2rem;
  }


  .member-tab {
    padding-left: 2px;

    padding-right: 2px;

    font-size: 0.8rem;

    letter-spacing: 0.05em;
  }


  .member-tab-separator {
    margin:
      0
      5px;
  }


  .member-field {
    grid-template-columns:
      72px
      minmax(0, 1fr);

    gap: 8px;
  }


  .member-field > span {
    font-size: 0.76rem;
  }


  .member-captcha {
    padding:
      11px
      12px;
  }


  .member-captcha-check {
    gap: 8px;

    font-size: 0.74rem;
  }


  .member-captcha-box {
    width: 18px;

    height: 18px;
  }


  .member-form-options {
    gap: 10px;
  }


  .member-remember,
  .member-agreement,
  .member-forgot {
    font-size: 0.72rem;
  }


  /*
     320px 左右的內容寬度不足 300px 時，
     member.js 會把 Turnstile 改成 compact。
  */

  .member-turnstile {
    justify-content: center;
  }


  .member-secondary-button {
    font-size: 0.74rem;
  }

}

/* =========================================
   註冊成功後：
   確實隱藏註冊表單
========================================= */

.member-form[hidden] {
    display: none;
}

/* =========================================
   註冊成功／等待 Email 驗證
========================================= */

.member-register-success[hidden] {
  display: none;
}


.member-register-success {
  width: 100%;
}


.member-register-success
.member-panel-title {
  margin-bottom: 18px;

  text-align: left;
}


.member-register-success-email {
  color:
    var(--selected-darkgreen);

  font-weight: 400;

  overflow-wrap: anywhere;
}


.member-resend-form {
  margin-top: 28px;
}


.member-resend-button {
  padding: 0;

  border: none;
  border-bottom:
    1px solid
    currentColor;

  background-color:
    transparent;

  color:
    var(--selected-darkgreen);

  font-family: inherit;

  font-size: 0.82rem;

  line-height: 1.6;

  cursor: pointer;
}


.member-resend-button:hover:not(:disabled) {
  color:
    var(--title-darkbrown);
}


.member-resend-button:disabled {
  color:
    rgba(
      70,
      63,
      55,
      0.46
    );

  border-bottom-color:
    rgba(
      70,
      63,
      55,
      0.22
    );

  cursor: default;
}


.member-resend-countdown {
  margin:
    8px
    0
    0;

  color:
    rgba(
      70,
      63,
      55,
      0.58
    );

  font-size: 0.74rem;

  line-height: 1.6;

  letter-spacing: 0.03em;
}


.member-resend-countdown[hidden] {
  display: none;
}

/* =========================================
   服務條款／隱私權政策 Modal
========================================= */

body.member-legal-modal-open {
  overflow: hidden;
}


.member-legal-modal[hidden],
.member-legal-document[hidden] {
  display: none;
}


.member-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 24px;
}


.member-legal-backdrop {
  position: absolute;
  inset: 0;

  background-color:
    rgba(
      47,
      42,
      36,
      0.56
    );
}


.member-legal-dialog {
  position: relative;
  z-index: 1;

  width:
    min(
      800px,
      100%
    );

  max-height:
    min(
      84vh,
      860px
    );

  max-height:
    min(
      84dvh,
      860px
    );

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;

  background-color:
    var(--bg-card-lightbrown);

  border:
    1px solid
    rgba(
      106,
      93,
      81,
      0.42
    );

  box-shadow:
    0
    18px
    48px
    rgba(
      47,
      42,
      36,
      0.22
    );

  outline: none;
}


.member-legal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding:
    24px
    28px
    22px;

  border-bottom:
    1px solid
    rgba(
      106,
      93,
      81,
      0.22
    );
}


.member-legal-heading {
  min-width: 0;
}


.member-legal-kicker {
  margin:
    0
    0
    7px;

  color:
    var(--selected-darkgreen);

  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.18em;
  font-weight: 500;
}


.member-legal-title {
  margin: 0;

  color:
    var(--title-darkbrown);

  font-size:
    clamp(
      1.35rem,
      3vw,
      1.75rem
    );

  line-height: 1.45;
  letter-spacing: 0.05em;
  font-weight: 500;
}


.member-legal-close {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: -4px;

  padding: 0;

  background-color:
    transparent;

  border:
    1px solid
    rgba(
      106,
      93,
      81,
      0.34
    );

  color:
    var(--text-darkbrown);

  font: inherit;
  font-size: 1.45rem;
  line-height: 1;

  cursor: pointer;
}


.member-legal-close:hover,
.member-legal-close:focus-visible {
  border-color:
    var(--selected-darkgreen);

  color:
    var(--selected-darkgreen);
}


.member-legal-body {
  min-height: 0;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding:
    30px
    34px
    38px;

  scrollbar-gutter: stable;
}


.member-legal-document {
  color:
    var(--text-darkbrown);

  font-size: 0.94rem;
  line-height: 1.95;
}


.member-legal-document > *:first-child {
  margin-top: 0;
}


.member-legal-document > *:last-child {
  margin-bottom: 0;
}


.member-legal-document > p:first-child,
.member-legal-document > p:nth-child(2) {
  margin:
    0
    0
    4px;

  color:
    rgba(
      70,
      63,
      55,
      0.62
    );

  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
}


.member-legal-document > p:nth-child(2) {
  margin-bottom: 28px;
}


.member-legal-document h2 {
  margin:
    42px
    0
    16px;

  color:
    var(--title-darkbrown);

  font-size: 1.08rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  font-weight: 600;
}


.member-legal-document p {
  margin:
    0
    0
    1.15em;

  font-size: inherit;
  line-height: inherit;

  overflow-wrap: anywhere;
}


.member-legal-document ul,
.member-legal-document ol {
  margin:
    0
    0
    1.4em;

  padding-left: 1.5em;
}


.member-legal-document li {
  margin-bottom: 0.55em;

  line-height: 1.9;
}


.member-legal-document a {
  color:
    var(--selected-darkgreen);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


.member-legal-document strong {
  color:
    var(--title-darkbrown);

  font-weight: 600;
}


.member-legal-document .wp-block-table {
  max-width: 100%;

  overflow-x: auto;
}


.member-legal-document table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.86rem;
  line-height: 1.7;
}


.member-legal-document th,
.member-legal-document td {
  padding:
    9px
    10px;

  border:
    1px solid
    rgba(
      106,
      93,
      81,
      0.24
    );

  vertical-align: top;
  text-align: left;
}


.member-legal-document th {
  background-color:
    var(--bg-button-lightbrown);
}


.member-legal-footer {
  display: flex;
  justify-content: flex-end;

  padding:
    14px
    28px
    16px;

  border-top:
    1px solid
    rgba(
      106,
      93,
      81,
      0.22
    );
}


.member-legal-done {
  min-width: 96px;
  min-height: 38px;

  padding:
    8px
    18px;

  background-color:
    var(--bg-darkbrown);

  border:
    1px solid
    var(--bg-darkbrown);

  color:
    var(--text-lightbrown);

  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.08em;

  cursor: pointer;
}


.member-legal-done:hover,
.member-legal-done:focus-visible {
  background-color:
    var(--selected-darkgreen);

  border-color:
    var(--selected-darkgreen);
}


@media (max-width: 600px) {

  .member-legal-modal {
    padding: 8px;
  }


  .member-legal-dialog {
    width: 100%;

    max-height:
      calc(
        100vh - 16px
      );

    max-height:
      calc(
        100dvh - 16px
      );
  }


  .member-legal-header {
    gap: 14px;

    padding:
      18px
      18px
      16px;
  }


  .member-legal-kicker {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }


  .member-legal-title {
    font-size: 1.24rem;
  }


  .member-legal-close {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  .member-legal-body {
    padding:
      24px
      18px
      30px;
  }


  .member-legal-document {
    font-size: 0.9rem;
    line-height: 1.9;
  }


  .member-legal-document h2 {
    margin-top: 36px;

    font-size: 1.02rem;
  }


  .member-legal-footer {
    padding:
      12px
      18px
      14px;
  }

}


@media (max-width: 360px) {

  .member-legal-modal {
    padding: 4px;
  }


  .member-legal-dialog {
    max-height:
      calc(
        100vh - 8px
      );

    max-height:
      calc(
        100dvh - 8px
      );
  }


  .member-legal-header {
    padding:
      15px
      14px
      13px;
  }


  .member-legal-title {
    font-size: 1.12rem;
  }


  .member-legal-body {
    padding:
      20px
      14px
      26px;
  }


  .member-legal-document {
    font-size: 0.88rem;
  }


  .member-legal-footer {
    padding:
      10px
      14px
      12px;
  }

}