/* 碁打ちプロフィールカード (page-profile-card.php) */
.pcard-hero { padding:150px 0 28px; background:var(--color-dark); color:#fff; }
.pcard-hero h1 { margin:6px 0 10px; font-size:clamp(2rem,6vw,3.6rem); font-weight:900; letter-spacing:-.03em; }
.pcard-hero__lead { margin:0; max-width:36em; color:rgb(255 255 255 / 72%); font-size:.9rem; }
.pcard-stage { padding:28px 0 80px; }
.pcard-stage__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:28px; align-items:start; }
.pcard-form { display:flex; flex-direction:column; gap:16px; min-width:0; }
.pcard-form fieldset { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px 14px; min-width:0; margin:0; padding:14px 16px 16px; border:0; border-radius:var(--radius-md); background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-line); }
.pcard-form legend { float:left; width:100%; grid-column:1/-1; margin:0 0 2px; padding:0; font-weight:900; font-size:.95rem; }
.pcard-form label { display:flex; flex-direction:column; gap:3px; min-width:0; color:var(--color-muted); font-size:.78rem; font-weight:700; }
.pcard-form .is-wide { grid-column:1/-1; }
.pcard-form [hidden], .pcard-preview [hidden], .pcard-card[hidden] { display:none !important; }
.pcard-form input[type=text], .pcard-form textarea, .pcard-form select { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-ink); font:inherit; font-size:16px; font-weight:400; }
.pcard-form textarea { min-height:62px; resize:vertical; }
.pcard-form input:focus-visible, .pcard-form textarea:focus-visible, .pcard-form select:focus-visible { outline:3px solid var(--color-lime-strong); outline-offset:1px; }
.pcard-date { display:flex; gap:8px; }
.pcard-date label { flex:1; }
.pcard-radios { display:flex; flex-wrap:wrap; gap:16px; }
.pcard-radios label { flex-direction:row; align-items:center; gap:5px; color:var(--color-ink); font-size:.95rem; }
.pcard-note { margin:0 0 6px; color:var(--color-muted); font-size:.78rem; }
.pcard-note a { color:inherit; text-decoration:underline; }
.pcard-credit { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:28px 0 0; padding-top:14px; border-top:1px dashed var(--color-line); color:var(--color-muted); font-size:.78rem; }
.pcard-credit dt { font-weight:700; white-space:nowrap; }
.pcard-credit dd { margin:0; }
.pcard-credit__p { white-space:nowrap; }
.pcard-credit a { color:inherit; text-decoration:underline; }
.pcard-swatches { display:flex; gap:10px; }
.pcard-swatches button { width:34px; height:34px; padding:0; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--color-line); cursor:pointer; }
.pcard-swatches button[aria-pressed="true"] { box-shadow:0 0 0 3px var(--color-ink); }
.pcard-preview { position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.pcard-scaler-box { position:relative; width:100%; }
#pcard-scaler { position:absolute; top:0; left:0; width:600px; height:840px; transform-origin:0 0; }
.pcard-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pcard-ghost { min-height:44px; padding:8px 18px; border:1px solid var(--color-line); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-ink); font:inherit; font-weight:800; font-size:.85rem; cursor:pointer; }
.pcard-out { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgb(17 19 17 / 78%); }
.pcard-out[hidden] { display:none; }
.pcard-out__in { display:flex; flex-direction:column; gap:12px; width:100%; max-width:460px; max-height:100%; overflow:auto; padding:16px; border-radius:var(--radius-md); background:var(--color-surface); }
.pcard-out__in img { display:block; width:100%; border-radius:8px; }
.pcard-out__steps { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.pcard-out__steps .button { min-width:180px; justify-content:center; }
.pcard-out__steps .pcard-note { margin:0 0 10px; }
.pcard-out__steps .pcard-note.is-key { color:#d3203f; font-size:.86rem; font-weight:700; }
.pcard-out__steps .pcard-ghost { margin-top:4px; }
@media (max-width:900px) {
  .pcard-stage__inner { grid-template-columns:minmax(0,1fr); }
  .pcard-preview { position:static; order:-1; }
}

/* カード本体（実寸600×840・画像化される部分） */
.pcard-card { --c-main:#f0609f; --c-soft:#ffc4dd; --c-pale:#fff0f6; --c-bg1:#dcc8ff; --c-bg2:#ffc9e1; --c-bg3:#ffe3ef; --ink:#d3203f;
  position:relative; width:600px; height:840px; overflow:hidden; color:#3b2a33; font-family:"Zen Maru Gothic",sans-serif; line-height:1.5; letter-spacing:0;
  background:linear-gradient(160deg,var(--c-bg1) 0%,var(--c-bg2) 55%,var(--c-bg3) 100%); }
.pcard-card.blue { --c-main:#4b8be8; --c-soft:#bcd5ff; --c-pale:#eef5ff; --c-bg1:#c9e4ff; --c-bg2:#d9d2ff; --c-bg3:#eef3ff; --ink:#1f4fb8; }
.pcard-card.mint { --c-main:#2fae8f; --c-soft:#b5ead9; --c-pale:#ecfbf5; --c-bg1:#c8f1e2; --c-bg2:#fff2c4; --c-bg3:#eafaf3; --ink:#c0392b; }
.pcard-card.yellow { --c-main:#f0a020; --c-soft:#ffdca0; --c-pale:#fff8e8; --c-bg1:#ffe6a8; --c-bg2:#ffd0c0; --c-bg3:#fff4dc; --ink:#c8302a; }
.pcard-card .abs { position:absolute; }
.pcard-card .hole { position:absolute; left:14px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:inset 1px 2px 3px rgba(0,0,0,.25); }
.pcard-card .title { left:70px; top:14px; font-family:"Hachi Maru Pop",cursive; font-size:44px; color:var(--c-main); line-height:1.2;
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,4px 5px 0 rgba(0,0,0,.12); }
.pcard-card .date { right:22px; top:34px; display:flex; align-items:center; gap:4px; font-size:13px; }
.pcard-card .date .v { min-width:20px; padding:1px 7px; border-radius:6px; background:#fff; color:var(--ink); font-family:"Yomogi",cursive; font-size:17px; text-align:center; }
.pcard-card .box { position:absolute; border:2px solid #fff; border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 3px 0 var(--c-soft); }
.pcard-card .ribbon { position:absolute; top:0; right:0; left:0; display:flex; align-items:center; justify-content:center; height:30px; border-radius:14px 14px 0 0; background:var(--c-main); color:#fff; font-weight:700; font-size:14px; letter-spacing:.05em; }
.pcard-card .ribbon .fit { display:block; overflow:hidden; max-width:calc(100% - 16px); white-space:nowrap; }
.pcard-card .rk { display:inline-block; margin-right:6px; padding:0 7px; border-radius:999px; background:#c27c3e; color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:.6em; line-height:1.6; vertical-align:.2em; }
.pcard-card .rk1 { background:#e0a800; }
.pcard-card .rk2 { background:#9aa3ae; }
.pcard-card .ribbon.soft { background:var(--c-soft); text-shadow:0 1px 2px rgba(0,0,0,.18); }
.pcard-card .val { overflow:hidden; color:var(--ink); font-family:"Yomogi",cursive; white-space:nowrap; }
.pcard-card .ml { display:flex; align-items:center; justify-content:center; line-height:1.35; text-align:center; white-space:normal; word-break:break-all; }
/* 英語・韓国語のページでは単語の途中で折り返さない */
html:lang(en) .pcard-card .ml, html:lang(ko) .pcard-card .ml { word-break:normal; overflow-wrap:anywhere; }
html:lang(ko) .pcard-card .ml { word-break:keep-all; }
.pcard-card .photo { left:60px; top:84px; box-sizing:border-box; width:158px; height:172px; padding:9px 9px 26px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.22); transform:rotate(-5deg); }
.pcard-card .photo .img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-color:var(--c-pale); background-position:center; background-size:cover; color:var(--c-main); font-size:13px; text-align:center; }
.pcard-card .top-f { position:absolute; right:18px; left:180px; display:flex; align-items:baseline; gap:10px; padding-bottom:2px; border-bottom:2px dashed var(--c-soft); }
.pcard-card .top-f .k { flex:none; font-size:17px; }
.pcard-card .top-f .val { flex:1; min-width:0; font-size:22px; }
.pcard-card .list { position:absolute; top:12px; right:14px; left:14px; display:flex; flex-direction:column; gap:6px; }
.pcard-card .li { display:flex; align-items:baseline; gap:6px; height:27px; font-size:12px; }
.pcard-card .li .k, .pcard-card .li .s { flex:none; }
.pcard-card .li .val { flex:1; min-width:0; border-bottom:2px dashed var(--c-soft); font-size:17px; text-align:center; }
.pcard-card .likes { position:absolute; top:35px; right:12px; left:12px; display:flex; flex-direction:column; }
.pcard-card .lk { display:flex; align-items:center; gap:4px; height:16px; border-bottom:1px solid var(--c-pale); font-size:10.5px; line-height:16px; }
.pcard-card .lk .k { flex:none; width:92px; white-space:nowrap; }
.pcard-card .lk .k::before { content:"♥ "; color:var(--c-main); font-size:9px; }
.pcard-card .lk .val { flex:1; min-width:0; height:16px; font-size:14px; line-height:16px; }
.pcard-card .bw { position:absolute; top:44px; right:0; left:0; display:flex; justify-content:center; gap:26px; font-size:19px; }
html:lang(en) .pcard-card .bw { gap:10px; font-size:14px; white-space:nowrap; }
.pcard-card .ck { position:relative; display:inline-block; width:17px; height:17px; margin-right:5px; border:2px solid #555; background:#fff; vertical-align:-2px; }
.pcard-card .ck.on::after { content:""; position:absolute; top:0; left:4px; width:6px; height:11px; border:solid var(--ink); border-width:0 3px 3px 0; transform:rotate(45deg); }
.pcard-card .stone { position:absolute; width:22px; height:22px; border-radius:50%; }
.pcard-card .stone.b { background:radial-gradient(circle at 35% 30%,#666 0%,#111 45%,#000 100%); }
.pcard-card .stone.w { background:radial-gradient(circle at 35% 30%,#fff 0%,#f2f2f2 50%,#cfcfcf 100%); box-shadow:0 1px 2px rgba(0,0,0,.3); }
.pcard-card .heart { position:absolute; color:#ff9fc7; font-size:26px; line-height:1; }
.pcard-card .lined { background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 21px,var(--c-pale) 21px,var(--c-pale) 23px); }

/* デザインの切り替え */
.pcard-layouts { display:flex; flex-wrap:wrap; gap:8px; }
.pcard-layouts button { min-height:40px; padding:6px 16px; border:1px solid var(--color-line); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-ink); font:inherit; font-weight:800; font-size:.82rem; cursor:pointer; }
.pcard-layouts button[aria-pressed="true"] { border-color:var(--color-dark); background:var(--color-dark); color:#fff; }

/* 囲碁プロフィールカード */
.pcard-card.is-igo { background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.6) 0,transparent 30%),radial-gradient(circle at 10% 90%,rgba(255,255,255,.5) 0,transparent 28%),linear-gradient(170deg,var(--c-bg2) 0%,var(--c-bg1) 50%,var(--c-bg2) 100%); }
.pcard-card .spark { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px 3px rgba(255,255,255,.9); }
.pcard-card .ig-title { left:26px; top:20px; font-family:"Hachi Maru Pop",cursive; font-size:27px; color:var(--c-main); line-height:1.3;
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,3px 4px 0 rgba(0,0,0,.1); }
.pcard-card .ig-title span { margin-left:4px; color:#ff8fbf; font-size:22px; }
.pcard-card .ig-date { right:26px; top:24px; display:flex; align-items:center; gap:4px; font-size:12px; }
.pcard-card .ig-date .v { min-width:22px; padding:2px 8px; border-radius:6px; background:#fff; color:var(--ink); font-family:"Yomogi",cursive; font-size:17px; text-align:center; }
.pcard-card .ig-photo { left:26px; top:70px; box-sizing:border-box; width:164px; height:164px; padding:8px; border-radius:6px; background:#fff; box-shadow:0 0 0 3px var(--c-soft),0 4px 10px rgba(0,0,0,.15); }
.pcard-card .ig-photo .img, .pcard-card .photo .img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-color:var(--c-pale); background-position:center; background-size:cover; color:var(--c-main); font-size:13px; text-align:center; }
.pcard-card .ig-box { position:absolute; border:3px solid #fff; border-radius:20px; background:rgba(255,255,255,.86); box-shadow:0 0 0 2px var(--c-soft); }
.pcard-card .ig-row { position:absolute; right:18px; left:18px; display:flex; align-items:baseline; gap:6px; padding-bottom:2px; border-bottom:2px dashed var(--c-soft); font-size:14px; }
.pcard-card .ig-row .k { flex:none; }
.pcard-card .ig-row .val { flex:1; min-width:0; font-size:20px; }
.pcard-card .ig-row .val.c { flex:0 1 auto; min-width:44px; text-align:center; }
.pcard-card .ig-row.is-big .k { font-size:20px; }
.pcard-card .ig-row.is-big .val { font-size:26px; }
.pcard-card .ig-list { position:absolute; top:10px; right:18px; left:18px; display:flex; flex-direction:column; }
.pcard-card .ig-li { display:flex; align-items:baseline; gap:8px; height:35px; padding-top:6px; box-sizing:border-box; border-bottom:2px dashed var(--c-soft); font-size:14px; font-weight:700; }
.pcard-card .ig-li .k { flex:none; }
.pcard-card .ig-li .val { flex:1; min-width:0; font-size:19px; font-weight:400; }
.pcard-card .ig-li .val.c { flex:0 1 auto; min-width:44px; text-align:center; }
.pcard-card .ig-li.is-bw { gap:22px; }
.pcard-card .ig-li.is-bw .k { margin-right:4px; }
/* 項目名やチェック欄は折り返さない。画像にするとき幅が 1px 未満だけ狭く写し取られる環境があり、
   「囲碁歴」の「歴」や「黒番」の「番」だけが次の行に落ちていた */
.pcard-card .k, .pcard-card .ig-row, .pcard-card .ig-li > span:not(.val), .pcard-card .bw > span { white-space:nowrap; }
.pcard-card .ig-label { position:absolute; top:10px; left:12px; display:flex; align-items:center; gap:6px; max-width:calc(100% - 24px); font-weight:700; font-size:15px; color:var(--c-main); white-space:nowrap; }
.pcard-card .ig-label.is-pill { padding:4px 14px 4px 6px; border-radius:999px; background:var(--c-main); color:#fff; }
.pcard-card .ig-label .fit { display:block; min-width:0; overflow:hidden; white-space:nowrap; }
.pcard-card .hb { display:inline-flex; flex:none; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#ffb6d3; color:#fff; font-size:13px; }
.pcard-card .ig-label.is-pill .hb { background:#fff; color:var(--c-main); }
.pcard-card .ig-lines { position:absolute; top:54px; right:16px; bottom:14px; left:16px; align-items:flex-start; justify-content:flex-start; font-size:22px; line-height:44px; text-align:left;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 42px,var(--c-soft) 42px,var(--c-soft) 44px); }

/* 棋士版（囲碁プロフィールカードの部品を使う） */
.pcard-card.is-pro { background:radial-gradient(circle at 90% 8%,rgba(255,255,255,.7) 0,transparent 26%),radial-gradient(circle at 6% 70%,rgba(255,255,255,.45) 0,transparent 26%),linear-gradient(165deg,var(--c-bg1) 0%,var(--c-bg2) 60%,var(--c-bg3) 100%); }
.pcard-card .pro-photo { height:200px; }
.pcard-card .pro-badge { left:20px; top:252px; padding:2px 12px; border-radius:999px; background:var(--c-main); color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; box-shadow:0 0 0 3px #fff; }

/* 色とハートの選択（プレビューの上） */
.pcard-look { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.pcard-heartsel { display:flex; align-items:center; gap:12px; color:var(--color-muted); font-size:.82rem; font-weight:700; }
.pcard-heartsel label { display:flex; align-items:center; gap:4px; color:var(--color-ink); font-size:.9rem; cursor:pointer; }
.pcard-card.mono { --c-main:#666; --c-soft:#cfcfcf; --c-pale:#f3f3f3; --c-bg1:#d9d9d9; --c-bg2:#ececec; --c-bg3:#f7f7f7; --ink:#333; }
.pcard-card.mono .heart { color:#bdbdbd; }
.pcard-card.mono .hb { background:#c4c4c4; }
.pcard-card.no-heart .heart, .pcard-card.no-heart .hb, .pcard-card.no-heart .ig-title span { display:none; }

/* 碁打ちプロフィールカード（usagikyouさん案） */
.pcard-card.is-igo { background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.55) 0,transparent 28%),radial-gradient(circle at 14% 92%,rgba(255,255,255,.45) 0,transparent 26%),linear-gradient(165deg,var(--c-bg1) 0%,var(--c-bg2) 45%,var(--c-bg3) 100%); }
.pcard-card .ig-edge { position:absolute; top:0; bottom:0; left:0; width:44px; background:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,.18) 70%,rgba(255,255,255,0)); }
.pcard-card.is-igo .hole { left:11px; width:20px; height:20px; }
.pcard-card.is-igo .ig-title { left:48px; top:12px; color:#fff; font-size:25px; text-shadow:0 0 1px var(--c-main),1.5px 1.5px 0 var(--c-main),-1.5px 1.5px 0 var(--c-main),1.5px -1.5px 0 var(--c-main),-1.5px -1.5px 0 var(--c-main),0 2px 6px rgba(0,0,0,.18); }
.pcard-card.is-igo .ig-date { right:22px; top:16px; }
.pcard-card.is-igo .ig-photo { left:48px; top:52px; width:156px; height:140px; transform:rotate(-2deg); }
.pcard-card.is-igo .ig-row { right:16px; left:16px; }
.pcard-card .ig-intro { position:absolute; right:16px; bottom:10px; left:16px; height:26px; font-size:18px; }
.pcard-card .ig-list.is-tight { top:4px; right:16px; left:16px; }
.pcard-card .ig-list.is-tight .ig-li { height:29px; padding-top:4px; font-size:13px; }
.pcard-card .ig-list.is-tight .ig-li .val { font-size:17px; }
.pcard-card .ig-list.is-tighter { top:4px; right:16px; left:16px; }
.pcard-card .ig-list.is-tighter .ig-li { height:25.5px; padding-top:3px; font-size:12.5px; }
.pcard-card .ig-list.is-tighter .ig-li .val { font-size:16px; }
.pcard-card .ig-list.is-tight .ig-li:last-child, .pcard-card .ig-list.is-tighter .ig-li:last-child { border-bottom:0; }
.pcard-card.is-igo .ig-lines { top:50px; bottom:10px; line-height:var(--lh,38px);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh,38px) - 2px),var(--c-soft) calc(var(--lh,38px) - 2px),var(--c-soft) var(--lh,38px)); }
.pcard-card.is-igo .ig-lines.is-free { line-height:1.5; background-image:none; }
.pcard-card .ig-box.is-accent { background:repeating-linear-gradient(-45deg,#ffe2c2 0,#ffe2c2 8px,#fff0de 8px,#fff0de 16px); box-shadow:0 0 0 2px #ffc38a; }
.pcard-card .ig-box.is-accent .ig-label { color:#e9792b; }
.pcard-card .ig-box.is-accent .hb { background:#ffb36b; }
.pcard-card.mono .ig-box.is-accent { background:repeating-linear-gradient(-45deg,#e6e6e6 0,#e6e6e6 8px,#f4f4f4 8px,#f4f4f4 16px); box-shadow:0 0 0 2px #cfcfcf; }
.pcard-card.mono .ig-box.is-accent .ig-label { color:#666; }
.pcard-card.no-heart .ig-label.is-pill { padding-left:14px; }

/* 囲碁プロフィールカードの入力欄（カードと同じ並び） */
.pcard-form fieldset.pcard-fs2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pcard-field { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pcard-field .pcard-note { margin:0; font-weight:700; }
.pcard-radios.is-head { flex-wrap:nowrap; gap:4px 10px; height:1.2rem; align-items:center; white-space:nowrap; }
.pcard-radios.is-head input { margin:0; }
.pcard-radios.is-head label { gap:3px; color:var(--color-muted); font-size:.78rem; font-weight:700; }
.pcard-field .pcard-radios:not(.is-head) { min-height:38px; align-items:center; }
.pcard-hint { color:var(--color-muted); font-size:.72rem; font-weight:400; }
@media (max-width:520px) {
  .pcard-form fieldset.pcard-fs2 { grid-template-columns:minmax(0,1fr); }
}

/* 書き込んだ文字は見出しと同じ太めの丸ゴシック（くせ字は読みにくく、可愛すぎるという声から） */
.pcard-card.is-igo .val, .pcard-card.is-igo .ig-date .v,
.pcard-card.is-pro .val, .pcard-card.is-pro .ig-date .v { font-family:"Zen Maru Gothic",sans-serif; font-weight:700; }