/* =============================================================
   会員の見た目（account.html と、カート・完了の画面の会員の枠）
   2026-10-26 Lucky Works

   ・共通の style.css と、物販の shop.css は触らず、ここに足しています（ほかのページの見た目は変わりません）
   ・読むのは account.html・cart.html・shop-thanks.html の3つです
   ・色は style.css の :root の変数（var(--…)）だけを使います
   ・影・グラデーション・2px を超える角丸は使いません
   ・ボタンは高さ 44px 以上、入力欄の文字は 16px（iPhone で拡大されないように）
   ・メディアクエリは、対応する基本のスタイルより後ろ（このファイルの最後）に置いています
   ・直したら、3つのページの account.css?v= の数字を上げてください（assets/ は7日おぼえるため）
   ============================================================= */

/* display を持つ部品は、hidden のときに隠れるように */
.acc-next[hidden],.acc-row[hidden],.acc-home[hidden],.acc-sub[hidden],.acc-ts[hidden],.acc-cart[hidden],.acc-cart-login[hidden],.acc-back[hidden]{display:none;}

/* 読み上げだけに出すもの（見出しの「ご注文」・［もう一度送る］が押せるようになった知らせ） */
.acc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- 会員ページ（account.html） ---------- */
.page-account .pagehead h1:focus{outline:none;}
.acc-notice{margin:0 0 1.6em;}
.acc-notice:empty{margin:0;padding:0;}   /* 読み上げの対象に置いたまま、空のときは高さ0（hidden にすると、知らせが読まれないことがあるため） */
.acc-back{margin:1em 0 0;font-size:.88rem;line-height:1.95;letter-spacing:.05em;color:var(--ink);}
.acc-to{font-weight:600;color:var(--ink);overflow-wrap:anywhere;}   /* コードの画面のアドレス（打ち間違いに気づけるように、そのまま・太く） */
.acc-view>.txt:first-child{margin-top:0;}
.acc-form{margin-top:clamp(24px,4vw,36px);}
.page-account .fld input{font-size:1rem;min-height:48px;}   /* 16px：iPhone で入力のときに画面が拡大されないように */
.acc-code input{font-family:var(--latin);font-size:1.25rem;letter-spacing:.3em;}
.page-account .sub .btn{align-self:center;min-width:16em;}  /* gift.html と同じく、PC では中央 */
.page-account .sub{margin-top:1.4em;}
.acc-ts{margin:0 0 .4em;min-height:65px;max-width:100%;overflow:hidden;}
.acc-caution{margin:1.6em 0 .4em;color:var(--accent-deep);}
.acc-golink{margin:1.4em 0 0;}

/* 断られたときの「次に押すもの」。.page-order .sub>div の縦並びを打ち消して、横に並べる */
.acc-next,.page-account .sub>.acc-next{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin:0;}
.acc-next .btn{min-width:0;}
.acc-next .lnk{min-height:44px;}

/* 文字だけのボタン（「メールアドレスを入れ直す」など） */
.acc-textbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.86rem;letter-spacing:.06em;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.35em;}
.acc-textbtn:hover{color:var(--accent);text-decoration-color:var(--accent);}
.acc-textbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.acc-link{border-bottom:1px solid var(--line);}
.acc-link:hover{border-color:var(--accent);color:var(--accent);}

/* 開閉（「コードが届かないとき」「退会について」）。物販の「くわしく」と同じ形 */
.acc-more{margin:1.6em 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.acc-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:48px;padding:.4em 0;
  font-size:.86rem;letter-spacing:.12em;color:var(--ink);}
.acc-more summary::-webkit-details-marker{display:none;}
.acc-more summary::after{content:"＋";margin-left:auto;color:var(--ink-soft);}
.acc-more[open] summary::after{content:"−";}
.acc-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.acc-more[open]{padding-bottom:1.2em;}
.acc-list{margin:.2em 0 1.2em;padding-left:1.3em;font-size:.84rem;line-height:2;color:var(--ink-mid);}
.acc-list li{margin:.2em 0;}
.acc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 1.2em;}
.acc-row .small{margin:0;}
.acc-wait{min-height:1.95em;}
.acc-ok{margin:0 0 1em;color:var(--ink);}

/* 購入履歴 */
.acc-orders{margin:1.2em 0 0;}
.acc-orders:not(:empty){border-top:1px solid var(--line-soft);}
.acc-order{padding:20px 0;border-bottom:1px solid var(--line-soft);}
.acc-odate{margin:0 0 .5em;font-family:var(--serif);font-weight:500;font-size:1.02rem;letter-spacing:.1em;line-height:1.8;}
.acc-items{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.9;color:var(--ink);}
.acc-items li{overflow-wrap:anywhere;}
.acc-total{margin:.5em 0 0;font-size:.88rem;color:var(--ink-mid);}
.acc-total b{font-family:var(--latin);font-weight:500;font-size:1.02rem;letter-spacing:.04em;color:var(--ink);}
.acc-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:.8em 0 0;padding:0;}
.acc-tag{padding:2px 10px;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);
  font-size:.78rem;letter-spacing:.06em;line-height:1.9;color:var(--ink);}
.acc-tag[data-state="paid"],.acc-tag[data-state="shipped"]{border-color:var(--sage);}
.acc-tag[data-state="unpaid"]{border-color:var(--accent);}
.acc-tag[data-state="failed"]{color:var(--ink-mid);background:var(--paper-3);}
.acc-empty{padding:clamp(16px,3vw,28px) 0;}
.acc-empty .txt{margin:0 0 .4em;}
.acc-notes{margin:2em 0 0;padding-left:1.3em;}
.acc-notes li{margin:.3em 0;}

/* ログインの設定・退会 */
.acc-settings{margin-top:clamp(40px,6vw,64px);padding-top:clamp(24px,4vw,36px);border-top:1px solid var(--line);}
.acc-h2{margin:0 0 1em;font-family:var(--serif);font-weight:500;font-size:1.1rem;letter-spacing:.12em;}
.acc-leave p{margin:0 0 .8em;font-size:.86rem;line-height:2;color:var(--ink-mid);}
.acc-check{display:flex;align-items:center;gap:.8em;min-height:44px;margin:1em 0;cursor:pointer;font-size:.88rem;letter-spacing:.05em;color:var(--ink);}
.acc-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer;}
.acc-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- カート（cart.html）の会員の枠 ---------- */
.acc-cart{margin:1.6em 0 1.4em;padding:16px 18px;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);}
.acc-cart-who{margin:0;font-size:.88rem;line-height:1.95;letter-spacing:.05em;color:var(--ink-mid);overflow-wrap:anywhere;}
.acc-cart-who b{font-weight:600;color:var(--ink);}
.acc-cart .acc-cart-out{margin:.6em 0 0;}
.acc-cart .btn.sm{min-height:44px;}
.acc-save{margin:1.2em 0 0;}
.acc-save-note{display:block;font-size:.8rem;line-height:1.9;color:var(--ink-mid);}
.acc-save-gift{margin:.6em 0 0;}
.acc-cart .err{margin:.6em 0 0;}
.acc-cart-login{margin:1.2em 0 0;}
.acc-cart-login a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);}
.acc-cart-login a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 完了の画面（shop-thanks.html） ---------- */
.acc-thanks{margin:1.2em 0 0;overflow-wrap:anywhere;}
.acc-thanks a{border-bottom:1px solid var(--line);}
.acc-thanks a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- ログイン・アカウント発行のタブ、送り先の選択（2026-11-08） ---------- */
.acc-panel[hidden],.acc-pwbox [hidden]{display:none;}
.acc-tabs{display:grid;grid-template-columns:1fr 1fr;margin:0 0 clamp(20px,3vw,28px);border-bottom:1px solid var(--line);}
.acc-tab{min-height:48px;padding:.4em .6em;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer;
  font-family:var(--serif);font-size:1rem;letter-spacing:.12em;color:var(--ink-soft);}
.acc-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);}
.acc-tab:hover{color:var(--ink);}
.acc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.acc-choices{margin:0;padding:0;border:0;}
.acc-choice{display:flex;align-items:center;gap:.9em;min-height:52px;padding:10px 14px;margin:0 0 10px;border:1px solid var(--line);border-radius:2px;
  background:var(--paper-2);cursor:pointer;font-size:.92rem;letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere;}
.acc-choice input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent);}
.acc-choice input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.acc-choice[data-off="1"]{cursor:default;color:var(--ink-soft);background:var(--paper);}
.acc-choice small{display:block;font-size:.78rem;color:var(--ink-soft);}
.acc-pwbox{margin:0 0 1.6em;}
.acc-optin{margin:0 0 1.3em;padding:0;border:0;}
.acc-optin legend{padding:0;margin:0 0 .2em;font-size:.75rem;letter-spacing:.14em;line-height:1.9;color:var(--ink-soft);}
.acc-optin .acc-check{margin:.2em 0;}
.acc-optin .small{margin:.4em 0 0;}
/* 2026-11-09 個人情報の取り扱いへの同意（必須）。文が2行以上になるので、チェックを1行目にそろえる */
.acc-agree{align-items:flex-start;line-height:1.9;margin:0 0 1.3em;}
.acc-agree input{margin-top:.3em;}
.acc-pwbox .acc-form{margin-top:.6em;}

/* ---------- マイページのメニュー（2026-11-09。購入履歴を前に出す形から、メニューから選ぶ形へ） ---------- */
/* 2026-11-09 田中様のご指示で、線で区切った行から、押せるボタンに見える枠に変えた（影・グラデーションは使わず、枠と地の色だけ） */
.acc-menu{display:grid;gap:10px;margin:clamp(20px,3vw,28px) 0 0;}
.acc-mi{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:72px;padding:14px 52px 14px 20px;
  border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink);
  transition:background-color .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
.acc-mi::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:1.5px solid var(--ink-mid);border-right:1.5px solid var(--ink-mid);transform:rotate(45deg);}
.acc-mi-t{font-family:var(--serif);font-weight:500;font-size:1.02rem;letter-spacing:.12em;line-height:1.8;}
.acc-mi-d{font-size:.8rem;letter-spacing:.05em;line-height:1.8;color:var(--ink-mid);}
.acc-mi:hover{border-color:var(--accent);}
.acc-mi:hover .acc-mi-t{color:var(--accent);}
.acc-mi:hover::after{border-color:var(--accent);}
.acc-mi:active{background:var(--paper-3);border-color:var(--accent);}
.acc-mi:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
button.acc-mi{width:100%;margin:0;font:inherit;text-align:left;cursor:pointer;}   /* ログアウトはボタン（押したらすぐ終わる） */
button.acc-mi:disabled{cursor:default;opacity:.7;}
.acc-mi-quiet{min-height:52px;margin-top:6px;background:transparent;}
.acc-mi-quiet .acc-mi-t{font-family:inherit;font-size:.86rem;letter-spacing:.08em;color:var(--ink-mid);}
.acc-up{margin:0 0 1.4em;}
.acc-uplink{display:inline-flex;align-items:center;gap:.7em;min-height:44px;font-size:.84rem;letter-spacing:.08em;color:var(--ink-mid);}
.acc-uplink::before{content:"";width:7px;height:7px;border-bottom:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg);}
.acc-uplink:hover{color:var(--accent);}
.acc-uplink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.acc-sub .acc-orders{margin-top:0;}
/* 「プロフィール変更」の1つの画面の中のまとまり（2026-11-09） */
.acc-block{scroll-margin-top:80px;}
.acc-block+.acc-block{margin-top:clamp(36px,6vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);}
.acc-block>.acc-h2{margin-bottom:.8em;}
.acc-block.acc-pwbox{margin-bottom:0;}
/* 保存するボタンは1つ（2026-11-09）。上のまとまりとの境の線は引かず、下の「気になる生地」との境だけ線を引く */
.acc-block.acc-saveall{margin-top:clamp(28px,4vw,40px);padding-top:0;border-top:0;}
.acc-sub .acc-row .small{flex:1 1 14em;}

/* ---------- プロフィール・パスワードの変更（2026-11-09） ---------- */
.page-account .fld select{font-size:1rem;min-height:48px;}
.acc-mailrow{margin:0 0 1.6em;padding:0 0 1.2em;border-bottom:1px solid var(--line-soft);}
.acc-label{margin:0;font-size:.75rem;letter-spacing:.14em;line-height:1.9;color:var(--ink-soft);}
.acc-value{margin:.2em 0 .4em;font-size:1rem;letter-spacing:.04em;line-height:1.8;overflow-wrap:anywhere;}
.acc-addr{margin:1.6em 0 1.3em;padding:0;border:0;min-width:0;}
.acc-addr legend{padding:0;margin:0 0 .8em;font-family:var(--serif);font-size:.95rem;letter-spacing:.12em;line-height:1.8;}
.acc-pwbox .acc-notes{margin-top:1.6em;}

/* ---------- 2026-11-09 夜 改善指示書 A・B（アカウント発行のメリット・マイページの作り直し） ---------- */
/* A-1 会員のメリット */
.acc-merit{margin:1.2em 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);}
.acc-merit-h{margin:0 0 .4em;font-family:var(--serif);font-weight:500;font-size:.98rem;letter-spacing:.12em;line-height:1.8;color:var(--ink);}
.acc-merit-list{margin:0 0 .6em;padding-left:1.3em;font-size:.86rem;line-height:1.95;letter-spacing:.04em;color:var(--ink-mid);}
.acc-merit-list li{margin:.15em 0;}
.acc-merit-list li::marker{color:var(--accent);}
.acc-merit .small{margin:0;}
/* A-2 例の文字（入れた文字と見分けがつくように薄く。ラベルが別にあるので、読めないほどにはしない） */
.page-account .fld input::placeholder{color:var(--ink-soft);opacity:.72;}

/* B-1 マイページでは見出しを低くし、道しるべを出さない */
.acc-mypage .pagehead{padding:18px 0 14px;}
.acc-mypage .pagehead .crumb{display:none;}
.acc-mypage .pagehead .eyebrow{margin-bottom:2px;}
.acc-mypage .pagehead h1{margin:0;font-size:1.3rem;line-height:1.6;}
.acc-mypage .sec-tight{padding-top:18px;}
.acc-who{margin:0 0 .6em;font-size:.78rem;letter-spacing:.05em;line-height:1.8;color:var(--ink-soft);overflow-wrap:anywhere;}
.acc-devices{display:flex;flex-wrap:wrap;align-items:center;gap:0 .8em;margin:0 0 .8em;font-size:.82rem;line-height:1.8;letter-spacing:.04em;color:var(--ink-mid);}
.acc-devices[hidden],.acc-ordercard[hidden]{display:none;}
.acc-devgo{display:inline-flex;align-items:center;gap:.4em;min-height:36px;color:var(--accent);border-bottom:1px solid transparent;}
.acc-devgo::after,.acc-ordercard-go::after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}
.acc-devgo:hover{border-bottom-color:var(--accent);}
/* 「ログインしました」は数秒で消える知らせ（下に重ねて出す。影は使わず、地の色で分ける） */
.acc-notice.is-toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:30em;margin:0 auto;padding:12px 16px;
  border-radius:2px;background:var(--ink);color:var(--paper);font-size:.84rem;line-height:1.9;animation:accToast .3s ease-out;}
@keyframes accToast{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* B-2 ご注文の状態（未完了のご注文があるときだけ） */
.acc-ordercard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 12px;padding:12px 16px;
  border:1px solid var(--accent);border-radius:2px;background:var(--paper-2);color:var(--ink);font-size:.86rem;line-height:1.8;letter-spacing:.04em;}
.acc-ordercard-t{overflow-wrap:anywhere;}
.acc-ordercard-go{display:inline-flex;align-items:center;gap:.4em;margin-left:auto;font-size:.8rem;color:var(--accent);white-space:nowrap;}
.acc-ordercard:hover{background:var(--paper-3);}
.acc-ordercard:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* B-3 よく使う4つ（2×2のタイル） */
.acc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 0;}
.acc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:14px 8px;
  border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink);text-align:center;
  transition:background-color .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
.acc-tile svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.acc-tile-t{font-family:var(--serif);font-weight:500;font-size:.92rem;letter-spacing:.08em;line-height:1.6;}
.acc-tile:hover{border-color:var(--accent);}
.acc-tile:active{background:var(--paper-3);border-color:var(--accent);}
.acc-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* B-4 気になる生地・着せ替えのキープ（タイルのすぐ下） */
.acc-favbox{margin:clamp(36px,6vw,52px) 0 0;}
/* B-5 設定（タイルより小さめの行） */
.acc-setgrp{margin:clamp(36px,6vw,52px) 0 0;padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);}
.acc-setgrp .acc-menu{margin-top:0;}
.acc-menu-sm{gap:8px;}
.acc-menu-sm .acc-mi{min-height:60px;padding:10px 46px 10px 16px;}
.acc-menu-sm .acc-mi-t{font-size:.94rem;}
.acc-menu-sm .acc-mi-d{font-size:.76rem;}
.acc-devbox{scroll-margin-top:80px;}
/* B-6 ログアウト・退会は小さな文字のリンク */
.acc-quiet{display:flex;flex-wrap:wrap;gap:0 1.6em;margin:1.6em 0 0;}
.acc-quiet .acc-textbtn{font-size:.8rem;color:var(--ink-mid);}
.acc-quiet .acc-textbtn:disabled{cursor:default;opacity:.7;}

/* ---------- 2026-11-10 UX-17 会員ページの薄い・小さい文字を読みやすく ----------
   --ink-soft（#94867a）は紙の色との差が 3.2:1 しかないので、説明・ラベルの文字は --ink-mid（5.5:1）以上にし、
   大きさは 14px（.875rem）以上にする。見出しの書体・飾りの「＋」・入力の例（placeholder）・押せない選択肢はそのまま。
   選んでいるタブは、色だけでなく下の線でも分かる（.acc-tab[aria-selected="true"]） */
.acc-label,
.acc-optin legend,
.page-account .acc-dogsex legend,
.page-account .acc-dogsize-h{font-size:.875rem;color:var(--ink-mid);}
.acc-choice small{font-size:.875rem;color:var(--ink-mid);}
.acc-choice[data-off="1"] small{color:inherit;}
.acc-tab{color:var(--ink-mid);}
.acc-who{font-size:.875rem;color:var(--ink-mid);}
.acc-mi-d,.acc-menu-sm .acc-mi-d{font-size:.875rem;}
.acc-quiet .acc-textbtn{font-size:.875rem;}
.page-account .small{font-size:.875rem;}
.page-account .small:not(.acc-caution):not(.acc-ok){color:var(--ink-mid);}
.page-account .acc-fav-meta,.page-account .acc-card-old{font-size:.875rem;}
.page-account .dp-h-n{font-size:.875rem;color:var(--ink-mid);}
.page-account .dp-note{font-size:.875rem;}

/* ---------- メディアクエリ（基本のスタイルより後ろに置く） ---------- */
@media(max-width:600px){
  .page-account .sub .btn{align-self:stretch;min-width:0;}   /* gift.html と同じく、スマホでは全幅 */
  .acc-row .btn{width:100%;}
  .acc-next{justify-content:flex-start;}
  .acc-next .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .acc-mi,.acc-tile,.acc-uplink,.acc-textbtn,.acc-link,.acc-cart-login a,.acc-thanks a{transition:none;}
  .acc-notice.is-toast{animation:none;}
}

/* 2026-11-08 わんこ着せ替えのポップアップの中（account.html?embed=1）。ヘッダー・メニュー・フッター・道しるべを隠す */
.acc-embed .nav,.acc-embed .menu,.acc-embed .f,.acc-embed .crumb,.acc-embed .totop{display:none!important;}
.acc-embed body{padding-top:0!important;background:var(--paper);}
.acc-embed .pagehead{padding:18px 0 4px!important;margin:0!important;}
.acc-embed .pagehead h1{font-size:1.25rem;}
.acc-embed .sec-tight{padding:8px 0 24px!important;}