/* A small reading app, using the approved watercolor artwork and existing card motion. */
.eyebrow { font-family:Georgia,'Yu Mincho',serif; color:#79607d; font-size:.75rem; letter-spacing:.12em; }
.page-nav { gap:1.5rem; }
.hero-intro { max-width:28rem; }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.6rem 1.1rem; border:1px solid #ad94b1; border-radius:24px; background:#fffcf7; text-decoration:none; color:#51415f; font-size:.88rem; }
.secondary-button:hover { background:#f0e6f1; }
.result { padding-top:0; }
.pair-cover { padding:.4rem .5rem 1.15rem; }
.pair-cover-label { font-size:.76rem; }
.pair-cover h2 { font-size:clamp(1.3rem,2.5vw,1.85rem); letter-spacing:.06em; }
.pair-identities { margin:.45rem 0 .7rem; gap:1.4rem; }
.result-intro { font-size:.9rem; margin:.55rem auto 0; max-width:39rem; }
.unknown-result { margin:.6rem auto 0; color:#55506e; }
.journey-nav { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; max-width:40rem; margin:0 auto 1.2rem; background:var(--cream); }
.type-picker .unknown-button { margin:0 0 1rem; }
.experience-view [tabindex="-1"] { scroll-margin-top:5.5rem; }
.journey-nav button { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:.6rem; border:0; border-bottom:2px solid #ddd0db; background:none; min-height:52px; font-size:.85rem; color:#51445e; }
.journey-nav button span { font-family:Georgia,serif; font-size:.9rem; color:#745b7e; }
.journey-nav [aria-current] { border-bottom-color:#795b8d; font-weight:700; background:#e9deeb75; }
.journey-nav button:disabled { cursor:default; color:#737077; }
.journey-nav button:disabled span { color:#737077; }
.app-paper { position:relative; border:1px solid #d4c0ad; border-radius:15px; background:radial-gradient(ellipse at 0 0,#ede2ee65,transparent 45%),linear-gradient(115deg,#fffdf8,#fcf6ee); box-shadow:0 10px 34px #4e36550b; padding:2rem; }
.app-paper::before { content:'✧'; position:absolute; color:#ac8751; background:var(--cream); padding:0 .7rem; top:-.9rem; left:calc(50% - 1rem); }
.reading-spread { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:2rem; align-items:center; }
.card-desk { min-width:0; }
.tarot-stage { gap:.7rem; padding:.7rem .3rem 1rem; margin:0 auto; width:100%; }
.card-title { font-size:.78rem; letter-spacing:0; }
.card-subtitle { font-size:.62rem; letter-spacing:0; margin-top:.3rem; }
.card-caption { left:5%; right:5%; }
.card-touch { transition:transform 180ms ease-out; }
.tarot-card.is-selected .card-touch { outline:2px solid #a07d9e; outline-offset:5px; border-radius:6px; }
.tarot-card.is-selected::after { content:'読んでいるカード'; display:block; font-size:.65rem; text-align:center; color:#6e526f; margin-top:.65rem; }
.tarot-card:not(.is-selected)::after { content:''; display:block; height:1.8rem; }
.card-touch:disabled { cursor:default; }
.card-touch:focus-visible { outline:3px solid #79608e; }
.reading-panel { padding:.3rem 0; min-width:0; }
.reading-fact { display:inline-block; margin:.65rem 0 .8rem; padding:.15rem .6rem; border-left:2px solid #ab8c68; color:#645266; font-size:.76rem; background:#f2e7e65c; }
.reading-panel h3 { font-family:'Yu Mincho',serif; font-size:1.5rem; line-height:1.65; font-weight:500; letter-spacing:.035em; }
#reading-message { margin-top:.65rem; font-size:.9rem; line-height:1.85; }
.question-slip { position:relative; margin:1rem 0 .65rem; border-top:1px solid #d4c2c9; border-bottom:1px solid #d4c2c9; padding:.75rem 0; }
.question-slip > p:first-child { font-size:.7rem; color:#685a70; }
.question-slip .reading-prompt { margin:.35rem 0 0; font-family:'Yu Mincho',serif; font-size:1.05rem; line-height:1.85; }
.reading-origin { font-size:.7rem; color:#625a6e; line-height:1.7; margin-top:.65rem; }
.reading-actions { display:flex; flex-direction:column; align-items:stretch; gap:.6rem; margin-top:1.1rem; }
.reading-actions .primary-button { font-size:.84rem; letter-spacing:.025em; min-height:50px; }
.reading-actions .secondary-button { min-height:44px; }
.reveal-controls { min-height:38px; margin-top:.1rem; padding:0; }
#reveal-status { font-size:.69rem; }
.card-reading-note { text-align:center; font-size:.72rem; max-width:43rem; color:#655d73; margin:1.1rem auto 0; }
.comparison-section { margin:1rem 0 0; border-top:1px solid #d9cccd; }
summary { cursor:pointer; }
.comparison-section > summary { padding:.8rem .2rem; min-height:48px; font-size:.82rem; color:#655571; }
.comparison-note { font-size:.8rem; margin:.5rem 0 1rem; }
.pair-highlights { gap:1rem; }
.pair-highlight { padding:.7rem; }
.pair-highlight h3 { font-size:.85rem; }
.pair-highlight p { font-size:.8rem; }
.axis-title { font-size:1.05rem; }
.view-heading { text-align:center; margin:0 auto 1.65rem; }
.view-heading h3 { font-family:'Yu Mincho',serif; font-weight:500; font-size:1.8rem; letter-spacing:.055em; line-height:1.55; margin:.45rem 0 .6rem; }
.view-heading > p:last-child { font-size:.87rem; }
.scene-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2rem; align-items:start; }
.scene-choices { display:flex; flex-direction:column; gap:.7rem; }
.scene-choices button { display:grid; grid-template-columns:3.1rem minmax(0,1fr) 1rem; align-items:center; text-align:left; gap:.7rem; padding:.7rem .9rem; border:1px solid #d6c5cf; border-radius:7px; background:#fffcf8; min-height:88px; }
.scene-choices button:nth-child(2) .scene-icon { background:#ebe8f0; color:#807099; }
.scene-choices button:nth-child(3) .scene-icon { background:#f7e6ea; color:#b3768b; }
.scene-choices button:nth-child(4) .scene-icon { background:#e8ece5; color:#7d8c78; }
.scene-choices button:hover,.scene-choices button[aria-pressed=true] { border-color:#8f6b9d; background:#f0e7f2; box-shadow:inset 3px 0 #8f6b9d; }
.scene-icon { display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; background:#f3e9dd; border-radius:50%; font-family:Georgia,serif; font-size:1.65rem; color:#a88456; }
.scene-choices strong { display:block; font-family:'Yu Mincho',serif; font-size:1.04rem; font-weight:600; }
.scene-choices small { display:block; font-size:.73rem; margin-top:.3rem; color:#615c70; }
.scene-arrow { color:#806687; }
.question-stage { border:0; border-radius:0; background:#efe6ee75; padding:1.5rem; margin:0; min-height:23rem; }
.scene-empty { text-align:center; padding:2rem 0; }
.scene-empty svg { width:3.6rem; height:3.6rem; color:#b29477; margin-bottom:1rem; }
.scene-empty h4 { font-family:'Yu Mincho',serif; font-size:1.25rem; font-weight:500; }
.scene-empty p { font-size:.84rem; margin-top:.75rem; }
.question-prompt { font-size:.73rem; color:#705d7b; }
#scene-question { font-family:'Yu Mincho',serif; font-size:1.35rem; line-height:1.7; margin:1rem 0; font-weight:500; }
.scene-answers { display:flex; flex-direction:column; gap:.7rem; }
.scene-answers button { min-height:62px; border:1px solid #9e81ad; border-radius:7px; background:#fffcf9; text-align:left; padding:.8rem 1rem; font-size:.95rem; }
.scene-answers button::after { content:'→'; float:right; padding-left:.5rem; }
.scene-answers button:hover,.scene-answers button[aria-pressed=true] { background:#e6d8eb; color:#40354d; }
.self-answer-note { font-size:.73rem; margin-top:1rem; line-height:1.8; }
#scene-view > .quiet-button { margin-top:1rem; }
.conversation-answer { background:none; border:0; padding:0; margin:0; }
.takeaway-spread { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:2.3rem; align-items:start; }
.message-letter { position:relative; background:#fffdf8; border:1px solid #cdb991; box-shadow:0 7px 18px #725e6910; padding:1.7rem; }
.message-letter::before { content:'✧'; display:block; font-size:1.1rem; color:#9d7b4b; text-align:center; }
.letter-context { display:flex; flex-wrap:wrap; gap:.35rem .65rem; font-size:.73rem; color:#6b5d75; margin:.5rem 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid #e1d7cf; }
.letter-salutation { font-size:.75rem; color:#6e5e73; }
.conversation-line { font-family:'Yu Mincho',serif; font-size:1.22rem; line-height:2; margin:.7rem 0 1.2rem; padding:0; border:0; background:none; }
.copy-controls { display:flex; flex-direction:column; gap:.35rem; }
.copy-controls .primary-button { font-size:.86rem; }
#copy-status { font-size:.73rem; color:#655572; min-height:1.4rem; }
.letter-signature { text-align:center; font-size:.65rem; color:#756477; }
.use-note { padding:.7rem 0; }
.use-note h4 { font-family:'Yu Mincho',serif; font-size:1.2rem; font-weight:500; }
.takeaway-steps { padding:0; margin:1.2rem 0; list-style:none; counter-reset:use; }
.takeaway-steps li { position:relative; padding:0 0 1.2rem 2.4rem; counter-increment:use; border-left:1px solid #d3c4d5; margin-left:.65rem; }
.takeaway-steps li:last-child { border:0; padding-bottom:0; }
.takeaway-steps li::before { content:counter(use); position:absolute; left:-.8rem; top:0; width:1.6rem; height:1.6rem; border-radius:50%; text-align:center; background:#ece2ed; font-family:Georgia,serif; color:#73597e; font-size:.85rem; }
.takeaway-steps strong { font-size:.87rem; font-weight:600; }
.takeaway-steps p { font-size:.87rem; line-height:1.85; margin-top:.25rem; }
.conversation-followup { margin:1rem 0 0; padding:.5rem 0; border-top:1px solid #d9cbce; border-bottom:1px solid #d9cbce; }
.conversation-followup summary { font-size:.8rem; min-height:38px; display:list-item; }
.conversation-followup p { font-size:.8rem; }
.ask-note { padding:.8rem 1rem; border-left:2px solid #aa8d70; background:#f0e7e866; }
.ask-note h5 { font-size:.76rem; font-weight:600; }
.ask-note p { font-size:.9rem; line-height:1.85; margin-top:.45rem; }
.takeaway-footer { display:flex; flex-direction:column; align-items:center; text-align:center; margin:1.6rem auto 0; gap:.75rem; }
.takeaway-footer > span { color:#a58457; }
.takeaway-footer p { font-family:'Yu Mincho',serif; font-size:.93rem; }
.result-tools { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.3rem; margin:1rem 0 2rem; }
.experience-guide { text-align:center; padding:3.7rem 0; }
.guide-heading h2 { font-family:'Yu Mincho',serif; font-weight:500; font-size:2rem; line-height:1.7; letter-spacing:.06em; margin:.6rem 0 .8rem; }
.guide-heading > p:last-child { font-size:.91rem; }
.guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:2.5rem 0 1.8rem; gap:2rem; }
.guide-steps li { position:relative; padding:0 1rem; }
.guide-number { display:block; font-family:Georgia,serif; font-size:.86rem; color:#8b718e; letter-spacing:.08em; margin-bottom:1.2rem; }
.guide-steps h3 { font-family:'Yu Mincho',serif; font-size:1.2rem; font-weight:500; margin:.8rem 0 .6rem; }
.guide-steps p { font-size:.84rem; line-height:1.85; }
.guide-steps img { width:70px; height:105px; object-fit:cover; border:1px solid #bc986a; border-radius:4px; transform:rotate(-7deg); box-shadow:0 5px 8px #8b778c20; }
.guide-dialog { display:flex; flex-direction:column; justify-content:center; align-items:start; gap:.7rem; min-height:105px; max-width:220px; margin:auto; }
.guide-dialog span { display:block; font-family:'Yu Mincho',serif; background:#efe3ef; border-radius:15px 15px 15px 0; font-size:.76rem; padding:.5rem .85rem; }
.guide-dialog span:last-child { align-self:end; border-radius:15px 15px 0 15px; background:#eee8dc; }
.guide-envelope { position:relative; width:140px; height:88px; display:flex; align-items:center; justify-content:center; margin:16px auto 0; border:1px solid #cdb995; font-size:1.35rem; background:linear-gradient(145deg,#fcf3e9,#f0e3eb); color:#9b7d91; transform:rotate(5deg); }
.guide-envelope::after { content:''; position:absolute; left:19%; top:-44px; width:62%; height:70px; border:1px solid #cdb995; border-top:0; border-left:0; transform:rotate(45deg); }
.reading-help { display:grid; grid-template-columns:16rem minmax(0,1fr); gap:2.8rem; padding:2.8rem 0 3rem; border-top:1px solid #d7c7be; }
.help-heading > span { color:#aa8b6b; font-size:2.3rem; }
.help-heading h2 { font-family:'Yu Mincho',serif; font-size:1.5rem; font-weight:500; margin:.3rem 0 .7rem; }
.help-heading p { font-size:.85rem; }
.help-disclosures > details { border-bottom:1px solid #daccc8; }
.help-disclosures > details > summary { min-height:55px; padding:.8rem .2rem; font-size:.86rem; }
.help-disclosures > details > p { font-size:.84rem; line-height:1.9; padding:.35rem .6rem .8rem; }
.axis-glossary { margin:.5rem .6rem 1rem; font-size:.84rem; }
.axis-glossary > div { padding:.8rem 0; border-bottom:1px solid #e1d6cd; }
.axis-glossary dt { font-weight:600; }
.axis-glossary dd { margin:.5rem 0; line-height:1.85; }
.directory-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.directory-group h3 { font-size:.86rem; }
.directory-type { padding:.45rem .5rem; }
.preview-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; text-align:center; font-family:'Yu Mincho',serif; font-size:.87rem; padding:1.3rem 0; }
.preview-footer span { font-size:.72rem; }
@media(max-width:960px) {
  .reading-spread { grid-template-columns:1fr; gap:1.1rem; }
  .card-desk { width:min(470px,100%); margin:auto; }
  .reading-panel { border-top:1px solid #d6c5cb; padding-top:1rem; }
  .card-title { font-size:.94rem; }
  .card-subtitle { font-size:.68rem; }
}
@media(max-width:850px) {
  .app-paper { padding:1.6rem; }
  .scene-workspace,.takeaway-spread { gap:1.5rem; }
  .scene-choices button { grid-template-columns:2.5rem minmax(0,1fr) 1rem; gap:.5rem; padding:.6rem; }
  .scene-icon { width:2.4rem; height:2.4rem; }
  .question-stage { padding:1.2rem; }
  .reading-help { grid-template-columns:13rem minmax(0,1fr); gap:1.5rem; }
}
@media(max-width:620px) {
  .content-width { width:calc(100% - 2rem); }
  .page-nav { gap:.8rem; }
  .journey-nav { gap:0; margin-bottom:1rem; }
  .journey-nav button { flex-direction:column; gap:.1rem; padding:.5rem .1rem; font-size:.73rem; }
  .journey-nav button span { font-size:.72rem; }
  .pair-cover { padding:0 .3rem 1rem; }
  .pair-identities { gap:.55rem; }
  .pair-person { flex-direction:column; align-items:center; gap:.1rem; }
  .pair-person strong { font-size:1.18rem; }
  .person-name,.person-role { font-size:.73rem; }
  .pair-cover h2 { font-size:1.32rem; }
  .result-intro { font-size:.84rem; }
  .app-paper { padding:20px 16px; }
  .reading-spread,.scene-workspace,.takeaway-spread { grid-template-columns:1fr; gap:1.2rem; }
  .tarot-stage { max-width:330px; gap:.6rem; padding:.4rem .2rem .6rem; }
  .card-title { font-size:clamp(.6rem,2.35vw,.78rem); }
  .card-subtitle { font-size:clamp(.5rem,1.8vw,.6rem); }
  .card-touch { min-height:0; }
  .tarot-card.is-selected::after { font-size:.55rem; margin-top:.5rem; }
  .tarot-card:not(.is-selected)::after { height:1.4rem; }
  .card-reading-note { font-size:.7rem; text-align:left; }
  .reading-panel { border-top:1px solid #d6c5cb; padding-top:.85rem; }
  .reading-panel h3 { font-size:1.35rem; }
  #reading-message { font-size:.92rem; }
  .reading-origin { font-size:.72rem; }
  .reading-actions .primary-button { font-size:.89rem; }
  .view-heading { margin-bottom:1.3rem; }
  .view-heading h3 { font-size:1.5rem; }
  .scene-choices { gap:.55rem; }
  .scene-choices button { min-height:80px; padding:10px 12px; grid-template-columns:40px minmax(0,1fr) 16px; gap:8px; }
  .scene-icon { width:40px; height:40px; }
  .scene-choices strong { font-size:1rem; }
  .scene-choices small { font-size:.74rem; }
  .question-stage { min-height:0; padding:20px; }
  .scene-empty { padding:1rem 0; }
  .scene-empty p { font-size:.84rem; }
  #scene-question { font-size:1.28rem; }
  .scene-answers button { font-size:.95rem; }
  .message-letter { padding:20px; }
  .conversation-line { font-size:1.2rem; }
  .takeaway-steps p { font-size:.94rem; }
  .copy-controls .primary-button { font-size:.92rem; }
  .use-note { padding:.5rem .2rem; }
  .takeaway-footer p { font-size:.87rem; }
  .experience-guide { padding:2.4rem 0; }
  .guide-heading h2 { font-size:1.65rem; }
  .guide-steps { grid-template-columns:1fr; gap:2rem; margin:2rem 0; }
  .guide-steps li { display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.3rem 1.1rem; align-items:center; text-align:left; padding:0 .5rem; }
  .guide-number { margin:0; grid-column:2; align-self:end; }
  .guide-steps img,.guide-dialog,.guide-envelope { grid-row:1/4; grid-column:1; margin:auto; }
  .guide-steps h3 { grid-column:2; font-size:1.15rem; margin:.3rem 0; }
  .guide-steps p { grid-column:2; font-size:.84rem; }
  .guide-steps img { width:60px; height:90px; }
  .guide-dialog { width:104px; gap:.4rem; }
  .guide-dialog span { font-size:.65rem; padding:.5rem; }
  .guide-envelope { width:90px; height:70px; }
  .guide-envelope::after { top:-25px; height:42px; }
  .reading-help { grid-template-columns:1fr; gap:1rem; padding:2rem 0; }
  .help-heading { text-align:center; }
  .help-heading > span { font-size:1.8rem; }
  .help-heading h2 { font-size:1.4rem; }
  .help-disclosures > details > summary { font-size:.9rem; }
  .help-disclosures > details > p,.axis-glossary { font-size:.9rem; }
  .directory-groups { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .card-touch { transition:none; } }

/* WordPress integration: this dedicated page only. */
body.hdy-mbti-tarot-page{font-weight:400}
.hdy-mbti-tarot.wp-block-group,.hdy-mbti-tarot>.wp-block-group__inner-container{margin:0;padding:0;max-width:none}
body.admin-bar.hdy-mbti-tarot-page .journey-nav{top:32px}
@media(max-width:782px){body.admin-bar.hdy-mbti-tarot-page .journey-nav{top:46px}}
@media(max-width:600px){body.admin-bar.hdy-mbti-tarot-page .journey-nav{top:0}}