/* 이견의 이슈 탐색: 한 화면에 한 질문씩 읽는 세로형 피드 */
body.igeon-home{background:#e9e7df;color:#1c261e}
body.igeon-home .site-header{top:0}
body.igeon-home .site-header .header-inner{margin-top:0;border:0;border-bottom:2px solid #1c261e;border-radius:0;background:#e9e7df;box-shadow:none}
body.igeon-home .site-header .brand,body.igeon-home .site-header nav a{color:#1c261e}
body.igeon-home .site-header .brand-mark{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:0;background:#1c261e;color:#f0ea81;font-size:18px;line-height:1;box-shadow:none;transform:none}
body.igeon-home .site-header .brand-mark::before,body.igeon-home .site-header .brand-mark::after{content:none}
body.igeon-home .site-header nav .nav-join{border-radius:3px;background:#1c261e;color:#f7f1dd!important;box-shadow:none}
body.igeon-home main.shell{width:100%;max-width:none}
body.igeon-home .igeon-home-page{padding-top:0}
body.igeon-home .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.reel-layout{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,590px) minmax(170px,1fr);align-items:center;gap:clamp(25px,4vw,65px);max-width:1460px;margin:0 auto;padding:26px clamp(25px,4vw,64px) 0}
.reel-intro,.reel-side{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;color:#1c261e}
.reel-intro-tag{align-self:flex-start;padding:6px 9px;background:#1c261e;color:#e9e7df;font:700 11px "Igeon Display",sans-serif;letter-spacing:.08em}
.reel-intro>p{margin:30px 0 22px;font-size:clamp(39px,4.5vw,58px);font-weight:860;letter-spacing:-.09em;line-height:1.08;word-break:keep-all}
.reel-intro-note{max-width:18ch;font-size:15px;font-weight:550;line-height:1.65;word-break:keep-all}
.reel-intro-rule{width:46px;height:5px;margin:42px 0 15px;background:#1c261e}
.reel-intro-foot{max-width:22ch;font-size:12px;line-height:1.55}
.reel-shell{position:relative;height:min(780px,calc(100dvh - 112px));min-height:600px;padding:7px;border-radius:12px;background:#1c261e}
.reel-viewport{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;touch-action:pan-y;scrollbar-width:none;border-radius:6px}
.reel-viewport::-webkit-scrollbar{display:none}
.reel-progress{position:absolute;z-index:2;top:11px;left:20px;right:20px;display:grid;grid-template-columns:repeat(var(--reel-count),minmax(0,1fr));gap:4px}
.reel-progress button{position:relative;min-width:0;height:22px;padding:0;border:0;background:transparent;cursor:pointer}
.reel-progress button span{position:absolute;top:7px;left:0;right:0;height:3px;background:rgba(255,255,255,.38);transition:background .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.reel-progress button[aria-current="step"] span{background:#fff;transform:scaleY(1.55)}
.reel-progress button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.reel-card{--bg:#f0ea81;--ink:#19251c;--muted:#465446;--panel:#dae1a4;--panel-b:#f6efbc;--rule:#697c55;--accent:#ed6448;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:14px;box-sizing:border-box;height:100%;min-height:100%;padding:49px clamp(25px,4.4vw,45px) 27px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--bg);color:var(--ink)}
.reel-card.tone-ink{--bg:#1b3030;--ink:#f7f1df;--muted:#bfcbc0;--panel:#2b4945;--panel-b:#334c47;--rule:#82978a;--accent:#dcfa76}
.reel-card.tone-coral{--bg:#eb7358;--ink:#271d1b;--muted:#513831;--panel:#f5b494;--panel-b:#f8d4b3;--rule:#9c493b;--accent:#f9edbb}
.reel-card:before{content:attr(data-reel-number);position:absolute;z-index:-1;top:-.33em;right:-.04em;color:var(--ink);opacity:.045;font-family:"Igeon Display",sans-serif;font-size:clamp(280px,27vw,410px);font-weight:700;line-height:1;pointer-events:none}
.reel-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:11px;border-bottom:2px solid var(--ink);font-family:"Igeon Display","Noto Sans KR Variable",sans-serif;font-size:11px;font-weight:760;letter-spacing:.04em}
.reel-card-top span:last-child{font-family:"Noto Sans KR Variable",sans-serif;letter-spacing:-.02em}
.reel-question{max-width:100%}
.reel-question>p:first-child{display:inline-block;margin:0 0 15px;padding:6px 9px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:760;letter-spacing:.01em}
.reel-question h2{display:-webkit-box;overflow:hidden;max-width:12ch;margin:0;font-size:clamp(40px,4.4vw,64px);font-weight:860;line-height:1.12;letter-spacing:-.075em;word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.reel-question h2 a{color:inherit;text-decoration:none}
.reel-question h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.reel-context{display:-webkit-box;overflow:hidden;max-width:45ch;margin:16px 0 0;color:var(--muted);font-size:14px;font-weight:550;line-height:1.63;word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.reel-choice-stack{display:grid;gap:8px}
.reel-choice{display:grid;grid-template-columns:minmax(0,1fr) 25px;align-items:center;gap:2px 10px;min-height:77px;padding:11px 16px;border-left:5px solid var(--accent);background:var(--panel);color:var(--ink);text-decoration:none!important;transition:transform .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1)}
.reel-choice:nth-child(2){background:var(--panel-b)}
.reel-choice:hover{transform:translateX(5px);color:var(--ink)}
.reel-choice{width:100%;border-top:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;cursor:pointer}
.reel-choice[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:-2px}
.reel-choice:focus-visible,.reel-vote-meta button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.reel-choice-label{grid-column:1;font-size:11px;font-weight:800;letter-spacing:.01em}
.reel-choice strong{display:-webkit-box;grid-column:1;overflow:hidden;font-size:13px;font-weight:630;line-height:1.35;word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.reel-choice-arrow{grid-column:2;grid-row:1/3;justify-self:end;font-size:22px;font-weight:350}
.reel-swipe-hint{align-self:flex-end;margin:0;color:var(--muted);font-size:11px;font-weight:760}
.reel-result[hidden]{display:none}
.reel-result{flex:none;padding:9px 0 7px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.reel-result-tally{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.reel-result-tally span{display:inline-flex;align-items:baseline;gap:7px;font-size:11px;font-weight:780;white-space:nowrap}
.reel-result-tally strong{font-family:"Igeon Display","Noto Sans KR Variable",sans-serif;font-size:25px;font-weight:800;letter-spacing:-.065em;line-height:1}
.reel-result-track{display:flex;width:100%;height:13px;overflow:hidden;margin-top:7px;background:var(--panel)}
.reel-result-track span{display:block;flex:none;height:100%;transform-origin:left center}
.reel-result-fill-a{background:var(--ink)}
.reel-result-track .reel-result-fill-b{background:var(--accent);transform-origin:right center}
.reel-result-note{margin:5px 0 0;color:var(--muted);font-size:10px;font-weight:660;line-height:1.2}
.reel-vote-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px;color:var(--muted)}
.reel-vote-meta button{flex:none;padding:3px 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--ink);font:760 11px "Noto Sans KR Variable",sans-serif;cursor:pointer}
.reel-vote-meta button[aria-pressed="true"]{padding:4px 6px;background:var(--ink);color:var(--bg)}
.reel-vote-meta p{margin:0;text-align:right;font-size:11px;font-weight:730;line-height:1.3}
.reel-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reel-write{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;min-height:49px;padding:5px 6px 5px 17px;background:var(--ink);color:var(--bg)!important;font-size:13px;font-weight:800;text-decoration:none!important;white-space:nowrap;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.reel-write:hover{transform:translateY(-3px)}
.reel-write span{display:grid;place-items:center;width:36px;height:36px;background:var(--bg);color:var(--ink);font-size:18px;font-weight:450}
.reel-secondary{display:flex;align-items:center;gap:6px}
.reel-secondary button{min-height:44px;padding:8px 9px;border:0;background:transparent;color:var(--ink);font:720 12px "Noto Sans KR Variable",sans-serif;cursor:pointer;white-space:nowrap}
.reel-secondary button:hover{text-decoration:underline;text-underline-offset:4px}
.reel-secondary a{display:inline-flex;align-items:center;min-height:44px;padding:8px 9px;color:var(--ink);font-size:12px;font-weight:720;text-decoration:none}
.reel-secondary a:hover{text-decoration:underline;text-underline-offset:4px}
.reel-side{align-items:flex-start}
.reel-side-count{font:750 22px "Igeon Display",sans-serif;letter-spacing:-.04em}
.reel-side>p{margin:34px 0 12px;font-size:clamp(26px,3vw,43px);font-weight:830;letter-spacing:-.07em;line-height:1.2}
.reel-side>span:not(.reel-side-count){font-size:13px;line-height:1.6}
.reel-side-controls{display:flex;gap:8px;margin-top:36px}
.reel-side-controls button{width:48px;height:48px;border:2px solid #1c261e;border-radius:0;background:transparent;color:#1c261e;font-size:22px;cursor:pointer}
.reel-side-controls button:hover{background:#1c261e;color:#e9e7df}
.reel-side>a{margin-top:22px;color:#1c261e;font-size:12px;font-weight:760;text-decoration:underline;text-underline-offset:4px}

body.igeon-home .igeon-issues{width:min(920px,calc(100% - 40px));margin:112px auto 0;scroll-margin-top:26px}
body.igeon-home .igeon-section-head{padding-bottom:17px;border-bottom:3px solid #1c261e}
body.igeon-home .igeon-section-head h2{color:#1c261e}
body.igeon-home .igeon-explorer{padding:10px 0;border-radius:0;background:transparent;box-shadow:none}
body.igeon-home .igeon-issue-list{gap:0}
body.igeon-home .igeon-issue-card{grid-template-columns:45px minmax(0,1fr) 44px;gap:15px;padding:24px 3px;border:0;border-bottom:1px solid #aab0a1;border-radius:0;background:transparent;box-shadow:none}
body.igeon-home .igeon-issue-card:hover{transform:none;box-shadow:none}
body.igeon-home .issue-card-index{color:#485b45}
body.igeon-home .issue-card-content h3{color:#1c261e}
body.igeon-home .issue-card-arrow{border-radius:0;background:#1c261e;color:#fff}
body.igeon-home .igeon-invite{width:min(920px,calc(100% - 40px));margin:100px auto 0;border-radius:0;background:#1c261e;box-shadow:none}
body.igeon-home .igeon-invite>.igeon-primary-link{border-radius:0}

@media(max-width:1120px){
  .reel-layout{grid-template-columns:minmax(120px,.7fr) minmax(0,570px) minmax(130px,.7fr);gap:20px;padding-inline:22px}
  .reel-intro>p{font-size:clamp(34px,4vw,52px)}
}
@media(max-width:820px){
  .reel-intro,.reel-side{display:none}
  .reel-layout{display:block;width:min(590px,100%);padding:0;margin:auto}
  .reel-shell{height:calc(100dvh - 77px);min-height:0;border:0;border-radius:0;padding:0}
  .reel-viewport{border-radius:0}
  .reel-progress{top:3px;left:20px;right:20px}
  .reel-card{padding:43px 25px max(17px,env(safe-area-inset-bottom))}
  .reel-question h2{font-size:clamp(34px,8.8vw,50px)}
}
@media(max-width:600px){
  body.igeon-home .site-header .header-inner{min-height:58px;padding:0 15px}
  body.igeon-home .site-header nav{gap:8px}
  body.igeon-home .site-header nav .nav-join{padding:8px 10px}
  .reel-layout{width:100%}
  .reel-shell{height:calc(100dvh - 60px)}
  .reel-card{gap:10px;padding:40px 21px max(13px,env(safe-area-inset-bottom))}
  .reel-card-top{padding-bottom:8px;font-size:10px}
  .reel-question>p:first-child{margin-bottom:11px;font-size:10px}
  .reel-question h2{font-size:clamp(34px,9vw,42px)}
  .reel-context{margin-top:11px;font-size:12.5px;line-height:1.5;-webkit-line-clamp:2}
  .reel-choice{min-height:67px;padding:8px 12px;border-left-width:4px}
  .reel-choice-label{font-size:10px}
  .reel-choice strong{font-size:12px}
  .reel-card-bottom{display:grid;gap:4px}
  .reel-write{width:100%;min-height:45px}
  .reel-write span{width:34px;height:34px}
  .reel-secondary{justify-content:space-between}
  .reel-secondary button{min-height:36px;padding:4px 0}
  .reel-secondary a{min-height:36px;padding:4px 0}
  .reel-vote-meta{min-height:22px}
  .reel-vote-meta button,.reel-vote-meta p{font-size:10px}
  .reel-result{padding:7px 0 6px}
  .reel-result-tally strong{font-size:22px}
  .reel-result-track{height:11px;margin-top:5px}
  .reel-result-note{margin-top:4px}
  body.igeon-home .igeon-issues{margin-top:74px}
  body.igeon-home .igeon-issue-card{grid-template-columns:1fr;padding:20px 0}
  body.igeon-home .issue-card-index,body.igeon-home .issue-card-arrow{display:none}
}
@media(max-width:360px), (max-height:700px){
  .reel-card{padding-top:36px;padding-bottom:9px}
  .reel-question h2{font-size:clamp(31px,8.6vw,37px);-webkit-line-clamp:3}
  .reel-context{font-size:12px;-webkit-line-clamp:2}
  .reel-choice{min-height:60px}
  .reel-choice strong{-webkit-line-clamp:1}
  .reel-card:not([data-vote-selected=""]){gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .reel-viewport{scroll-behavior:auto}
  .reel-choice,.reel-write,.reel-progress button span{transition:none}
}