/* =========================================================
   HOLD'EM SPOT
   BEGINNER GUIDE
========================================================= */

.guide-page{
  overflow:hidden;
}


/* HERO */

.guide-hero{
  position:relative;
  overflow:hidden;

  min-height:520px;

  border-bottom:1px solid rgba(213,178,89,.12);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(223,190,103,.12),
      transparent 20%
    ),
    radial-gradient(
      ellipse at 76% 115%,
      rgba(34,131,84,.32),
      transparent 42%
    ),
    linear-gradient(
      115deg,
      #07170f,
      #0a2117 45%,
      #07140e 70%,
      #1e1406
    );
}


.guide-hero::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.22;

  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.016) 1px,
      transparent 1px
    );

  background-size:80px 80px;
}


.guide-hero-inner{
  position:relative;
  z-index:2;

  min-height:520px;

  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  align-items:center;

  gap:70px;
}


.guide-kicker{
  margin:0 0 18px;

  color:#c9aa5a;

  font-size:10px;
  font-weight:900;

  letter-spacing:3px;
}


.guide-hero-copy h1{
  margin:0 0 20px;

  color:#f5f0e5;

  font-size:clamp(43px,5vw,63px);

  line-height:1.08;

  letter-spacing:-.06em;
}


.guide-hero-copy h1 span{
  color:#ebcf80;

  font-family:Georgia,"Noto Serif KR",serif;
}


.guide-hero-desc{
  max-width:650px;

  color:#9cacA1;
  font-size:13px;

  line-height:2;
}


.guide-hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:27px;
}


.guide-main-button,
.guide-sub-button{
  min-height:49px;

  padding:0 20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:18px;

  border-radius:11px;

  font-size:11px;
  font-weight:900;

  transition:.18s ease;
}


.guide-main-button{
  border:1px solid #dfbb63;

  color:#171006;

  background:
    linear-gradient(
      135deg,
      #f1d98f,
      #d5ad50,
      #a97a2a
    );

  box-shadow:
    0 16px 34px rgba(206,165,64,.14);
}


.guide-sub-button{
  border:1px solid rgba(118,155,133,.29);

  color:#d7e0d9;

  background:rgba(5,18,11,.55);
}


.guide-main-button:hover,
.guide-sub-button:hover{
  transform:translateY(-2px);
}


/* HERO CARD */

.guide-hero-card{
  position:relative;

  min-height:365px;

  padding:27px;

  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  border:1px solid rgba(220,185,96,.35);
  border-radius:24px;

  background:
    radial-gradient(
      circle at 76% 20%,
      rgba(234,202,115,.17),
      transparent 22%
    ),
    radial-gradient(
      circle at 25% 110%,
      rgba(41,139,89,.42),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #123b28,
      #071810 62%,
      #211506
    );

  box-shadow:
    0 38px 85px rgba(0,0,0,.38);

  transform:rotate(1.5deg);
}


.guide-hero-card::after{
  content:"♠";

  position:absolute;
  right:-25px;
  top:45px;

  color:rgba(239,209,128,.07);

  font:240px Georgia;
  line-height:1;
}


.guide-card-top{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:space-between;

  color:#9d874b;

  font-size:8px;
  font-weight:900;

  letter-spacing:1.7px;
}


.guide-card-top b{
  color:#e2c36d;

  font:700 18px Georgia;
}


.guide-playing-cards{
  position:relative;
  z-index:2;

  height:125px;

  margin-top:5px;
}


.guide-playing-cards span{
  position:absolute;

  width:78px;
  height:108px;

  padding:9px;

  border-radius:10px;

  color:#111;

  background:
    linear-gradient(
      145deg,
      #fff,
      #e9e0c7
    );

  box-shadow:
    0 18px 32px rgba(0,0,0,.35);

  font:700 22px Georgia;
}


.guide-playing-cards .card-a{
  left:13px;

  transform:rotate(-10deg);
}


.guide-playing-cards .card-k{
  left:72px;
  top:6px;

  color:#9a1e2a;

  transform:rotate(7deg);
}


.guide-card-copy{
  position:relative;
  z-index:2;
}


.guide-card-copy small{
  color:#83968a;

  font-size:8px;

  letter-spacing:1.4px;
}


.guide-card-copy strong{
  display:block;

  margin-top:8px;

  color:#f1e4c3;

  font:700 23px/1.5 Georgia,"Noto Serif KR",serif;
}


/* INDEX */

.guide-index{
  position:relative;
  z-index:4;

  margin-top:-26px;
}


.guide-index-grid{
  overflow:hidden;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  border:1px solid rgba(108,145,122,.26);
  border-radius:17px;

  background:rgba(7,20,14,.94);

  box-shadow:
    0 22px 50px rgba(0,0,0,.27);
}


.guide-index-grid a{
  min-height:102px;

  padding:18px;

  display:grid;
  grid-template-columns:28px 1fr;
  align-content:center;

  gap:2px 10px;

  transition:background .18s ease;
}


.guide-index-grid a:not(:nth-child(4n)){
  border-right:1px solid rgba(110,145,124,.13);
}


.guide-index-grid a:nth-child(-n+4){
  border-bottom:1px solid rgba(110,145,124,.13);
}


.guide-index-grid a:hover{
  background:rgba(27,60,42,.42);
}


.guide-index-grid span{
  grid-row:1 / 3;

  color:#735f35;

  font:700 12px Georgia;
}


.guide-index-grid strong{
  color:#e1e7e3;

  font-size:12px;
}


.guide-index-grid small{
  color:#718379;

  font-size:9px;
}


/* SECTIONS */

.guide-section{
  padding:80px 0;
}


.guide-dark-section{
  border-top:1px solid rgba(111,145,125,.09);
  border-bottom:1px solid rgba(111,145,125,.09);

  background:
    linear-gradient(
      180deg,
      rgba(3,12,7,.45),
      rgba(5,16,10,.68)
    );
}


.guide-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:25px;

  margin-bottom:27px;
}


.guide-section-head p{
  margin:0 0 7px;

  color:#b3984f;

  font-size:9px;
  font-weight:900;

  letter-spacing:2.3px;
}


.guide-section-head h2{
  margin:0;

  color:#edf1ee;

  font-size:clamp(27px,3vw,37px);
}


.guide-section-head small{
  display:block;

  margin-top:7px;

  color:#76887d;

  font-size:10px;
}


.guide-section-head > span{
  padding:6px 10px;

  border:1px solid rgba(210,175,87,.18);
  border-radius:999px;

  color:#9d8954;

  background:rgba(37,29,10,.28);

  font-size:9px;
}


/* INTRO */

.guide-intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:14px;
}


.guide-info-card{
  padding:24px;

  border:1px solid rgba(104,142,120,.24);
  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.guide-info-card > b{
  display:block;

  margin-bottom:15px;

  color:#daba61;

  font:700 35px Georgia;
}


.guide-info-card h3{
  margin:0 0 8px;

  color:#e7ece8;

  font-size:18px;
}


.guide-info-card p{
  margin:0;

  color:#8fa196;

  font-size:11px;

  line-height:1.85;
}


.guide-info-card p strong{
  color:#d9c17e;
}


.guide-note-box{
  margin-top:14px;

  padding:19px 22px;

  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;

  gap:20px;

  border:1px solid rgba(208,172,84,.25);
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      rgba(41,31,11,.56),
      rgba(8,24,16,.78)
    );
}


.guide-note-box strong{
  color:#e3c46d;

  font-size:12px;
}


.guide-note-box p{
  margin:0;

  color:#a0b0a5;

  font-size:11px;

  line-height:1.8;
}


/* RANKING */

.ranking-list{
  display:grid;

  gap:8px;
}


.ranking-card{
  min-height:82px;

  padding:13px 16px;

  display:grid;

  grid-template-columns:
    55px
    190px
    230px
    minmax(0,1fr);

  align-items:center;

  gap:15px;

  border:1px solid rgba(104,142,120,.22);
  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      rgba(11,30,21,.92),
      rgba(7,19,13,.95)
    );

  transition:.18s ease;
}


.ranking-card:hover{
  transform:translateX(3px);

  border-color:rgba(205,169,82,.34);
}


.ranking-top{
  border-color:rgba(218,181,91,.38);

  background:
    radial-gradient(
      circle at 90% 0,
      rgba(215,181,91,.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #12271b,
      #08150f
    );
}


.ranking-number{
  color:#806b38;

  font:700 20px Georgia;
}


.ranking-name small{
  color:#6f8176;

  font-size:7px;

  letter-spacing:1.2px;
}


.ranking-name h3{
  margin:2px 0 0;

  color:#e7ece8;

  font-size:16px;
}


.ranking-example{
  padding:8px 10px;

  border:1px solid rgba(109,145,123,.20);
  border-radius:8px;

  color:#e8eee9;

  background:rgba(3,11,7,.65);

  font:700 15px Georgia;

  letter-spacing:.05em;

  text-align:center;
}


.ranking-example.red{
  color:#e69b9b;
}


.ranking-card > p{
  margin:0;

  color:#8fa196;

  font-size:10px;

  line-height:1.75;
}


.guide-warning{
  margin-top:18px;

  padding:18px;

  display:grid;
  grid-template-columns:35px 1fr;

  gap:14px;

  border:1px solid rgba(197,154,61,.30);
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      rgba(48,35,10,.68),
      rgba(12,23,16,.72)
    );
}


.guide-warning > span{
  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#191107;
  background:#dab65d;

  font-weight:900;
}


.guide-warning strong{
  color:#e6ca7f;

  font-size:11px;
}


.guide-warning p{
  margin:5px 0 0;

  color:#9dadA2;

  font-size:10px;

  line-height:1.75;
}


.guide-warning p b{
  color:#f0d37c;
}


.guide-mini-tip{
  margin-top:9px;

  padding:17px 19px;

  border:1px solid rgba(101,140,117,.23);
  border-radius:12px;

  background:rgba(8,23,15,.70);
}


.guide-mini-tip strong{
  color:#d8e0da;

  font-size:11px;
}


.guide-mini-tip p{
  margin:5px 0 0;

  color:#899c90;

  font-size:10px;

  line-height:1.8;
}


.guide-mini-tip p b{
  color:#e0c36d;
}


/* FLOW */

.flow-line{
  position:relative;

  display:grid;

  gap:9px;
}


.flow-line::before{
  content:"";

  position:absolute;

  left:27px;
  top:40px;
  bottom:40px;

  width:1px;

  background:
    linear-gradient(
      180deg,
      #c9a650,
      rgba(109,143,121,.15)
    );
}


.flow-line article{
  position:relative;

  min-height:112px;

  padding:18px 18px 18px 73px;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;

  gap:20px;

  border:1px solid rgba(104,142,120,.22);
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #0a1e15,
      #07140e
    );
}


.flow-line article > b{
  position:absolute;

  left:11px;
  top:34px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid rgba(216,181,91,.30);
  border-radius:50%;

  color:#d8b75d;
  background:#091810;

  font:700 10px Georgia;
}


.flow-line small{
  color:#718379;

  font-size:7px;

  letter-spacing:1.4px;
}


.flow-line h3{
  margin:2px 0 5px;

  color:#e7ece8;

  font-size:17px;
}


.flow-line p{
  margin:0;

  color:#8fa196;

  font-size:10px;
}


.flow-cards,
.flow-board{
  display:flex;

  gap:5px;
}


.flow-cards span,
.flow-board span{
  width:45px;
  height:59px;

  padding:5px;

  display:flex;
  align-items:flex-start;

  border-radius:6px;

  color:#151515;
  background:#f3ecda;

  font:700 12px Georgia;
}


.flow-cards span.red,
.flow-board span.red{
  color:#9b1e2a;
}


.flow-showdown{
  padding:12px 15px;

  border:1px solid rgba(213,178,89,.27);
  border-radius:8px;

  color:#dbbd68;

  background:rgba(42,32,11,.38);

  font:700 10px Georgia;

  letter-spacing:1.2px;
}


/* ACTIONS */

.action-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:12px;
}


.action-grid article{
  min-height:180px;

  padding:21px;

  border:1px solid rgba(104,142,120,.23);
  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );

  transition:.18s ease;
}


.action-grid article:hover{
  transform:translateY(-3px);

  border-color:rgba(207,171,84,.36);
}


.action-grid article > span{
  color:#a68c48;

  font-size:8px;
  font-weight:900;

  letter-spacing:1.7px;
}


.action-grid h3{
  margin:10px 0 8px;

  color:#e7ece8;

  font-size:20px;
}


.action-grid p{
  margin:0;

  color:#8fa196;

  font-size:10px;

  line-height:1.85;
}


/* FIVE CARD */

.five-card-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;

  gap:15px;
}


.five-card-explain,
.board-example{
  padding:26px;

  border:1px solid rgba(104,142,120,.23);
  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.five-card-explain h3{
  margin:0 0 13px;

  color:#e8ede9;

  font-size:24px;
}


.five-card-explain h3 span{
  color:#e0bf68;
}


.five-card-explain > p{
  color:#94a69a;

  font-size:11px;

  line-height:1.9;
}


.five-card-explain ul{
  margin:20px 0 0;
  padding:0;

  display:grid;

  gap:7px;

  list-style:none;
}


.five-card-explain li{
  padding:9px 11px;

  border:1px solid rgba(102,140,117,.20);
  border-radius:8px;

  color:#9eafa4;

  background:rgba(3,12,7,.45);

  font-size:10px;
}


.five-card-explain li strong{
  color:#dfc36e;
}


.board-example{
  position:relative;

  overflow:hidden;
}


.board-label{
  margin-bottom:17px;

  color:#a58b48;

  font-size:8px;
  font-weight:900;

  letter-spacing:1.6px;
}


.example-row{
  padding:12px 0;

  display:grid;
  grid-template-columns:85px 1fr;
  align-items:center;

  gap:15px;

  border-bottom:1px solid rgba(104,139,119,.14);
}


.example-row > strong{
  color:#7d9084;

  font-size:9px;
}


.example-row > div{
  display:flex;

  gap:5px;
}


.example-row span{
  min-width:43px;
  height:56px;

  padding:6px;

  border-radius:6px;

  color:#151515;
  background:#f2ead6;

  font:700 12px Georgia;
}


.example-row span.red{
  color:#9b1f2a;
}


.example-result{
  margin-top:18px;

  padding:17px;

  border:1px solid rgba(211,176,87,.24);
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      rgba(42,32,11,.47),
      rgba(8,24,16,.65)
    );
}


.example-result small{
  color:#957e44;

  font-size:7px;

  letter-spacing:1.3px;
}


.example-result b{
  display:block;

  margin:5px 0 8px;

  color:#e3c46d;

  font:700 19px Georgia;

  letter-spacing:.14em;
}


.example-result p{
  margin:0;

  color:#90a297;

  font-size:10px;

  line-height:1.7;
}


/* COMPARISON */

.compare-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:12px;
}


.compare-grid article{
  padding:22px;

  border:1px solid rgba(104,142,120,.23);
  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.compare-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-bottom:15px;
}


.compare-title b{
  color:#e3c46d;

  font-size:12px;
}


.compare-title span{
  color:#74877b;

  font-size:8px;
}


.compare-hand{
  padding:10px;

  border:1px solid rgba(108,143,122,.18);
  border-radius:8px;

  color:#dfe7e1;
  background:rgba(3,11,7,.55);

  font:700 15px Georgia;

  text-align:center;

  letter-spacing:.08em;
}


.compare-hand strong{
  color:#e6c76f;
}


.compare-vs{
  padding:5px 0;

  color:#685b38;

  font:700 8px Georgia;

  text-align:center;
}


.compare-grid article > p{
  margin:13px 0 0;

  color:#8fa196;

  font-size:10px;

  line-height:1.75;
}


/* POSITION */

.position-layout{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:16px;
}


.position-table,
.position-copy{
  min-height:410px;

  padding:25px;

  border:1px solid rgba(104,142,120,.23);
  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.position-table{
  display:grid;
  place-items:center;
}


.poker-table{
  position:relative;

  width:330px;
  height:210px;

  border:7px solid #2c1c0a;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #1e6945,
      #0c432c
    );

  box-shadow:
    inset 0 0 0 2px rgba(224,192,104,.21),
    0 20px 40px rgba(0,0,0,.30);
}


.table-center{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  color:rgba(237,217,165,.35);

  font:700 15px Georgia;

  letter-spacing:2px;

  text-align:center;
}


.table-center small{
  display:block;

  margin-top:3px;

  font-size:7px;
}


.seat{
  position:absolute;

  min-width:57px;

  padding:6px 7px;

  border:1px solid rgba(132,159,141,.28);
  border-radius:999px;

  color:#8ea095;
  background:#07130e;

  font-size:7px;
  font-weight:900;

  text-align:center;
}


.seat-1{
  left:-23px;
  top:27px;
}


.seat-2{
  left:-25px;
  bottom:23px;
}


.seat-3{
  right:24px;
  bottom:-18px;
}


.seat-4{
  right:-28px;
  bottom:53px;
}


.seat-5{
  right:-26px;
  top:25px;
}


.seat-6{
  left:137px;
  top:-18px;
}


.seat.btn{
  color:#1b1206;
  background:#dab75f;
}


.seat.sb{
  color:#d8c585;

  border-color:rgba(207,171,83,.32);
}


.seat.bb{
  color:#a4ddba;

  border-color:rgba(77,151,101,.32);
}


.position-copy{
  display:grid;

  gap:8px;

  align-content:center;
}


.position-copy article{
  padding:12px 0;

  display:grid;
  grid-template-columns:45px 1fr;

  gap:12px;

  border-bottom:1px solid rgba(105,140,119,.14);
}


.position-copy article > span{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:1px solid rgba(209,174,86,.27);
  border-radius:50%;

  color:#dfbf69;

  font:700 9px Georgia;
}


.position-copy h3{
  margin:0 0 4px;

  color:#e7ece8;

  font-size:15px;
}


.position-copy p{
  margin:0;

  color:#8fa196;

  font-size:10px;

  line-height:1.7;
}


.position-tip{
  margin-top:4px;

  padding:13px;

  border:1px solid rgba(207,170,81,.22);
  border-radius:9px;

  color:#8fa196;
  background:rgba(37,29,10,.32);

  font-size:9px;

  line-height:1.7;
}


.position-tip strong{
  color:#dfc16d;
}


/* TERMS */

.term-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:9px;
}


.term-grid article{
  min-height:150px;

  padding:18px;

  border:1px solid rgba(104,142,120,.22);
  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.term-grid b{
  display:block;

  color:#e2e8e4;

  font-size:14px;
}


.term-grid span{
  display:block;

  margin:3px 0 10px;

  color:#896f38;

  font-size:7px;
  font-weight:900;

  letter-spacing:1.1px;
}


.term-grid p{
  margin:0;

  color:#899c90;

  font-size:9px;

  line-height:1.75;
}


/* FAQ */

.faq-list{
  overflow:hidden;

  border:1px solid rgba(104,142,120,.23);
  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.faq-list details{
  padding:0 21px;

  border-bottom:1px solid rgba(104,139,119,.14);
}


.faq-list details:last-child{
  border-bottom:0;
}


.faq-list summary{
  padding:18px 0;

  color:#dfe6e1;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}


.faq-list details p{
  margin:-2px 0 18px;

  color:#8fa196;

  font-size:10px;

  line-height:1.8;
}


/* FIRST VISIT */

.guide-visit-section{
  padding-bottom:45px;
}


.visit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:10px;
}


.visit-grid article{
  min-height:185px;

  padding:20px;

  border:1px solid rgba(104,142,120,.23);
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #0a1f16,
      #07140e
    );
}


.visit-grid article > b{
  color:#806a38;

  font:700 22px Georgia;
}


.visit-grid h3{
  margin:12px 0 7px;

  color:#e6ebe7;

  font-size:17px;
}


.visit-grid p{
  margin:0;

  color:#8fa196;

  font-size:10px;

  line-height:1.8;
}


.guide-final-card{
  position:relative;

  overflow:hidden;

  margin-top:14px;

  padding:35px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;

  border:1px solid rgba(214,179,89,.31);
  border-radius:19px;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(221,186,97,.13),
      transparent 25%
    ),
    linear-gradient(
      120deg,
      #102d20,
      #081810 62%,
      #211606
    );
}


.guide-final-card::after{
  content:"♠";

  position:absolute;

  right:160px;
  top:-65px;

  color:rgba(233,201,119,.05);

  font:250px Georgia;
}


.guide-final-card > div,
.guide-final-card .guide-main-button{
  position:relative;
  z-index:2;
}


.guide-final-card small{
  color:#a88e48;

  font-size:8px;
  font-weight:900;

  letter-spacing:1.5px;
}


.guide-final-card h2{
  margin:7px 0 8px;

  color:#edf1ee;

  font-size:27px;
}


.guide-final-card h2 span{
  color:#dfbd67;
}


.guide-final-card p{
  max-width:700px;

  margin:0;

  color:#84968b;

  font-size:10px;

  line-height:1.8;
}


.guide-responsible-note{
  margin:13px 0 0;

  color:#5f7266;

  font-size:8px;

  text-align:center;
}


/* SOURCES */

.guide-source-section{
  padding:15px 0 20px;
}


.guide-source-box{
  padding:16px 18px;

  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;

  gap:18px;

  border:1px solid rgba(104,142,120,.15);
  border-radius:11px;

  background:rgba(5,15,9,.58);
}


.guide-source-box > strong{
  color:#899c90;

  font-size:9px;
}


.guide-source-box p{
  margin:0;

  color:#607268;

  font-size:8px;

  line-height:1.6;
}


.guide-source-box > div{
  display:flex;

  gap:7px;
}


.guide-source-box a{
  padding:5px 7px;

  border:1px solid rgba(106,140,119,.16);
  border-radius:6px;

  color:#86764c;

  font-size:7px;
}


/* RESPONSIVE */

@media(max-width:1000px){

  .guide-hero-inner{
    grid-template-columns:1fr 310px;

    gap:35px;
  }


  .guide-hero-copy h1{
    font-size:47px;
  }


  .ranking-card{
    grid-template-columns:
      45px
      160px
      205px
      minmax(0,1fr);
  }


  .term-grid{
    grid-template-columns:repeat(3,1fr);
  }

}


@media(max-width:820px){

  .guide-hero-inner{
    min-height:auto;

    padding:65px 0 80px;

    grid-template-columns:1fr;
  }


  .guide-hero-card{
    display:none;
  }


  .guide-index-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .guide-index-grid a{
    border-right:0 !important;
    border-bottom:1px solid rgba(110,145,124,.13);
  }


  .guide-index-grid a:nth-child(odd){
    border-right:1px solid rgba(110,145,124,.13) !important;
  }


  .guide-intro-grid{
    grid-template-columns:1fr;
  }


  .ranking-card{
    grid-template-columns:45px 1fr 210px;
  }


  .ranking-card > p{
    grid-column:2 / -1;
  }


  .action-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .five-card-layout,
  .position-layout{
    grid-template-columns:1fr;
  }


  .compare-grid{
    grid-template-columns:1fr;
  }


  .term-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .visit-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .guide-source-box{
    grid-template-columns:1fr;
  }

}


@media(max-width:620px){

  .guide-section{
    padding:58px 0;
  }


  .guide-hero-copy h1{
    font-size:36px;
  }


  .guide-hero-desc{
    font-size:11px;
  }


  .guide-section-head{
    align-items:flex-start;

    flex-direction:column;

    gap:10px;
  }


  .guide-note-box{
    grid-template-columns:1fr;

    gap:6px;
  }


  .ranking-card{
    grid-template-columns:38px 1fr;
  }


  .ranking-example{
    grid-column:1 / -1;
  }


  .ranking-card > p{
    grid-column:1 / -1;
  }


  .flow-line article{
    padding-left:63px;

    grid-template-columns:1fr;
  }


  .flow-cards,
  .flow-board,
  .flow-showdown{
    margin-top:4px;
  }


  .action-grid{
    grid-template-columns:1fr;
  }


  .term-grid{
    grid-template-columns:1fr 1fr;
  }


  .guide-final-card{
    align-items:flex-start;

    flex-direction:column;

    padding:28px 23px;
  }


  .guide-source-box > div{
    flex-wrap:wrap;
  }

}


@media(max-width:430px){

  .guide-hero-inner{
    padding-top:52px;
  }


  .guide-hero-copy h1{
    font-size:31px;
  }


  .guide-hero-actions{
    display:grid;
  }


  .guide-main-button,
  .guide-sub-button{
    width:100%;
  }


  .guide-index-grid{
    grid-template-columns:1fr;
  }


  .guide-index-grid a{
    border-right:0 !important;
  }


  .guide-index-grid a:nth-child(odd){
    border-right:0 !important;
  }


  .term-grid,
  .visit-grid{
    grid-template-columns:1fr;
  }


  .poker-table{
    transform:scale(.82);
  }

}


/* V2.5 ADMIN MANAGED GUIDE ARTICLES */
.managed-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.managed-guide-card{padding:23px;border:1px solid rgba(104,142,120,.22);border-radius:15px;background:linear-gradient(180deg,#0a1f16,#07140e)}
.managed-guide-card>small{color:#9c8243;font-size:7px;font-weight:900;letter-spacing:1.4px}
.managed-guide-card h3{margin:8px 0;color:#e7ece8;font-size:19px}
.managed-guide-card>p{margin:0 0 13px;color:#92a398;font-size:9px}
.managed-guide-card>div{padding-top:13px;border-top:1px solid rgba(103,140,117,.14);color:#9eaea4;font-size:10px;line-height:1.9}
@media(max-width:700px){.managed-guide-grid{grid-template-columns:1fr}}