/* =====================================================================
   GOKUDO — Support 支援 页样式。1:1 还原设计稿 support.html。
   仅本页专属:页头 / 联系卡片 / FAQ 手风琴 / 信息栏 / 联系表单 / toast。
   banner / footer / reveal / seclabel / wrap / 字体变量 来自 site.css + style.css。
   仅在 Support 页加载(见 functions.php,slug=support)。
   ===================================================================== */

/* ============ PAGE HEAD ============ */
.pagehead{border-bottom:1px solid var(--line);background:var(--bg);padding:70px 0 46px}
.ph-crumb{display:flex;align-items:center;gap:10px;color:var(--faint);margin-bottom:30px}
.ph-crumb a{color:var(--faint);transition:color .2s}
.ph-crumb a:hover{color:var(--accent)}
.ph-crumb .sep{color:var(--line)}
.ph-crumb .cur{color:var(--ink)}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ph-title{display:flex;align-items:flex-end;gap:22px}
.ph-title h1{font-family:var(--display);font-weight:900;font-size:clamp(54px,7.4vw,112px);line-height:.82;text-transform:uppercase;letter-spacing:-.02em}
.ph-title .han{font-family:var(--han);font-size:clamp(30px,4vw,54px);color:var(--accent);line-height:1;margin-bottom:6px}
.ph-meta{text-align:right;color:var(--muted)}
.ph-meta .lead{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)}
.ph-sub{margin-top:34px;color:var(--faint);font-size:15px;line-height:1.6;max-width:560px}

/* ============ CONTACT CARDS ============ */
.contact{padding:64px 0 40px;background:var(--bg)}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ccard{background:var(--bg);padding:40px 34px 36px;display:flex;flex-direction:column;transition:background .3s;position:relative}
.ccard:hover{background:var(--bg2)}
.ccard::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--accent);transition:width .5s ease}
.ccard:hover::before{width:100%}
.ccard .jp{font-family:var(--han);font-size:16px;line-height:1;color:var(--faint);letter-spacing:.12em;margin-bottom:18px;transition:color .3s}
.ccard:hover .jp{color:var(--accent)}
.ccard h3{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.2vw,44px);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:16px}
.ccard p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:22px;flex:1}
.ccard a.mail{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px;align-self:flex-start;transition:.2s}
.ccard a.mail:hover{color:var(--ink);border-color:var(--ink)}
.ccard .hours{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:14px}

/* ============ FAQ ============ */
.faq{padding:70px 0 30px;background:var(--bg)}
.faq-grid{display:grid;grid-template-columns:.42fr 1fr;gap:60px;align-items:start}
.faq-aside h2{font-family:var(--display);font-weight:900;font-size:clamp(38px,4.4vw,64px);line-height:.9;text-transform:uppercase;letter-spacing:-.015em}
.faq-aside h2 em{font-style:normal;color:var(--accent)}
.faq-aside .han{font-family:var(--han);font-size:34px;color:var(--accent);margin:18px 0 18px;display:block;letter-spacing:.1em}
.faq-aside p{color:var(--muted);font-size:15px;line-height:1.7;max-width:300px}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:22px;
	padding:26px 0;color:var(--ink);transition:color .2s}
.qa button:hover{color:var(--accent)}
.qa .qnum{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);flex:none;width:30px}
.qa .qtext{font-family:var(--display);font-size:clamp(20px,2vw,27px);text-transform:uppercase;letter-spacing:.005em;line-height:1;flex:1}
.qa .qmark{flex:none;width:22px;height:22px;position:relative}
.qa .qmark::before,.qa .qmark::after{content:"";position:absolute;background:currentColor;transition:transform .3s}
.qa .qmark::before{left:0;right:0;top:10px;height:2px}
.qa .qmark::after{top:0;bottom:0;left:10px;width:2px}
.qa.open .qmark::after{transform:scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.qa .ans-inner{padding:0 0 28px 52px;color:var(--muted);font-size:16px;line-height:1.75;max-width:680px}
.qa .ans-inner strong{color:var(--ink);font-weight:600}
.qa .ans-inner .han{font-family:var(--han);color:var(--accent)}
.qa .ans-inner p{margin-bottom:14px}
.qa .ans-inner p:last-child{margin-bottom:0}
.faq-empty{color:var(--faint);font-size:15px;line-height:1.7;padding:26px 0}

/* ============ INFO COLUMNS ============ */
.info{padding:70px 0 30px;background:var(--bg2);border-top:1px solid var(--line)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.icol .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.icol .n .han{font-family:var(--han);color:var(--faint);letter-spacing:.1em;font-size:13px}
.icol h3{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.icol p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:14px}
.icol p strong{color:var(--ink);font-weight:600}

/* ============ CONTACT FORM ============ */
.reach{padding:90px 0;background:var(--bg2)}
.reach-in{border:1px solid var(--line);background:var(--ink);color:#fff;display:grid;grid-template-columns:.85fr 1fr;overflow:hidden}
.reach-left{padding:clamp(36px,4vw,58px);position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.1)}
.reach-left .glyph{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--display);font-size:38vh;line-height:.8;color:rgba(255,255,255,.05);pointer-events:none}
.reach-left .mk{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;position:relative;z-index:2}
.reach-left h2{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.6vw,54px);line-height:.92;text-transform:uppercase;letter-spacing:-.01em;position:relative;z-index:2}
.reach-left h2 em{font-style:normal;color:var(--accent)}
.reach-left p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.7;margin-top:18px;max-width:340px;position:relative;z-index:2}
.reach-form{padding:clamp(36px,4vw,52px);display:flex;flex-direction:column;gap:16px;background:#fff;color:var(--ink)}
.reach-form .frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reach-form label{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.reach-form input,.reach-form textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:14px 14px;font-family:var(--body);font-size:14px;outline:none;transition:border-color .2s}
.reach-form input:focus,.reach-form textarea:focus{border-color:var(--accent)}
.reach-form textarea{resize:vertical;min-height:120px}
.reach-form button{margin-top:6px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:18px;font-weight:700;transition:.2s}
.reach-form button:hover{background:var(--ink)}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(calc(100% + 40px));z-index:400;
	background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	padding:15px 24px;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s;font-weight:700;opacity:0;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
	.ccards{grid-template-columns:1fr}
	.faq-grid{grid-template-columns:1fr;gap:36px}
	.info-grid{grid-template-columns:1fr;gap:40px}
	.reach-in{grid-template-columns:1fr}
	.reach-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media(max-width:560px){
	.ph-meta{text-align:left}
	.qa .ans-inner{padding-left:0}
	.reach-form .frow2{grid-template-columns:1fr}
}